# How to add Accessible Mathematics to your rise course. (Including Super and Sub Scripts and Formulas)

Aug 01, 2017

Edit 1: Updated with JS to check for dynamically created content.

Edit 2: Updated with /content/lib/main.bundle.js script injection needed for continue buttons and other dynamic content.

Here are the steps to follow for creating accessible Math in rise:

1. Use the following site to create your math latex formula: https://www.codecogs.com/latex/eqneditor.php and to confirm the equation displays the way you want. An example of a formula might be x^{2} = \frac{2}{y} which is “x² = 2 / y”
2. Copy your latex formula into Rise where you want it, but add “$$” before and after, so:$$x^{2} = \frac{2}{y}$$3. Do this for all equations until you publish. 4. After publishing, extract the zip file and open index.html 5. After the <head> tag, insert the following Javascript: <script type="text/javascript"> // Inspect the array of MutationRecord objects to identify the nature of the change function mutationObjectCallback(mutationRecordsList) { mutationRecordsList.forEach(function(mutationRecord) { if ("attributes" === mutationRecord.type) { } }); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } // Create an observer object and assign a callback function var observerObject = new MutationObserver(mutationObjectCallback); // the target to watch, this could be #yourUniqueDiv // we use the body to watch for changes var targetObject = document.body; // Register the target node to observe and specify which DOM changes to watch observerObject.observe(targetObject, { attributes: true, attributeFilter: ["id", "dir"], attributeOldValue: true, childList: true }); </script> 6. Finally, in /content/lib/main.bundle.js search for the following code: return e.createElement("div", null, this.props.children) and add the following right before it: MathJax.Hub.Queue(["Typeset",MathJax.Hub]); ###### 46 Replies Hi John, I'll admit that math is not my strong subject...so it's a bit Greek to me. 🙂 I'd also suggest sharing in the That side tends to focus more on design and how to! Thanks for sharing and keep up the awesome work. Ashley, I actually have encountered an issue with my solution... I'm not sure if there is a direct line to the development team, but basically Rise uses React.js to write HTML dynamically which means I need to make the following JS call: MathJax.Hub.Queue(["Typeset",MathJax.Hub]); After everytime Rise completes a call to dangerouslySetInnerHTML... However, because Rise obfuscates it's main JS bundle, it's difficult to see if there is a common event listener where I can inject this code..... Where would be the best place to direct this question? I actually think i've answered this question while replying, and i've updated my original post with this new JS injection: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> // Inspect the array of MutationRecord objects to identify the nature of the change function mutationObjectCallback(mutationRecordsList) { mutationRecordsList.forEach(function(mutationRecord) { if ("attributes" === mutationRecord.type) { } }); MathJax.Hub.Queue(["Typeset",MathJax.Hub]); } // Create an observer object and assign a callback function var observerObject = new MutationObserver(mutationObjectCallback); // the target to watch, this could be #yourUniqueDiv // we use the body to watch for changes var targetObject = document.body; // Register the target node to observe and specify which DOM changes to watch observerObject.observe(targetObject, { attributes: true, attributeFilter: ["id", "dir"], attributeOldValue: true, childList: true }); Thanks John, this is great! I've noticed that the equations come in on their own lines, similar to using LaTEX. Do you know if it is also possible to enter math as in-line? I took a stab at using \sqrt{2} instead of$$\sqrt{2} as I would in LaTEX but with no luck.

I wonder if you need to add this code:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\$$","\$$"] ],
processEscapes: true
}
});
</script>

that did the trick! Thanks!

Hi John, Thanks - this is fantastic.

This served me perfectly before, but in my recent exports the main.bundle.js file has not contained the expression:

return e.createElement("div", null, this.props.children)

There is a

