Math integration into some content types!

Submitted by Moritz-M on Mon, 04/23/2018 - 00:03
Forums: 
Developers

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: 
Binary Data H5PKaTeX.h5p
otacke's picture

otacke

Tue, 05/15/2018 - 15:44

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

Loaay

Thu, 06/28/2018 - 19:31

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

otacke's picture

otacke

Fri, 06/29/2018 - 09:16

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).

moez

Tue, 09/25/2018 - 00:59

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?

thanks in advance!

best,

Moez

otacke's picture

otacke

Tue, 09/25/2018 - 09:13

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

SparTacuS's picture

SparTacuS

Mon, 10/29/2018 - 17:01

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

otacke's picture

otacke

Tue, 10/30/2018 - 00:51

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.

https://twitter.com/H5PTechnology/status/1056908175646117888

Best,

Oliver

moez

Tue, 04/23/2019 - 23:50

Hi again @otacke

any news on this feature?

BV52's picture

BV52

Wed, 04/24/2019 - 05:27

Hi moez,

LaTeX is now supported and you can read more about this here.

-BV52

otacke's picture

otacke

Wed, 04/24/2019 - 08:13

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

moez

Wed, 04/24/2019 - 09:22

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

@otacke subscription done ;-) 

MetM

Mon, 05/24/2021 - 22:26

Hi again,

attached you find my reworked Addon:

  • Same name, as the official Addon to be compatible, but lower Patchversion, so you can not install it over the official one. This is for testing only.
  • I just made it work the same way as the official one, the rest is unchanged code from 2018. It works in the content types I need it for (see original Post) and without a change in the great "Sort the Paragraphs!" https://www.olivertacke.de/labs/2020/11/01/a-sort-of-sorts/ which I find really great.
  • The goal by using very specialized Mutation Oberservers was to minimize rendering (only render once), so it may not work with all content types and my need to be adapted to the ones I did not test it with.
  • I encourage you to try out the "Drag and Drop" and compare the rendering speed of MathJax and Katex when you check "Infinite number of element instances" and have a math formula in the dragable text. Or turning "Dialog Cards" with math formula on the back.
H5P file: 
Binary Data H5P.MathDisplay-1.0.h5p