<html> <head> <title>MathJax with Dynamic CSS</title> <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"> </script> <style> #Step1, #Step2, #Step3, #Step4, #Step5 {visibility: hidden} </style> </head> <body> <p> Expand the following: \begin{align} (x+1)^2 &\cssId{Step1}{= (x+1)(x+1)}\\ &\cssId{Step2}{= x(x+1) + 1(x+1)}\\ &\cssId{Step3}{= (x^2+x) + (x+1)}\\ &\cssId{Step4}{= x^2 + (x + x) + 1}\\ &\cssId{Step5}{= x^2+2x+1}\\ \end{align} </p> <input type="button" onclick="DynamicMJ.ShowStep()" value="Show Next Step" id="step" disabled="true" /> <input type="button" onclick="DynamicMJ.ResetSteps()" value="Reset" id="reset" disabled="true" /> <script> var DynamicMJ = { n: 1, ShowStep: function () { document.getElementById("Step"+this.n).style.visibility = "visible"; this.n++; if (!document.getElementById("Step"+this.n)) { document.getElementById("step").disabled = true } document.getElementById("reset").disabled = false; }, ResetSteps: function () { document.getElementById("step").disabled = false; document.getElementById("reset").disabled = true; var i = 1, step; this.n = 1; while (step = document.getElementById("Step"+i)) { step.style.visibility = "hidden"; i++; } } }; MathJax.Hub.Queue(function () { document.getElementById("step").disabled = false; }); </script> </body> </html> |