master

分支 (2)

标签 (12)

管理

管理

master

3.1.3-speech

3.2.0

3.1.4

3.1.2

3.1.0

3.0.5

3.1.1

3.0.1

3.0.0

3.0.0-beta.4

3.0.0-beta.3

3.0.0-beta.2

3.0.0-beta.1

clone.MathJax-demos-web
/
reveal-steps.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width">
  <title>MathJax v3 dynamic equations using CSS and javascript</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script>
  MathJax = {
    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
    chtml: {
      displayAlign: 'left'
    },
    startup: {
      pageReady: function () {
        //
        //  Do the usual startup (which does a typeset).
        //  When that is all done, un-hide the page.
        //
        return MathJax.startup.defaultPageReady().then(function () {
          document.getElementById("hidden").disabled = true;
        });
      }
    }
  };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

  <script type="text/javascript">
  //
  //  Use a closure to hide the local variable
  //
  (function () {
    var n = 1;

    //
    //  Make the current step be visible, and increment the step.
    //  If it is the last step, disable the step button.
    //  Once a step is taken, the reset button is made available.
    //
    window.ShowStep = function () {
      document.getElementById("Step" + n++).style.visibility = "visible";
      if (!document.getElementById("Step" + n)) {
        document.getElementById("step").disabled = true;
      }
      document.getElementById("reset").disabled = false;
    }

    //
    //  Enable the step button and disable the reset button.
    //  Hide the steps.
    //
    window.ResetSteps = function () {
      document.getElementById("step").disabled = false;
      document.getElementById("reset").disabled = true;
      var i = 1, step; n = 1;
      while (step = document.getElementById("Step" + i)) {
        step.style.visibility = "hidden";
        i++
      }
    }
  })();
  </script>

  <style>
    /*
     *  Start with the steps being hidden
     */
    #Step1, #Step2, #Step3, #Step4, #Step5 {
      visibility: hidden;
    }

    h1 {
      background: #CCCCCC;
      padding: .2em 1em;
      border-top: 3px solid #666666;
      border-bottom: 3px solid #999999;
    }

    #frame {
      margin-left: 2em;
    }

  </style>

  <style id="hidden">
    body {
      visibility: hidden;
    }
  </style>

</head>
<body>
<h1>Dynamic Equations in MathJax</h1>

<div id="frame">
<p>
Expand the following:
\begin{align}
  (x+1)^2
    &= \cssId{Step1}{(x+1)(x+1)}            \\[3px]
    &\cssId{Step2}{{} = x(x+1) + 1(x+1)}    \\[3px]
    &\cssId{Step3}{{} = (x^2+x) + (x+1)}    \\[3px]
    &\cssId{Step4}{{} = x^2 + (x + x) + 1}  \\[3px]
    &\cssId{Step5}{{} = x^2 + 2x + 1}
\end{align}
</p>

<p>
<input type="button" onclick="ShowStep()" value="Show Next Step" id="step" />
<input type="button" onclick="ResetSteps()" value="Reset" id="reset" disabled="true" />
</p>

</div>

</body>
</html>