MathJax Queue

[mikev3]

Hi Again,

I just recently wrote a little javascript program that generates
practice problems and the steps to complete them. The script runs in
the head of the document and fills the content of these divs:

<div id="problem"></div>
<div id="step1"></div>
<div id="step2"></div>
:
:
ect.


Since the content is being loaded by javascript I am using the Queue
to process it but I end up with:

MathJax.Hub.Queue(["Typeset",MathJax.Hub,'problem']);
MathJax.Hub.Queue(["Typeset",MathJax.Hub,'step1']);
MathJax.Hub.Queue(["Typeset",MathJax.Hub,'step2']);
:
:
ect.

I'm assuming there is a more efficient way of doing this. I look at
the docs and searched through this group but I couldn't quite make
sense of translating that information to fixing this particular
problem.

Also, related but less important; Since each step is in it's own div,
so that I can show and hide them seperately, I am using
\phantom{orignal problem} to align everything.

ie.
example = test
\phantom{example} = this aligns with 'test'

Is there a way to actually use the built in \begin{align} command
across divs?


And finally thanks for adding my site, RootMath.org, to the "MathJax
In Use" page! I look forward to continuing to build great wep pages
and programs with MathJax.

[Davide P. Cervone]

What you are doing is fine, but you could ask MathJax to process the whole document rather than each DIV individually (though it doesn't make all that much difference).  Try

MathJax.Hub.Queue(["Typeset,MathJax.Hub]);

which should process any unprocessed math on the page.  Or you could but a div around all the individual divs and ask MathJax to process that.

No, there is no current method to align separate environment on the page.  (The MathML3 specification has such a mechanism, so potentially MathJax could provide access to that through TeX extensions, but MathJax doesn't currently implement that part of MathML3.  That is still in the future.)

Another possibility would be to use HTML tables to do the alignment (rather than TeX), and forcing the initial column to be a specific width in both alignments.

Then you could display the rows of the table one at a time to get them to appear as separate "steps".

Alternatively, you could use the \class or \cssId extensions to mark individual portions of a single alignment so that they are initially visibility:hidden (if you want to use display:none you will need to wait until the equation is typeset before setting that) and then change them via javascript as the steps are displayed.

For example

\begin{align}

  (x+1)^2

    &\cssId{Step1}{= (x+1)(x+1)}\\

    &\cssId{Step2}{= x(x+1) + 1(x+1)}\\

    &\cssId{Step3}{= x^2+x + x + 1}\\

    &\cssId{Step4}{= x^2+2x+1}\\

\end{align}

and have styles such as 

<style>

  #Step1, #Step2, #Step3, #Step4 {visibility: hidden}

</style>

Then when you want to display the next step, say step n, you would use

document.getElementById("Step"+n).style.visibility = "visible";

This will leave enough space on the page for all the steps to show even when they are not currently visible.  If you want only as much space as the current steps are taking up, then you should use

<div id="Steps" style="visibility:hidden">

\begin{align}

  (x+1)^2

    &\cssId{Step1}{= (x+1)(x+1)}\\

    &\cssId{Step2}{= x(x+1) + 1(x+1)}\\

    &\cssId{Step3}{= x^2+x + x + 1}\\

    &\cssId{Step4}{= x^2+2x+1}\\

\end{align}

</div>

and 

<script>

  MathJax.Hub.Queue(function () {

    for (var i = 1; i <= 4; i++) {document.getElementById("Step"+i).style.display = "none"}

    document.getElementById("Steps").style.visibility = "visible";

  });

</script>

which will first typset the math in a div with visibility:hidden (so the math won't show up initially), and then

the steps are set to display:none, then make the div visible.  Then use

document.getElementById("Step"+n).style.display = "";

to show step n.

Hope that helps.

Davide

[mikev3]

Davide,

Thank you so much, that helps so much and seeing an example of how the
Queue works with the function in this case really help. Also your
solutions to my alignment issue are ingenious and more practical than
what I'm using. Thank you so much for taking the time to respond so
thoroughly, your help is sincerely appreciated!

All the Best,
M.