Mathematical expressions in H5Ps
On H5P.com LaTeX is enabled for all customers. Documentation for H5P.com authors.
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 a 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 repeatedly 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" ) ) ) ) );
Comments
rgol5334
Tue, 11/13/2018 - 06:59
Permalink
For Canvas?
Hi,
We've just purchased a license to H5P.com to run in our Canvas LMS environment - how can I get this November release to operate in our installation? LaTeX support would be very desired at my institution.
BV52
Tue, 11/13/2018 - 07:33
Permalink
Hi rgol5334,We usually
Hi rgol5334,
We usually release updates on H5P.com 1-2 weeks after the initial release. Although we run a series of test, this is to ensure that everything will work smoothly.
-BV52
kmichaelson21
Mon, 02/18/2019 - 21:05
Permalink
scroll bar issues?
Hi there,
I am using latex for a course presentation on fractions (H5P.com account). I noticed that sometimes this produces little scrollbars on the text box that I can't seem to get rid of. I've tried all kinds of things to get rid of them with no luck. I'm wondering if there is a max amount of times you can use it per slide?
Thanks,
Kris
BV52
Tue, 02/19/2019 - 07:32
Permalink
Hi Kris,I created a separate
Hi Kris,
I created a separate post for this.
-BV52
apienk
Fri, 08/09/2019 - 13:29
Permalink
Division problem
Hi,
There's a small but annoying problem with Latex in H5P. When a German division sign (:) is entered into a Latex formula as a part of answer – e.g., \(12 : 4 = 3\) – it is interpreted as a hint separator, causing the formula to be truncated and "4 = 3" becoming the hint. I have to use \(12 \,\colon 4 = 3\) to get correct rendering.
pjotr.savitski
Thu, 08/22/2019 - 15:35
Permalink
Packages for released versions
It would probably make sense to have a better way to store the built .h5p packages than just as attachments of this page. This page will not be automatically updated to reflect the changes made to the codebase and it would be beneficial to store the prebuilt packages next to released versions. One solution would be to attach the package to eahc tagged version (though that would probbaly require additional effort). Current tagged version seems to be 1.0.5 not the 1.0.4 that is available here.
apienk
Thu, 08/22/2019 - 23:48
Permalink
Where can I download version
Where can I download version 1.0.5?
fnoks
Tue, 08/27/2019 - 14:00
Permalink
1.0.5 uploaded
Hi,
Thanks for letting us know 1.0.5 was not present on this page. This is fixed now.
niroland
Sat, 12/07/2019 - 21:41
Permalink
Unable to install "h5p-math-display-1.0.5.5.h5p"
Hello,
I would like to be able to use Latex in my H5P activities on Moodle.
I modified the config.php file. Then I wanted to install "h5p-math-display-1.0.5.5.h5p" in the library. This does not work (see screenshot : https://www.dropbox.com/s/9et6mo7zkdbw4rw/Capture%20d%E2%80%99%C3%A9cran...)
Do you know what I can do?
Thank you very much.
Nicolas.
BV52
Mon, 12/09/2019 - 18:15
Permalink
Hi Nicolas,You need to upload
Hi Nicolas,
You need to upload the file as a library not as a content.
-BV
dee_v
Fri, 01/17/2020 - 06:22
Permalink
hi, sorry for cross posting
hi, sorry for cross posting.
have uploded the maths display 1.0.5 in the library. still not able to write fraction properly
if if write \(frac{1}{4}\)
it is publishing the same thing
\(frac{1}{4}\)
using it in coulmn/text...
I am on wordpress/learnpress/h5p
suggest what I am doing wrong.
dee_v
Fri, 01/17/2020 - 12:19
Permalink
fraction expression issues
foollow up of the previous mail
interestingly what works for displaying fractions - \(\frac{1}{2}\)
in h5p it shows properly
once you embed into a learnpress/wordpress page it again breaks down
please see the screen shots of both situations. (not seeing the upload buttons..)
looking forward to some insight on where I am making mistakes..
mcdestem
Sat, 05/02/2020 - 20:45
Permalink
Hi!!!I recently got
Hi!!!
I recently got acquainted with the features of h5p and it is very cool! I use Moodle 3.7.1+ (Build: 20190801) and H5P 1.20.2, MathDisplay (1.0.5) is installed. But there is a problem: I need to use mathematical symbols in my work. Always used mathJax. I can't do anything to display mathematical symbols. There are JS errors in the Chrome console. What am I doing wrong? I have already studied all the options...(including those in the documentation). Does not work... It is also noted that installing on a second-level domain does not cause problems.
Save me!
willier
Thu, 03/11/2021 - 15:07
Permalink
hello i need a help for mathematical expressions
I am new to H5P But I need to use math symbols on course presentation. I cannot display math symbols. I have already studied all the options including those in the documentation. But no result.
BV52
Thu, 03/11/2021 - 19:34
Permalink
Hi willier,2 suggestions:It's
Hi willier,
2 suggestions:
-BV
apienk
Thu, 08/19/2021 - 16:58
Permalink
MathJax slow
Hi, is there a way to make MathJax faster in H5P? Now, when a H5P activity is loaded, users can see source Latex for up to one second, before MathJax finally kicks in and renders the HTML.
apienk
Thu, 08/19/2021 - 17:02
Permalink
MathJax slow
Hi, is there a way to make MathJax faster in H5P? Now, users can see Latex source for up to a second before MathJax finally kicks in and renders HTML.