sample-dynamic-steps.html 2.4 KB

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