H5P Guides

Mathematical expressions in H5Ps

The release on November 2, 2018, added the possibility to use mathematical expressions in H5P through LaTeX notation.

Setup

To enable this feature a new H5P library needs to be installed. Download it here, and upload it through the library admin page on your H5P enabled site.

Usage

Mathematical expressions can be added to all text fields in the H5P authoring tool. There are three different ways you can use to let H5P know this is LaTeX:

  • \( some LaTeX \) for inline LaTeX, commonly used as part of sentences within a text
  • \[ some LaTeX \] or optionally $$ some LaTeX $$ for block LaTeX, commonly used as standalone formula that will be centered

Customizing

The MathDisplay library can be configured setting the environment variable H5P_MATHDISPLAY_CONFIG of your host system.


Renderer

Currently, the MathDisplay library supports MathJax for rendering math. Support for other libraries such as KaTeX could be added in the future.

The MathDisplay library expects to find a renderer property within H5P_MATHDISPLAY_CONFIG which itself holds an object named after the library that's used. In the case of MathJax, this object uses the same structure that you may be accustomed to by the MathJax in-line configuration options.


Observers

There are different "observers" that will tell the renderer that the page might need an update. It is not necessary to use all observers at the same time, but it is possible.

  • mutationObserver: Will constantly listen to DOM changes and trigger an update if a change occurs.
    Parameters: cooldown: Number of milliseconds that updates will be triggered after an update
  • domChangedListener: Will trigger an update if it detects an H5P Event with the handle domChanged by a content type.
  • interval: Will repreatedly trigger an update after a defined interval.
    Parameters: time: Number of milliseconds between each update.

 

Example: Drupal 7

You can alter the default configuration of the MathDisplay library by adding something like this to the settings.php file within your /sites/YOUR_SITE folder, typically it's /sites/default.

$conf['h5p_library_config'] = array(
  "H5P.MathDisplay" => array(
    "observers" => array(
      array("name" => "mutationObserver", "params" => array("cooldown" => 500)),
      array("name" => "domChangedListener"),
      array("name" => "interval", "params" => array("time" => 1000))
    ),
    "renderer" => array(
      "mathjax" => array(
        "src" => "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
        "config" => array(
          "extensions" => array("tex2jax.js"),
          "jax" => array("input/TeX", "output/HTML-CSS"),
          "tex2jax" => array(
            // Important, otherwise MathJax will be rendered inside CKEditor
            "ignoreClass" => "ckeditor"
          ),
          "messageStyle" => "none"
        )
      )
    )
  )
);

 

Example: Drupal 8

You can alter the default configuration of the MathDisplay library by adding something like this to the settings.php file within your /sites/YOUR_SITE folder, typically it's /sites/default.

$config['h5p.settings']['h5p_library_config'] = array(
  'H5P.MathDisplay' => array(
    "observers" => array(
      array("name" => "mutationObserver", "params" => array("cooldown" => 500)),
      array("name" => "domChangedListener"),
      array("name" => "interval", "params" => array("time" => 1000))
    ),
    "renderer" => array(
      "mathjax" => array(
        "src" => "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
        "config" => array(
          "extensions" => array("tex2jax.js"),
          "jax" => array("input/TeX", "output/HTML-CSS"),
          "tex2jax" => array(
            // Important, otherwise MathJax will be rendered inside CKEditor
            "ignoreClass" => "ckeditor"
          ),
          "messageStyle" => "none"
        )
      )
    )
  )
);


Example: WordPress

You can alter the default configuration of the MathDisplay library by adding something like this to the wp-config.php file.

define('H5P_LIBRARY_CONFIG', array(
  "H5P.MathDisplay" => array(
    "observers" => array(
      array("name" => "mutationObserver", "params" => array("cooldown" => 500)),
      array("name" => "domChangedListener"),
      array("name" => "interval", "params" => array("time" => 1000))
    ),
    "renderer" => array(
      "mathjax" => array(
        "src" => "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
        "config" => array(
          "extensions" => array("tex2jax.js"),
          "jax" => array("input/TeX", "output/HTML-CSS"),
          "tex2jax" => array(
            // Important, otherwise MathJax will be rendered inside CKEditor
            "ignoreClass" => "ckeditor"
          ),
          "messageStyle" => "none"
        )
      )
    )
  )
));


Example: moodle

You can alter the default configuration of the MathDisplay library by adding something like this to the config.php file.

$CFG->mod_hvp_library_config = array(
  "H5P.MathDisplay" => array(
    "observers" => array(
      array("name" => "mutationObserver", "params" => array("cooldown" => 500)),
      array("name" => "domChangedListener"),
      array("name" => "interval", "params" => array("time" => 1000))
    ),
    "renderer" => array(
      "mathjax" => array(
        "src" => "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js",
        "config" => array(
          "extensions" => array("tex2jax.js"),
          "jax" => array("input/TeX", "output/HTML-CSS"),
          "tex2jax" => array(
            // Important, otherwise MathJax will be rendered inside CKEditor
            "ignoreClass" => "ckeditor"
          ),
          "messageStyle" => "none"
        )
      )
    )
  )
);