# Math integration into some content types!

Forums:

Hello,
i'd like to share with you my little project. I integrated math formula support into some (the ones I wanted most) content types, by writing a dependency that loads KaTeX (because MathJax was too slow in a test I ran more than a year ago - haven't tried again - when elements are dynamically created, e.g. drag questions with infinite dragabbles, dialog card turn) and watches for changes in the DOM to render math formulas. Here is a overview of some key facts:

• You have to enclose LaTeX formulas in $$, e.g.$$x^2$$for an inline formula (different form KaTeX default, that does a non inline with that command, enabling  was no option, like it is in LaTeX). • Formulas are only rendered in some Editors (e.g. Drag n Drop) and not in the Text input fields - which is not what y'd like, I know, but works for me, since the user doesn't see that, only the creator and I can read LaTeX. • Technically it is enough to add the dependency, but since that would be overwritten by updates to the original content types I cloned the conent types and prefixed them with (KaTeX) so I can use it on our server without interfering with anything else. Supported Content Types: InteractiveVideo, QuestionSet, SingleChoiceSet, TrueFalse, Blanks, MarkTheWords, MuliChoice, DragText, Drag&Drop, DialogCards • There is one exemption from the point above: I had to rewrite self.clearScorePoint in word.js from MarkTheWords, because it removes all childs and just leaves text - since a renderd formula is a child it got removed too. • The attached file only includes the changed content types, you have to have the original content types installed so that the dependencys of the original content types are present - I didn't change those. • Please test on some testing installation before uploading it to your production server as I did not do much testing (yet) - and let me know about bugs you find. Hope you like it :) Moritz H5P file: ### Hi Moritz!Thanks for your Hi Moritz! Thanks for your contribution! We have a prototype for a math display library (still to iron out the resize glitch and to refactor the code, probably make it ES6, etc.). It's a little less "invasive" than your approach as it doesn't require to hardcode the params fields (which might change) into the content types themselves or to rely on certain class names within the content types. Actually, it requires to only add the library in library.json and to call it once with some parameters. It will first check the params for occurences of LaTeX ($$foo or /[bar/]) and only loads a renderer if something is found (or if it's turned on explicitly by passing no params). It will also support a mutation observer like your approach. Additionally, it can listen for 'domChanged' events that would need to be triggered by content types explicitly, because they know when things change -- might be a more gentle experience for the browser :-)

I already included options for more renderes, but right now I only implemented MathJax via CDN. You're welcome to have a look at it and maybe play around with it to include KaTex as well. Shouldn't be too hard, I guess: Loading it if requested in the options (either via the CDN or from a local instance) and running it instead of MathJax (or other renderers that might come up) on the container/field when the update function is called.

Best,
Oliver

### Using Prototype

Hi Oliver, I've been trying to use the prototype library and haven't been able to get it to render. What do you mean when you say "call it once with some parameters" ? So far, I've uploaded the library to a test WP H5P, I've also included the H5P.MathDisplay files into some of the content and edited the h5p.Json file to include the math display, but haven't been able to get it to work. Do i also have to edit content.json to have it render? Any information would be much appreciated.

Thanks ,

LM

### If you're using the (outdated

If you're using the (outdated) master branch version, you need to add it as a dependency to a content type and then call the Constructor function from there with at leasst the content type itself as a parameter and the other settings of your choosing.

If you're using the core branch version, all you need to do is add MathDisplay 1.0 as a dependency and math support should fire up if LaTeX is found in one of the editor fields, but with default values for now only. The configuration part still needs to be done here (LaTex selectors if you don't use the default and renderer setup (MathJax for now, KaTeX later).

### Still not clear how to implement it

Hi @otacke

I'm using h5p under a Drupal8 website and i'm wondering how to implement your library. All libraries are uploaded into /sites/default/files folder automatically after installing a new h5p content type...

1. you said "it requires to only add the library in library.json" : maybe it's something clear but still don't get it how?
2. "to call it once with some parameters" : where this call should take place?

best,

Moez

Hi Moez!

This thread is outdated. We changed the implementation since we had finished the prototype. The MathDisplay library will now require to update the core of H5P as well as the plugin that you're using. They should be released officially soon.

Best,
Oliver

### Any news?

Hi Oliver,

Any news on the release for this?

Is it availible to test?

There is a huge need for maths input for all STEM subjects.

SparTacuS

### Hi SparTacuS!It has been user

Hi SparTacuS!

It has been user-tested today, and I've not yet seen the report. If the feedback is good, then the release day is very close.

Best,

Oliver

### any news here ?

Hi again @otacke

any news on this feature?

Hi moez,

-BV52

### Hi moez!You should activate

Hi moez!

You should activate the newsletter setting in your account here on h5p.org ;-) LaTeX support has been out for, hmm, half a year now?! There's some documentation at https://h5p.org/mathematical-expressions

Cheers,

Oliver

### Thanks guys

thanks guys for the infos, works perfectly, good job for this additional feature to H5P!

@otacke subscription done ;-)