{"id":1276,"date":"2019-08-28T12:51:38","date_gmt":"2019-08-28T12:51:38","guid":{"rendered":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/?p=1276"},"modified":"2019-08-28T12:57:01","modified_gmt":"2019-08-28T12:57:01","slug":"mathematical-equations-in-moodle","status":"publish","type":"post","link":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/posts\/1276","title":{"rendered":"Mathematical Equations in Moodle"},"content":{"rendered":"<p>When there are mathematical formula to be presented on a VLE page what are the options available?<\/p>\n<p>You could upload an image of the equation with appropriate alternative text description. However, this is not ideal. So what other options are there for Moodle users?<\/p>\n<h2>MathJax<\/h2>\n<p>Moodle has a <a href=\"https:\/\/www.mathjax.org\/\">MathJax<\/a> filter.\u00a0 \u00a0MathJax\u00a0 is <em>a JavaScript display engine for mathematics that works in all browsers <\/em> according to the <a href=\"https:\/\/www.mathjax.org\/\">MathJax\u00a0 website<\/a>. You can read more about <a href=\"https:\/\/docs.moodle.org\/37\/en\/MathJax_filter\">Moodle\u00a0MathJax Documentation<\/a>\u00a0in Moodle Docs.<\/p>\n<p><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/blogmathjax.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1290\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/blogmathjax.png\" alt=\"MathJax\" width=\"506\" height=\"99\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/blogmathjax.png 506w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/blogmathjax-300x59.png 300w\" sizes=\"(max-width: 506px) 100vw, 506px\" \/><\/a><\/p>\n<p>MathJax is enabled by default.\u00a0However, should there be a need to change settings the site administration can be done through\u00a0\u00a0Administration &gt; Site administration &gt; Plugins &gt; Filters &gt; Manage filters.<\/p>\n<h3>How can you insert a formula with MathJax?<\/h3>\n<p>If you are using <strong>TinyMCE<\/strong>\u00a0 text editor there may be some settings that you have to change please refer to the <a href=\"https:\/\/docs.moodle.org\/37\/en\/MathJax_filter\">Moodle MathJax Documentation<\/a>.\u00a0 You can check and change your text editor preference\u00a0 by\u00a0 going to preferences.<\/p>\n<figure id=\"attachment_1280\" aria-describedby=\"caption-attachment-1280\" style=\"width: 394px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/Blog1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1280\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/Blog1.png\" alt=\"&quot;&quot;\" width=\"394\" height=\"246\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/Blog1.png 394w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/Blog1-300x187.png 300w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/a><figcaption id=\"caption-attachment-1280\" class=\"wp-caption-text\">Moodle menu to select preferences<\/figcaption><\/figure>\n<p>From Preferences menu select <em>Editor preference<\/em>s.<\/p>\n<p>Now you can select which text editor you want to work with from the drop-down list.<\/p>\n<ul>\n<li>Atto HTML editor<\/li>\n<li>TinyMCE HTML editor<\/li>\n<li>Plain text area<\/li>\n<\/ul>\n<p>Because there was the caution about TinyMCE editor I use <strong>Atto HTML editor<\/strong>.<\/p>\n<p>In your\u00a0<b>Atto HTML edito<\/b>r to type a formula:<\/p>\n<ol>\n<li>Click on the <b>S<\/b><b>how\/hide advanced buttons<\/b><\/li>\n<li>\u00a0Go to\u00a0<b>Equation editor<\/b><\/li>\n<\/ol>\n<figure id=\"attachment_1281\" aria-describedby=\"caption-attachment-1281\" style=\"width: 686px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/Blog3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1281\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/Blog3.png\" alt=\"Atto editor showing show\/hide advanced buttons and equation editor buttons\" width=\"686\" height=\"159\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/Blog3.png 686w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/Blog3-300x70.png 300w\" sizes=\"(max-width: 686px) 100vw, 686px\" \/><\/a><figcaption id=\"caption-attachment-1281\" class=\"wp-caption-text\">Screenshot of Atto editor<\/figcaption><\/figure>\n<p>Equation editor requires a bit of getting used to. It has four tabs: Operators, Arrows, Greek symbols and Advance. Because I was entering fractions I used the Advanced tab mostly.<\/p>\n<p>Let me show you an example of entering a\u00a0 half. I select\u00a0 <em>a divided by b plus c\u00a0 <\/em>and then replace the values of a and b plus c with 1 and 2 respectively to get half.<\/p>\n<figure id=\"attachment_1282\" aria-describedby=\"caption-attachment-1282\" style=\"width: 634px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/blog4.png\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-1282\" src=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/blog4.png\" alt=\"&quot;&quot;\" width=\"634\" height=\"651\" srcset=\"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/blog4.png 682w, https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-content\/uploads\/2019\/08\/blog4-292x300.png 292w\" sizes=\"(max-width: 634px) 100vw, 634px\" \/><\/a><figcaption id=\"caption-attachment-1282\" class=\"wp-caption-text\">Equation editor<\/figcaption><\/figure>\n<p>When you insert this to the web page it shows as\u00a0\u00a0\\( \\frac{1}{2} \\) but it will be displayed as half by the clever MathJax filter.<\/p>\n<p>If you want to display a more complex formula, you can use the building blocks in the Advanced tab to build this. Once you have created quite a few formula you will\u00a0 even be able to type in the formula without using the equation editor!<\/p>\n<p>In formula we need superscripts and subscripts. Use underscore to create subscript and ^ for superscript.<\/p>\n<p>In this video you can see how a MathJax formula will be read out to a screen\u00a0 reader user.<br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/6GSgTjorewQ?start=34\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When there are mathematical formula to be presented on a VLE page what are the options available? You could upload an image of the equation&hellip;<\/p>\n","protected":false},"author":10,"featured_media":1290,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,68],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/1276"}],"collection":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/comments?post=1276"}],"version-history":[{"count":8,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/1276\/revisions"}],"predecessor-version":[{"id":1291,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/posts\/1276\/revisions\/1291"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/media\/1290"}],"wp:attachment":[{"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/media?parent=1276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/categories?post=1276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.ucem.ac.uk\/onlineeducation\/wp-json\/wp\/v2\/tags?post=1276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}