Add the interactive examples

mathjax · May 20, 2019 · db49203 · db49203
1 parent 5ce6117
commit db49203
Show file tree

Hide file tree

Showing 4 changed files with 310 additions and 0 deletions.
diff --git a/reveal-steps.html b/reveal-steps.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>MathJax v3 dynamic equations using CSS and javascript</title>
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+  <script>
+  MathJax = {
+    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
+    chtml: {
+      displayAlign: 'left'
+    },
+    startup: {
+      ready: function () {
+        //
+        //  Do the usual startup (which does a typeset)
+        //
+        MathJax.startup.defaultReady();
+        //
+        //  When that is all done, un-hide the page
+        //
+        MathJax.startup.promise.then(function () {
+          document.getElementById("hidden").disabled = true;
+        });
+      }
+    }
+  };
+  </script>
+  <script src="mathjax3/tex-chtml.js" id="MathJax-script" async></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>
diff --git a/reveal-steps.md b/reveal-steps.md
@@ -0,0 +1,87 @@
+# [reveal-steps.html](https://mathjax.github.io/mj3-demos/reveal-steps.html)
+
+This example shows how to use the Javascript and CSS ids to display an equation that reveals the steps in a computation one step at a time.  The expression uses the `\cssId` macro to mark the parts of the expression to be revealed, and sets the CSS for those ids to be hidden initially.  A javascript function tied to a button sets the styles for the individual elements to reveal them one at a time.
+
+The expression is given in TeX as
+
+```
+\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}
+```
+
+The key lines of code are
+
+```
+  <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>
+```
+
+This example also shows how to prevent the page from being displayed until after MathJax has completed its processing.  That means that there will be no flashing of the unprocessed math before the typeset math is displayed.  This is accomplished with the configuration
+
+```
+  <script>
+  MathJax = {
+    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
+    chtml: {
+      displayAlign: 'left'
+    },
+    startup: {
+      ready: function () {
+        //
+        //  Do the usual startup (which does a typeset)
+        //
+        MathJax.startup.defaultReady();
+        //
+        //  When that is all done, un-hide the page
+        //
+        MathJax.startup.promise.then(function () {
+          document.getElementById("hidden").disabled = true;
+        });
+      }
+    }
+  };
+  </script>
+```
+
+which waits for MathJax to finish its initial typesetting, and then disables the stylesheet that is hiding the page body.
+
+[Run the example](https://mathjax.github.io/mj3-demos/reveal-steps.html)
diff --git a/toggle-steps.html b/toggle-steps.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>MathJax v3 dynamic equations using toggle</title>
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+  <script>
+  MathJax = {
+    tex: {inlineMath: [['$', '$'], ['\\(', '\\)']]},
+    chtml: {
+      displayAlign: 'left'
+    },
+    startup: {
+      ready: function () {
+        //
+        //  Do the usual startup (which does a typeset)
+        //
+        MathJax.startup.defaultReady();
+        //
+        //  When that is all done, un-hide the page
+        //
+        MathJax.startup.promise.then(function () {
+          document.getElementById("hidden").disabled = true;
+        });
+      }
+    }
+  };
+  </script>
+  <script src="mathjax3/tex-chtml.js" id="MathJax-script" async></script>
+
+  <style>
+    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:
+$$
+\require{action}
+\def\longest{x(x+1) + 1(x+1)}
+\def\click{\rlap{\enclose{roundedbox}{\small\text{next step}}}\hphantom{\longest}}
+\def\={\phantom{{}={}}}
+(x+1)^2
+\toggle
+  {\begin{aligned}[t]& = \click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]&\=\click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\&\=\click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]&\=\click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]& = x^2 + (x + x) + 1\\[3px]&\=\click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]& = x^2 + (x + x) + 1\\[3px]& = x^2 + 2x + 1\end{aligned}}
+\endtoggle
+$$
+</p>
+</frame>
+
+</body>
+</html>
diff --git a/toggle-steps.md b/toggle-steps.md
@@ -0,0 +1,27 @@
+# [toggle-steps.html](https://mathjax.github.io/mj3-demos/toggle-steps.html)
+
+This example shows how to use the `\toggle` macro (which produce MathML `<maction>` elements) to display an equation that reveals the steps in a computation one step at a time.  This is similar to the [reveal-steps.html](reveal-steps.html) example, but this one does not require any javascript.
+
+The expression is given in TeX as
+
+```
+$$
+\require{action}
+\def\longest{x(x+1) + 1(x+1)}
+\def\click{\rlap{\enclose{roundedbox}{\small\text{next step}}}\hphantom{\longest}}
+\def\={\phantom{{}={}}}
+(x+1)^2
+\toggle
+  {\begin{aligned}[t]& = \click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]&\=\click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\&\=\click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]&\=\click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]& = x^2 + (x + x) + 1\\[3px]&\=\click\end{aligned}}
+  {\begin{aligned}[t]& = (x+1)(x+1)\\[3px]& = x(x+1) + 1(x+1)\\[3px]& = (x^2+x) + (x+1)\\[3px]& = x^2 + (x + x) + 1\\[3px]& = x^2 + 2x + 1\end{aligned}}
+\endtoggle
+$$
+```
+
+which is a sequence of expressions that each has one more line of the expansion than the previous version, enclosed in a `\toggle` so that clicking on the math will cycle through the expressions one after the other.  It also defines a `\click` macro to introduce the button for moving to the next step (though the user can actually click anywhere on the expression to do that).  Some effort is made to ensure that the expressions all have the same width (using `\rlap` and `\hphantom`), so that the previously displayed expressions don't move around as new lines are revealed.
+
+[Run the example](https://mathjax.github.io/mj3-demos/toggle-steps.html)