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

Aug 01, 2017

John D
By John D

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 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 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
Garrett Spatz
over 3 years ago06/19/20 at 2:21 pm (UTC)

I work for a medical association, and having a built-in formula editor in Rise to add formulas in-line would really help us -- especially for our physics-related content.

I can see many others have been requesting this feature for quite some time. Are there any plans to incorporate such a feature? 

Kathy Zellers
almost 3 years ago01/22/21 at 11:03 pm (UTC)

+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?

Christopher Santos
over 1 year ago05/25/22 at 10:16 am (UTC)

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.

equation

You may then copy the code and paste it into Rise via the Embed block as shown here:

block

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.

Sign In to Reply