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: 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” Copy your latex formula into Rise where you want it, but add “$$” before and after, so: $$x^{2} = \frac{2}{y}$$ Do this for all equations until you publish. After publishing, extract the zip file and open index.html After the <head> tag, insert the following Javascript: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML'></script> <script type="text/javascript"> // Inspect the array of MutationRecord objects to identify the nature of the changefunction mutationObjectCallback(mutationRecordsList) { mutationRecordsList.forEach(function(mutationRecord) { if ("attributes" === mutationRecord.type) { } });MathJax.Hub.Queue(["Typeset",MathJax.Hub]);} // Create an observer object and assign a callback functionvar observerObject = new MutationObserver(mutationObjectCallback); // the target to watch, this could be #yourUniqueDiv // we use the body to watch for changesvar 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]);

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 }); } } }; function typeset() { MathJax.startup.promise = MathJax.startup.promise .then(() => MathJax.typesetPromise()) .catch((err) => console.log('Typeset failed: ' + err.message)); return MathJax.startup.promise; } // Check for changes in the hash location in the address bar addEventListener("hashchange", (event) => { typeset(); });</script><script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-svg.js"></script> Edit: 1/29/2024 - Updated to account for breaking changes. This now detects changes in the # location in the address bar to reapply mathjax.

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!

This has been "on the roadmap" for years. Why isn't this a feature yet?

Forum Discussion

JohnDallas-80f1

Community Member

8 years ago

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

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:

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”
Copy your latex formula into Rise where you want it, but add “$$” before and after, so: $$x^{2} = \frac{2}{y}$$
Do this for all equations until you publish.
After publishing, extract the zip file and open index.html
After the <head> tag, insert the following Javascript:

// 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]);

rise 360

BradleySlattery
Community Member
4 years ago
+1 for adding support for equations in Rise!
KathyZellers-be
Community Member
4 years ago
+1 Institution for a math editor in Articulate 360 - I was just getting ready to load up the credit card with purchases of 360. It must be very difficult as a Staff member monitoring these boards to say that it's not on the roadmap yet year after year. A math editor in a teaching and learning tool seems so obvious. I am really surprised by this. Does the development team have a sense of how much business is lost by not implementing this critical teaching and learning tool?
BethCase-c92276
Community Member
4 years ago
This has been "on the roadmap" for years. Why isn't this a feature yet?
YvonnickBern229
Community Member
4 years ago
Agree with Math Notermans
EmmanuelMoyo
Community Member
3 years ago
Does anyone know why Rise is taking so long to add this feature? I mean, it's one of the most important in our work. What's so difficult about simply adding an Equations Block that's just similar to Microsoft Word that we can insert and work on equations from?
- Chris-Santos
  Staff
  3 years ago
  Hi Emmanuel,
  
  I can propose one workaround: use the online version of Microsoft Word - accessible by logging in to office.com - and grab the <iframe> code to insert the equation as an Embed block in Rise ( note: Google Docs also has a similar feature).
  
  To access the embed code from the online version of Word, you can go to File > Share > Embed.
  
  You may then copy the code and paste it into Rise via the Embed block as shown here:
  
  Microsoft adds a few more parameters into the <iframe> code. Be sure to retain only the basic <iframe> code. Otherwise, Rise might not accept it.
JanetGohlke-Rou
Community Member
3 years ago
My team, 25 developers needs math equation functionality. We are working on digitalizing general subjects curricula for Lebanese vocational and technical education. And there is more work to come! Please, this feature is nesessary in Rise!
BethCase-c92276
Community Member
2 years ago
This is a ridiculous amount of technical work when Articulate should just finally include a Math editor. I don't understand why this hasn't been a top priority.
- SimonBailey-906
  Community Member
  2 years ago
  agreed 100%
EricDavies-7468
Community Member
2 years ago
+1 for Maths editor (accessibility is a must).
EricDavies-7468
Community Member
2 years ago
+1 for a Equation editor in Rise
CarolKinnard
Community Member
2 years ago
Hi John, Thanks for the MathJax version 3 of the script from a few years ago. Unfortunately, it does not seem to be working now - the equations will only render after a browser refresh/reload. Do you (or anyone else for that matter) have a new version of the script?