Dynamic Equations in MathJax

Sandor Szabo

unread,

Jan 17, 2016, 5:11:49 PM1/17/16

to MathJax Users

If there is 1 equation, the solution (step by step showing the formulas) can be found in the source page of Dynamic Equations in MathJax.

Now I have 2 equations in a (html) page and want to make them dynamic (independently of each other, certainly). I tried to have Step1, Step2 for one and Step3, Step4 for other, but this doesn't work. I'm a beginner in the javascript area so, please give details.

Thanks.

Davide P. Cervone

unread,

Jan 19, 2016, 9:20:36 AM1/19/16

to mathja...@googlegroups.com

I have modified the dynamic equation example to allow arbitrarily many equations to be handled. To do this, each equation gets its own name that is used for the IDs of the various steps. Then the step and reset buttons are tied to that name so they reveal the correct steps. I also added a service routine to create the buttons for you, so you don't have to worry about that part. Finally, there is a new \Steps macro that makes it easier to tag the various steps.

Here is the example:

<!DOCTYPE html>
<html>
<head>
<title>MathJax Dynamic Steps for Multiple Equations</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript">
DynamicEquation = {
n: {}, // the current step number for each of the equations.

//
// Create the buttons for an equation, and initialize the
// counter for it.
//
Buttons: function (name) {
this.n[name] = 1;
document.write(
['<input type="button" onclick="DynamicEquation.ShowStep(',"'",name,"'",')" ',
'value="Show Next Step" id="step',name,'" disabled="true" /> '].join(""),
['<input type="button" onclick="DynamicEquation.ResetSteps(',"'",name,"'",')" ',
'value="Reset" id="reset',name,'" disabled="true" />'].join("")
);
},

//
// 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.
//
ShowStep: function (name) {
document.getElementById("Step"+this.n[name]+name).style.visibility = "visible";
this.n[name]++;
if (!document.getElementById("Step"+this.n[name]+name))
document.getElementById("step"+name).disabled = true;
document.getElementById("reset"+name).disabled = false;
},

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

//
// Reveal step buttons when MathJax's initial typesetting
// is complete.
//
EnableSteps: function () {
for (var name in this.n) {if (this.n.hasOwnProperty(name)) {
document.getElementById("step"+name).disabled = false;
}}
}
};
</script>
<script type="text/x-mathjax-config">
//
// Make displayed equations be aligned left and indented.
// Add the \Step macro and turn off noErrors so we can tell
// what has gone wrong (if anything).
//
MathJax.Hub.Config({
displayAlign: "left",
displayIndent: "2em",
TeX: {
Macros: {
Step: ["\\cssId{Step#1}{\\style{visibility:hidden}{{}#2}}",2]
},
noErrors: {disabled: true}
}
});
//
// Enable the step buttons after the initial typesetting.
//
MathJax.Hub.Queue(["EnableSteps",DynamicEquation]);
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML-full"></script>

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

</head>
<body>

<h1>Dynamic Equations in MathJax</h1>

<table border="0" cellspacing="0" style="margin-left:2em">
<tr>
<td>
<p>
Expand the following:
\begin{align}
(x+1)^2
&\Step{1A}{= (x+1)(x+1)}\\
&\Step{2A}{= x(x+1) + 1(x+1)}\\
&\Step{3A}{= (x^2+x) + (x+1)}\\
&\Step{4A}{= x^2 + (x + x) + 1}\\
&\Step{5A}{= x^2+2x+1}\\
\end{align}
</p>

<script>DynamicEquation.Buttons("A")</script>
</td>
<td width="50"><td>
<td>
<p>
Expand the following:
\begin{align}
(x+1)^2
&\Step{1B}{= (x+1)(x+1)}\\
&\Step{2B}{= x(x+1) + 1(x+1)}\\
&\Step{3B}{= (x^2+x) + (x+1)}\\
&\Step{4B}{= x^2 + (x + x) + 1}\\
&\Step{5B}{= x^2+2x+1}\\
\end{align}
</p>

<script>DynamicEquation.Buttons("B")</script>
</td>
</tr>
</table>

</body>
</html>

I've included comments in the code, so I hope that makes it clear what is going on.

Davide

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

bmes...@gmail.com

unread,

Jan 20, 2016, 2:36:21 PM1/20/16

to MathJax Users, dp...@union.edu

Many thanks for your code.
(I understand almost everything.)

However, a minor problem arose.

I tried to implement the code in xml and an error message appeared.

Error parsing XML, line 17, column 67: Element type "input" must be followed by either attribute specifications, ">" or "/>".

['<input type="button" onclick="DynamicEquation.ShowStep(',"'",name,"'",')" ',

'value="Show Next Step" id="step',name,'" disabled="true" />'].join(""),

['<input type="button" onclick="DynamicEquation.ResetSteps(',"'",name,"'",')" ',

'value="Reset" id="reset',name,'" disabled="true" />'].join("")

I don't know xml, but my guess is that in the code should modify /> somehow. I tried many possibilities without success. I know the <input> attribute in html, but this didn't help.

Sandor

Reply all

Reply to author

Forward