The page starts out with a $ \TeX $ code x^2 - 3x + 2 = (x - 1)(x - 2). Math expressions composed in $\TeX$ will be either enclosed in a pair of single dollar sign or in a pair of double dollar signs. When enclosed in a pair of single dollar signs, the math expression is displayed inline along with other texts sorounding it like this $x^2-3x+2$. And, when enclosed in a pair of double dollars signs, the math expression is displayed in a separate line centered in the document as above, this is because our $\TeX$ code is enclosed in a pair of double dollar signs as follows:

<div id="equation">$$x^2 - 3x + 2 = (x - 1)(x - 2)$$</div>

When a user clicks the button "Show another example", the routine changeProblem() is called. The routine randomly selects two numbers m and n between 1 and 10 and use them to create a new expression x^2 - (m + n)x + mn = (x - m)(x - n) and replaces the HTML content of the above DIV element with it.

The new expression is in $\TeX$ code, but it will not be rerendered by MathJax unless we ask it to rerender, so we call the routine MathJax.Hub.Queue(["Typeset",MathJax.Hub,"equation"]).

MathJax renders the math expressions in the page only once at the start soon after the page is loaded unless you call it out to rerender the entire page or just a section of the page. Here we are calling MathJax to render just the section inside DIV tag with id "equation".

Here is the routine:

<script>
 m = Math.floor(10 * Math.random()) + 1;
 n = Math.floor(10 * Math.random()) + 1;
 s = m + n;
 divElement = document.getElementById("equation");
 divElement.innerHTML = "$$" + "x^2" + "-" + (m+n) + "x" + "+" + m*n + "=(x" + "-" + m + ")(x" + "-" + n + ")$$";
 MathJax.Hub.Queue(["Typeset",MathJax.Hub,"equation"]);
}
</script>