Reveal.js Presentation With MathJax

Reveal.js Presentation with MathJax

An interactive presentation tool combining Reveal.js for slide navigation and MathJax for rendering LaTeX mathematical equations. This project demonstrates how to create engaging, step-by-step math presentations with fragment animations and proper equation formatting.

Overview

The Reveal.js Presentation with MathJax is a web-based slide deck that integrates Reveal.js’s powerful presentation framework with MathJax’s LaTeX equation rendering. It’s designed for teaching mathematics, allowing instructors to reveal solution steps progressively using fragment animations while displaying beautifully formatted equations.

Key Features

  • LaTeX Math Rendering: Use MathJax to render complex mathematical notation with $...$ for inline and $$...$$ for display math.
  • Fragment Animations: Reveal solution steps, answers, and explanations one piece at a time using Reveal.js fragments.
  • Keyboard Navigation: Use arrow keys to advance slides and reveal fragments progressively.
  • Interactive Equations: Right-click equations to access MathJax’s contextual menu for zoom, copy, and accessibility options.
  • Custom Styling: Apply CSS classes to differentiate problem text, solutions, and answers.

Example Code Snippets

Slide with Progressive Math Reveals:

<section>
  <h3>Rational Function Analysis</h3>
  <p>Try right-clicking on the equations.</p>
  
  <p class="m1830-problem-text">
    $f\left( x \right) = \;\frac{{2{x^2}\;\; - \;\;32}}{{{x^2}\; + \;5x\; + \;4}}$
  </p>

  <p class="fragment m1830-solution">
    $f\left( x \right) = \;\frac{{2\left( {x + 4} \right)\left( {x - 4} \right)}}{{\left( {x + 4} \right)\left( {x + 1} \right)}}$
  </p>
  <p class="fragment m1830-answer">Vertical Asymptote: x=-1</p>
  <p class="fragment m1830-answer">Hole: x=-4</p>
  <p class="fragment m1830-answer">Horizontal Asymptote: y=2</p>
</section>

Configuring MathJax Integration:

var script = document.createElement("script");
script.type = "text/x-mathjax-config";
script.text = 
  "MathJax.Hub.Config({" +
  "  extensions: ['tex2jax.js']," +
  "  jax: ['input/TeX', 'output/HTML-CSS']," +
  "  tex2jax: { inlineMath: [['$','$']], displayMath: [['$$','$$']], processEscapes: true }," +
  "  'HTML-CSS': { availableFonts: ['TeX'] }" +
  "});";
document.head.appendChild(script);

script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML";
document.head.appendChild(script);

Fragment Animation Classes:

<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p>

Technical Highlights

  • Reveal.js provides a responsive, keyboard-driven slide framework with support for fragments and transitions.
  • MathJax renders LaTeX equations as high-quality, scalable HTML-CSS output with right-click accessibility features.
  • Fragment animations allow instructors to control the pacing of content reveals, perfect for step-by-step problem solving.
  • Custom CSS classes enable semantic styling for problem statements, solutions, and answers.

This tool is ideal for math educators who want to create interactive, visually appealing presentations that go beyond static slides, allowing students to follow along as solutions unfold.

Portfolio reveal.jsmathjaxpresentationjavascriptmathlatexeducationslides