return e.createElement("div",null,this.props.children,e.createElement("div",{className:"browser-support"},....

but adding the MathJax line here does not seem to help. Any ideas?

Edit: The math content seems to be loading properly after completing a browser page refresh, but does not load properly when navigating from lesson to lesson.

Edit 2: Though I don't understand JavaScript well enough to understand what exactly is happening, I have things working by brute force: replacing ALL instances of:

;return e.createElement("div"

with

;MathJax.Hub.Queue(["Typeset",MathJax.Hub]);return e.createElement("div"

This post was removed by the author

Hi all,

Thanks for sharing here. We are tracking requests about folks who need support for mathematical equations in Rise and Storyline, and I know a number of individuals recommended MathJax. We'll let you know here if this is something that makes our product roadmap!

Has anyone figured out if this solution will work in Storyline? I'm hopeless at JS programming.

Ashley,  I would also like to be counted among those who would love to see robust math support for Rise.  We are evaluating Rise for technical education and are trying to figure out how to work around the current limited math support.

Thanks for adding your voice, Blake!  Nothing new to share yet, but this is the right place to stay posted.

Another voice for a math editor in Articulate 360

And, yet another voice 😊

Yes, please enable latex in Rise! Katex or mathjax support would be tremendous!

One more voice...PLEASE???  It's the only thing holding me back from rapid authoring in Rise.

This post was removed by the author

Twelve more voices for math editor in RISE (all our course development team)! I have also submitted this feature request last year.

Beautiful! But a bit of a pain, when MathJax could be included in Rise's source codes. Thanks guys for all the great info! Also I changed the script to : <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'></script> Since 2.7.5 seems to be the latest version. My issue lies with the very soft tools of Microsoft (as usual) since Edge doesn't display the equations properly. Ya! we could think 'who uses Edge?' but some students that are lesser computer trained do...

May I add that after a few readings, I found out that it looks like the W3C is pushing MathML on browser developers. Perhaps a MathML entry widget could be a possible and great solution in the upcoming future. ;)

The lack of an equation editor is a serious problem for a broad range of applications.  If John D could create this hack 2 years ago, it is unthinkable that the developer won't even put an equation editor on the road map.  It does not have to be pretty WYSIWYG at first go, just automatically implementing this JavaScript approach would be a tolerable stopgap.

If I had known of the limitations and the years of ignoring requests for math support in Articulate 360, I might have rethought my recommendation for my institution to purchase this software.  Screwing around with images is a pain and serious waste of my time.  Otherwise, it is reasonably good software and nicely polished.

Here's the code for MathJax version 3.  You can put this in the head section of the index.html page and don't have to worry about messing with the bundle.js file.

Edit: updated 5/19/20 after scripts started breaking - This is the risk of users having to implement workarounds to get this functionality.  Articulate stores the lesson content in JSON which is BASE64 encoded and stored in a variable on the index.html page.  It must decode and parse the JSON and dynamically load the content to the page after the page is loaded.  It would be great if Articulate could provide us with an event we could hook into when the content is finished loading to the page.  At that point we could simply call MathJax.typeset(); or MathJax.typesetPromise(); instead of haphazardly trying to detect DOM changes which is VERY inefficient.

<script>   var mathJaxPromise = null;   MathJax = {      tex: {         inlineMath: [['$', '$'],['\$$', '\$$']]      },      startup: {         ready: () => {            MathJax.startup.defaultReady(); // Make sure MathJax is initialized            // Whenever there's a DOM change, check the dynamic content for LaTex            var observer = new MutationObserver(function() {               if(mathJaxPromise) {                  mathJaxPromise.then(function() {                     mathJaxPromise = MathJax.typesetPromise();                  });               }               else {                  mathJaxPromise = MathJax.typesetPromise();               }            });            observer.observe(document.body, {               attributes: true,               attributeFilter: ["id", "dir"],               attributeOldValue: true,               childList: true            });         }      }   };</script><script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><!-- Uncomment one of the scripts below to use either chtml or svg. I defaulted to SVG for widest support --><!-- svg (use scalable images) --><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script><!-- chtml (use html/fonts and css (beware of EDGE) --><!-- <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> -->

+1 for a Equation editor in Rise