Support for fragments or equivalents with latex equations in revealjs presentations

[rundel]

Currently there does not seem to be any way to introduce progressive elements / lines of a latex equation block. This is quite an important feature for teaching that is available via \pause and related tools in beamer.

It is possible in a hacky way to avoid this by splitting things into multiple latex equations but this then precludes the use of aligned equations which is a significant cost to pay.

This may be a fundamental limitation imposed by mathjax / katex but seems worth at least looking into.

[jlgraves-ubc]

Does /toggle work for what you want?

https://mathjax.github.io/MathJax-demos-web/toggle-steps.html.html

https://www.math.union.edu/~dpvc/talks/2013-01-11.jmm/tex-toggle.html

I don't think Quarto's MathJax currently supports this, but it might be an easy way to integrate this.

[rundel]

I was not familiar with these options and hadn't come across them in my googling - the reveal steps variant seems closest to the desired behavior but the implementation looks a bit clunky and javascript based, but possibly automateable.

The toggle option seems to involve having a ton of repeated latex code which seems less than ideal for most use cases (but is more flexible).

[thht]

After lots of fiddling and great help from @mcanouil, I found a very easy solution: Just add the fragment css class to part of the equation like this:

$$
\begin{align}
  (x+1)^2
    &= \class{fragment}{(x+1)(x+1)}            \\[3px]
    &\class{fragment}{{} = x(x+1) + 1(x+1)}    \\[3px]
    &\class{fragment}{{} = (x^2+x) + (x+1)}    \\[3px]
    &\class{fragment}{{} = x^2 + (x + x) + 1}  \\[3px]
    &\class{fragment}{{} = x^2 + 2x + 1}
\end{align}
$$

And you need to put this in _quarto.yml to disable the assistive mode because otherwise the fragment classes get duplicated:

format:
  revealjs:
    include-before: [ '<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {enableAssistiveMml: false}});</script>']

[fbob]

Do you think the solution proposed by @mcanouil and @thht could be proposed as a pull request for quarto ?
It's a very handy solution and this math fragment feature is great when doing classes.

[mcanouil]

The issue is that it depends on the Math framework used.
MathJax is the default, but Quarto allows to change to few others.
Thus, it can't really be implemented as a part of Quarto CLI, instead use the tricks showed here.

[fbob]

I understand the issue, thanks for the precision.

[RoyiAvital]

This is great!

2 questions:

1. Why there is a need for {} before = in &\class{fragment}{{} = (x^2+x) + (x+1)} \\[3px]?
2. Why is the & outside the class?

I am asking as I usually use something like:

\begin{align}
  (x+1)^2
  &= \class{fragment}{(x+1)(x+1) && \text{some explanations}}            \\[3px]
  &\class{fragment}{{} = x(x+1) + 1(x+1) && \text{more explanations} }    \\[3px]
  &\class{fragment}{{} = (x^2+x) + (x+1)}    \\[3px]
  &\class{fragment}{{} = x^2 + (x + x) + 1}  \\[3px]
  &\class{fragment}{{} = x^2 + 2x + 1}
\end{align}

Yet it fails for me.

[ninaRjoyce]

The solution below works, but it seems to interfere some underlying process (I am new to Quarto and reveal.js, so please forgive the technical term) because, once all of the fragments are displayed, in order to advance to the next slide I have to click as many times as there are class{fragment} statements. For instance, in the example below I would click five times to move through the fragments and then I would have to click five more times to advance to the next slide.

The other issue is that if I have any :::{fragment} divisions on my slide, these get rendered first, then the ones using \class{fragment}, and I can't control this with fragment-index.

After lots of fiddling and great help from @mcanouil, I found a very easy solution: Just add the fragment css class to part of the equation like this:

$$
\begin{align}
  (x+1)^2
    &= \class{fragment}{(x+1)(x+1)}            \\[3px]
    &\class{fragment}{{} = x(x+1) + 1(x+1)}    \\[3px]
    &\class{fragment}{{} = (x^2+x) + (x+1)}    \\[3px]
    &\class{fragment}{{} = x^2 + (x + x) + 1}  \\[3px]
    &\class{fragment}{{} = x^2 + 2x + 1}
\end{align}
$$

And you need to put this in _quarto.yml to disable the assistive mode because otherwise the fragment classes get duplicated:

format:
  revealjs:
    include-before: [ '<script type="text/x-mathjax-config">MathJax.Hub.Config({tex2jax: {enableAssistiveMml: false}});</script>']