sample-dynamic-steps.html (2508B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>MathJax Dynamic Steps Test Page</title> 5 <!-- Copyright (c) 2011-2015 The MathJax Consortium --> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 <script type="text/x-mathjax-config"> 11 // 12 // Make displayed equations be aligned left and indented 13 // 14 MathJax.Hub.Config({ 15 displayAlign: "left", 16 displayIndent: "2em" 17 }); 18 // 19 // Enable the step button after the equation is typeset 20 // 21 MathJax.Hub.Queue(function () { 22 document.getElementById("step").disabled = false; 23 }); 24 </script> 25 <script type="text/javascript" src="../MathJax.js?config=TeX-AMS_HTML-full"></script> 26 27 <script type="text/javascript"> 28 // 29 // Use a closure to hide the local variable 30 // 31 (function () { 32 var n = 1; 33 34 // 35 // Make the current step be visible, and increment the step. 36 // If it is the last step, disable the step button. 37 // Once a step is taken, the reset button is made available. 38 // 39 window.ShowStep = function () { 40 document.getElementById("Step"+n).style.visibility = "visible"; n++; 41 if (!document.getElementById("Step"+n)) {document.getElementById("step").disabled = true} 42 document.getElementById("reset").disabled = false; 43 } 44 45 // 46 // Enable the step button and disable the reset button. 47 // Hide the steps. 48 // 49 window.ResetSteps = function () { 50 document.getElementById("step").disabled = false; 51 document.getElementById("reset").disabled = true; 52 var i = 1, step; n = 1; 53 while (step = document.getElementById("Step"+i)) {step.style.visibility = "hidden"; i++} 54 } 55 })(); 56 </script> 57 58 <style> 59 /* 60 * Start with the steps being hidden 61 */ 62 #Step1, #Step2, #Step3, #Step4, #Step5 { 63 visibility: hidden; 64 } 65 66 h1 { 67 background: #CCCCCC; 68 padding: .2em 1em; 69 border-top: 3px solid #666666; 70 border-bottom: 3px solid #999999; 71 } 72 </style> 73 74 </head> 75 <body> 76 77 <h1>Dynamic Equations in MathJax</h1> 78 79 <blockquote> 80 <p> 81 Expand the following: 82 \begin{align} 83 (x+1)^2 84 &\cssId{Step1}{= (x+1)(x+1)}\\ 85 &\cssId{Step2}{= x(x+1) + 1(x+1)}\\ 86 &\cssId{Step3}{= (x^2+x) + (x+1)}\\ 87 &\cssId{Step4}{= x^2 + (x + x) + 1}\\ 88 &\cssId{Step5}{= x^2+2x+1}\\ 89 \end{align} 90 </p> 91 92 <input type="button" onclick="ShowStep()" value="Show Next Step" id="step" disabled="true" /> 93 <input type="button" onclick="ResetSteps()" value="Reset" id="reset" disabled="true" /> 94 </blockquote> 95 96 </body> 97 </html>