Mathematical equations in h5p (via mathjax)

[fleisck]

Hi,

Is there a way to support rendering of mathematical expressions in the h5p-standalone system. For the traditional system such as via moodle and drupal it requires changes in their server configuration (https://h5p.org/mathematical-expressions). For the offline editor lumi it is enough to copy the content of: https://h5p.org/sites/default/files/h5p-math-display-1.0.7.h5p into my own h5p file.

For the standalone I wasn't able to figure out how to get this working, but did not really know where to start other than extracting h5p-math-display-1.0.7.h5p into the project folder. I assume it requires some changes to h5p-standalone to activate the mathjax parsing?

Thanks already in advance for all the work on h5p-standalone

Karsten

[justineuro]

The h5p.json file in the project folder has to be edited to indicate the addition of the H5P.MathDisplay-1.0 folder in the project folder. Maybe something similar to the following edit should be carried out towards the end of the h5p.json:

... ,{"machineName":"H5P.MathDisplay","majorVersion":"1","minorVersion":"0"}]}

[justineuro]

An alternative to adding the H5P.MathDisplay-1.0 folder that worked for me, is adding a customJs line for the MathJax.js in the const options = { ... }, when initializing the H5P. A simple index.html file would be similar to:

<div id='h5p-container'></div>
<script type="text/javascript" src="dist/main.bundle.js"></script>
<script type="text/javascript">
const el = document.getElementById('h5p-container');
const options = {
    h5pJsonPath:  '/path/to/unzipped/h5p-folder',
    frameJs: 'dist/frame.bundle.js',
    frameCss: 'dist/styles/h5p.css',
    customJs: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-AMS-MML_HTMLorMML',
}
new H5PStandalone.H5P(el, options);
</script>

[IECharo]

Thank you @justineuro, your help has been great for me!