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

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 Building Better Courses side of ELH. 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
});

</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML'></script>

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>

source: https://tex.stackexchange.com/questions/27633/mathjax-inline-mode-not-rendering

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"

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.