Flexible, enriched learning materials with Chirun

Chris Graham, Newcastle University

<p><link href="https://fonts.googleapis.com/css?family=Atkinson Hyperlegible" rel="stylesheet"/></p>
<h1 style="text-align: center;">Flexible, enriched learning materials with Chirun</h1>
<p style="text-align: center; font-size: 1.0em;">Chris Graham</p>
<div id="branding">
<div>
<a href="https://www.ncl.ac.uk" target="_blank">
<img alt="Newcaste University" class="nulogo" src="../../static/images/logos/newcastle-university-logo.png"/>
</a>
<p>School of Mathematics, Statistics & Physics Digital Learning Unit</p>
</div>
<div class="container">
<div class="col">
<a href="https://numbas.org.uk" target="_blank">
<img alt="Numbas" class="numbas" src="../../static/images/logos/numbas.png"/>
</a>
</div>
<div class="col">
<a href="https://www.advance-he.ac.uk/cate-team/e-learning-unit-school-mathematics-statistics-physics-newcastle-university" target="_blank">
<img alt="Collaborative Awards for Teaching Excellence (CATE) winners 2020" class="cate" src="../../static/images/logos/cate.png"/>
</a>
</div>
<div class="col">
<a href="https://chirun.readthedocs.io/en/latest/" target="_blank">
<img alt="Chirun" class="chirun" src="../../static/images/logos/chirun.png"/>
</a>
</div>
</div>
</div>
<p style="text-align: center; font-size: 0.85em;">Follow along at <a href="https://tinyurl.com/talksbychris" target="_blank">tinyurl.com/talksbychris</a></p>
<hr/>
<section class="section2"><h2>About me</h2>
<p>I'm a Senior Lecturer at Newcastle University and Director of our School's Digital Learning Unit.</p>
<p>I teach mathematical programming to maths students. I'll be talking about how my learning material has evolved over recent years.</p>
<hr/>
</section><section class="section2"><h2>Digital Learning Unit</h2>
<p>We are best known for the Numbas E-Assessment System. (I'll talk about this a bit...)</p>
<div style="width: 100%; text-align: center;">
<a href="https://numbas.org.uk" target="_blank">
<img alt="Numbas" src="../../static/images/logos/numbas.png" style="height: 50px;"/>
</a>
</div>
<div class="fragment">
<p>But this talk is mostly about <strong>Chirun</strong>, a tool developed to build course notes. (I'll talk about this a lot...)</p>
<div style="width: 100%; text-align: center;">
<a href="https://chirun.readthedocs.io/en/latest/" target="_blank">
<img alt="Chirun" src="../../static/images/logos/chirun.png" style="height: 50px;"/>
</a>
</div>
</div><hr/>
</section><section class="section2"><h2>Aim of this talk</h2>
<p>I'd like to raise awareness of our open source tools at Newcastle.</p>
<p>But really I'm here to add a different perspective on the advantages of moving away from traditional formats (handwritten, PDF...) to web-based learning material. </p>
<p>My story starts with <strong>accessibility</strong>, but is really about <strong>flexibility</strong> for students, and <strong>enrichment</strong> of course material.</p>
<hr/>
</section><section class="section2"><h2>The problem with PDF notes</h2>
<p>In our School, LaTeX generated PDFs are common, but not great for a student who may wish to:</p>
<ul>
<li>use text-to-speech software to read the content</li>
<li>change the background colour, font-size or spacing</li>
<li>view the content on a mobile device without zoom and scroll</li>
<li>navigate with a keyboard</li>
<li>many other reasons...</li>
</ul>
<hr/>
</section><section class="section2"><h2>Web-based notes</h2>
<p>As we've heard already, HTML output + MathJax is the gold standard for mathematical content on the web:</p>
<script type="math/tex; mode=display">f(x)=A_{0}+\sum _{n=1}^{\infty }A_{n}\cos \left(nx\right)+B_{n}\sin \left(nx\right)</script>
<hr/>
<p>This is not a sales pitch for Chirun. Other tools can convert LaTeX maths to an accessible web-based version:</p>
<ul>
<li>
<p>VLE pages sometimes support LaTeX maths </p>
</li>
<li>
<p>Conversion tools, e.g. Pandoc, Lwarp</p>
</li>
<li>
<p>R Markdown, Bookdown </p>
</li>
<li>
<p>PreTeXt, LaTeXML...</p>
</li>
</ul>
<p>More than anything, I encourage you to think about web-based output:</p>
<hr/>
</section><section class="section2"><h2>Chirun</h2>
<p>Developed at Newcastle University, <strong>Chirun</strong> converts documents in LaTeX or Markdown format to accessible, responsive, web-based HTML, plus a PDF option (and sometimes others).</p>
<p>It integrates with a VLE through an LTI tool.</p>
<figure class="figure1" data-title="Chirun"><img alt="Chirun" src="images/chirun.png" style="width: 700px;"/></figure><hr/>
<section class="section3"><h3>Origins</h3>
<figure class="figure2" data-title="Old accessible course notes"><img alt="Old accessible course notes" src="images/oldnotes.png" style="float:right; width: 50%; max-width: 350px; margin: 0 20px; border: 1px solid #AAA !important;"/></figure><p>Originally motivated by the needs of a severely disabled student moving through our maths degree, with specific requirements for course material.</p>
<div class="fragment">
<blockquote class="left green" style="max-width: 400px;">
"the accessible webnotes allow my screen reader to be able to read the notes out loud to me in a clear, consistent and fluent manor, where the original PDF doesn't read the maths properly at all."  
</blockquote>
</div><hr/>
</section><section class="section3"><h3>From accessibility to flexibility</h3>
<p>Having flexibile, accessible material is good for all students!</p>
<p>We are now delivering material for some modules entirely using the Chirun output as the primary format.</p>
<p>This lets students choose the format that suits their learning style.</p>
<hr/>
<section class="section4"><h4>This is a Chirun built presentation!</h4>
<div id="wrapper" style="perspective: 700px; float: left; width: 330px; margin-right: 60px;">
<div class="phone view_1" id="phone_1">
<iframe id="frame_1" src="../flexible_enriched_le/index.html"></iframe>
</div>
</div>
<div id="wrapper" style="float: left; width: 500px;">
<div class="phone view_3" id="phone_2">
<iframe id="frame_2" src="../flexible_enriched_le/index.html"></iframe>
</div>
</div>
<hr/>
</section></section><section class="section3"><h3>From flexibility to enrichment</h3>
<p>A web-based format opens up endless possibilities for making content more dynamic. In particular, it allows the embedding of learning material right where it is relevant:</p>
<iframe frameborder="0" height="300" src="https://embed.windy.com/embed2.html?lat=53.303&lon=-6.220&detailLat=53.334&detailLon=-6.227&width=650&height=300&zoom=10&level=surface&overlay=wind&product=ecmwf&menu=&message=&marker=true&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=default&metricTemp=default&radarRange=-1" width="650"></iframe>
<hr/>
<iframe height="600" src="https://phet.colorado.edu/sims/html/masses-and-springs/latest/masses-and-springs_en.html" width="850"></iframe>
<hr/>
</section><section class="section3"><h3>Built with Chirun</h3>
<p>As well as course material in modules, Chirun powers our maths student support website, transition material and more with themes that be customised to the application.</p>
<figure class="figure3" data-title="Sites created with Chirun"><img alt="Sites created with Chirun" src="images/bychirun.png" style="width: 70%;"/></figure><hr/>
</section></section><section class="section2"><h2>Trying out Chirun</h2>
<p>We have a <a href="https://mas-coursebuild.ncl.ac.uk/public/" target="_blank">public upload tool</a></p>
<p>Anyone can upload content to the tool: it provides a time-limited version of the generated material and option to download the output.</p>
<hr/>
<section class="section3"><h3>Getting content into your VLE</h3>
<p>This is a challenge: tools such as Chirun can produce web-based material, but where do you then put it to give access for students?</p>
<p>It's often possible to upload the content into a VLE files area, but tricky and inconvenient to give students access. Or it could be put on a web server somewhere.</p>
<p>The Chirun LTI tool was built to make this easier.</p>
<hr/>
</section><section class="section3"><h3>Chirun LTI tool</h3>
<p>The Chirun LTI tool gives an interface for uploading notes and controlling access for learners.</p>
<figure class="figure4" data-title="The upload screen and final result from a Chirun upload"><img alt="The upload screen and final result from a Chirun upload" src="images/chirunlti.png"/></figure><hr/>
</section><section class="section3"><h3>Chirun: Under Construction</h3>
<p>We've recently undergone personnel changes, which caused a stall but now new developments. Coming soon...</p>
<ul>
<li>Features to meet accessibility standards</li>
<li>New LTI tool<ul>
<li>Editing content in the browser</li>
<li>Easier to prepare a full module of content, but only link to a part of it</li>
<li>We're considering the barriers of hosting a public LTI tool </li>
</ul>
</li>
</ul>
<hr/>
</section></section><section class="section2"><h2>Case study: programming module</h2>
<p>Challenges: </p>
<ul>
<li>additional challenges for accessibility - multiple pieces of software</li>
<li>engagement - students with disparate computing experience who signed up for maths!</li>
</ul>
<hr/>
<section class="section3"><h3>Programming structure</h3>
<p>Programming is embedded in our mathematics programme:</p>
<ul>
<li>Stage 1: <ul>
<li>Problem solving with Python </li>
<li>Introduction to probability and R</li>
</ul>
</li>
<li>Stage 2:<ul>
<li>Numerical methods with Python </li>
<li>Computational statistics with R</li>
</ul>
</li>
</ul>
<p>Format is a 1 hour lecture, followed by a 2 hour practical each week.</p>
<hr/>
</section><section class="section3"><h3>Evolution of practical material</h3>
<p>From physical handouts, material has evolved to Chirun generated handouts.</p>
<figure class="figure5" data-title="Evolution from physical to virtual handouts"><img alt="Evolution from physical to virtual handouts" src="images/evolution.png" style="width: 80%;"/></figure><hr/>
</section><section class="section3"><h3>Jupyter notebook output</h3>
<p>Chirun generates a Jupyter notebook from the same source - an additional option and has been used as a solution for some Student Support Plans.</p>
<figure class="figure6" data-title="Evolution from physical to virtual handouts"><img alt="Evolution from physical to virtual handouts" src="images/jupyter.png" style="width: 80%;"/></figure><hr/>
</section><section class="section3"><h3>Embedded exercises</h3>
<p>Embedded exercises use the new Numbas extension to directly mark computer code.</p>
<figure class="figure7" data-title="An embedded exercise using Numbas"><img alt="An embedded exercise using Numbas" src="images/exercise.gif" style="width: 80%; border: 1px solid #CCC;"/></figure><hr/>
</section><section class="section3"><h3>Numbas Programming Extension</h3>
<iframe src="https://numbas.mathcentre.ac.uk/question/117159/get-the-first-item-in-a-list-with-a-hint/embed/?token=8b7564b3-1567-41cb-8fed-199c66e0d798" style="height: 550px; width: 100%;"></iframe>
<hr/>
</section><section class="section3"><h3>Runnable code in lectures</h3>
<pre class="cm-block" data-language="python" data-runnable="true" data-uuid="57ac888c-709a-419c-b35f-7a0506dbc189"><code>def gcd_recursion(a, b):
    if b == 0:
        return a
    return gcd_recursion(b, a % b)

print(gcd_recursion(12,8))</code></pre>
<hr/>
</section><section class="section3"><h3>Student feedback</h3>
<blockquote class="left green">
    I like that I can work through the handout so that I'm learning in the best way for myself, at my own pace 
</blockquote>
<blockquote class="right yellow">
    By far the most accessible module. The handouts and numbas quizs are amazing, easy to understand, easy to navigate. 
</blockquote>
<blockquote class="left blue">
    I appreciate all the available practice assesments and the content is laid out in a good and structured way.
</blockquote>
<hr/>
</section></section><section class="section2"><h2>Have a go</h2>
<p>Slides and some activities can be found at <a href="https://tinyurl.com/TalksByChris" target="_blank">tinyurl.com/TalksByChris</a>:</p>
<figure class="figure8" data-title="A QR code linking to tinyurl.com/TalksByChris"><img alt="A QR code linking to tinyurl.com/TalksByChris" src="images/qr.png" style="width: 350px;"/></figure><hr/>
</section><section class="section2"><h2>Thanks for listening!</h2>
<p>More info at <a href="https://chirun.readthedocs.io/" target="_blank">chirun.readthedocs.io</a></p>
<p>Any questions?</p>
</section>