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

Zachary Daily

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>
<!-- 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> -->

Edit: 1/29/2024 - Updated to account for breaking changes.  This now detects changes in the # location in the address bar to reapply mathjax.