Math Equations Storyline (MathJax/LaTex)

Question

Here's a method for adding accessible Math Equations to your Storyline project using the MathJax JavaScript library.
----------------------------------------------------
Load the MathJax library from the content delivery network (CDN) into the Slide Master of your project. Add this script to the "timeline starts" trigger. This will ensure the library processes equations on any slide throughout your module. This could be modified to load the script file locally, if you copy the "tex-mml-chtml.js" into your published files, and load from there instead.
function loadMathJax() {
	const script = document.createElement('script');
	script.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js";
	script.async = true;
	// Find the last script in the head
	const lastScript = document.head.getElementsByTagName('script');
	const lastScriptElement = lastScript[lastScript.length - 1];
	// Insert the new script after the last script
	if (lastScriptElement) {
	  lastScriptElement.parentNode.insertBefore(script, lastScriptElement.nextSibling);
	} else {
	  document.head.appendChild(script);
	}
	// set loaded flag;
	window.MathJaxLoaded = true;
  }
  if(typeof window.MathJaxLoaded === "undefined") loadMathJax();
Define your equation as your usually would in the text box:

The ALT text value needs to be edited into a special syntax so that it gets processed by MathJax:

When the slide loads, the contents of the slide is processed by MathJax, which results in the following, accessible, formatted equation. The added bonus is that the non accessible version of the equation is hidden from screen readers using the aria-hidden="true" attribute + value.
Consider the following equation 
&lt;mjx-container class="MathJax CtxtMenu_Attached_0" jax="CHTML" display="true" tabindex="0" ctxtmenu_counter="0" style="font-size: 114.6%; position: relative;"&gt;
	&lt;mjx-math display="true" class="MJX-TEX" aria-hidden="true" style="margin-left: 0px; margin-right: 0px;"&gt;
		&lt;mjx-msup&gt;
			&lt;mjx-mi class="mjx-i"&gt;
				&lt;mjx-c class="mjx-c1D44E TEX-I"&gt;&lt;/mjx-c&gt;
			&lt;/mjx-mi&gt;
			&lt;mjx-script style="vertical-align: 0.413em;"&gt;
				&lt;mjx-mn class="mjx-n" size="s"&gt;
					&lt;mjx-c class="mjx-c32"&gt;&lt;/mjx-c&gt;
				&lt;/mjx-mn&gt;
			&lt;/mjx-script&gt;
		&lt;/mjx-msup&gt;
		&lt;mjx-mo class="mjx-n" space="3"&gt;
			&lt;mjx-c class="mjx-c2B"&gt;&lt;/mjx-c&gt;
		&lt;/mjx-mo&gt;
		&lt;mjx-msup space="3"&gt;
			&lt;mjx-mi class="mjx-i"&gt;
				&lt;mjx-c class="mjx-c1D44F TEX-I"&gt;&lt;/mjx-c&gt;
			&lt;/mjx-mi&gt;
			&lt;mjx-script style="vertical-align: 0.413em;"&gt;
				&lt;mjx-mn class="mjx-n" size="s"&gt;
					&lt;mjx-c class="mjx-c32"&gt;&lt;/mjx-c&gt;
				&lt;/mjx-mn&gt;
			&lt;/mjx-script&gt;
		&lt;/mjx-msup&gt;
		&lt;mjx-mo class="mjx-n" space="4"&gt;
			&lt;mjx-c class="mjx-c3D"&gt;&lt;/mjx-c&gt;
		&lt;/mjx-mo&gt;
		&lt;mjx-msup space="4"&gt;
			&lt;mjx-mi class="mjx-i"&gt;
				&lt;mjx-c class="mjx-c1D450 TEX-I"&gt;&lt;/mjx-c&gt;
			&lt;/mjx-mi&gt;
			&lt;mjx-script style="vertical-align: 0.413em;"&gt;
				&lt;mjx-mn class="mjx-n" size="s"&gt;
					&lt;mjx-c class="mjx-c32"&gt;&lt;/mjx-c&gt;
				&lt;/mjx-mn&gt;
			&lt;/mjx-script&gt;
		&lt;/mjx-msup&gt;
	&lt;/mjx-math&gt;
	&lt;mjx-assistive-mml unselectable="on" display="block"&gt;
		&lt;math
			xmlns="http://www.w3.org/1998/Math/MathML" display="block"&gt;
			&lt;msup&gt;
				&lt;mi&gt;a&lt;/mi&gt;
				&lt;mn&gt;2&lt;/mn&gt;
			&lt;/msup&gt;
			&lt;mo&gt;+&lt;/mo&gt;
			&lt;msup&gt;
				&lt;mi&gt;b&lt;/mi&gt;
				&lt;mn&gt;2&lt;/mn&gt;
			&lt;/msup&gt;
			&lt;mo&gt;=&lt;/mo&gt;
			&lt;msup&gt;
				&lt;mi&gt;c&lt;/mi&gt;
				&lt;mn&gt;2&lt;/mn&gt;
			&lt;/msup&gt;
		&lt;/math&gt;
	&lt;/mjx-assistive-mml&gt;
&lt;/mjx-container&gt;
&nbsp;

donnawestwood · Answer

Hi SamHill any tips on getting fractions to display correctly in SL using MathJax?? ( as in on top of each other as opposed to a / ) We are fighting with that at the moment - any help appreciated!!