H5p content, How to use mathjax.js for equation?

Submitted by yucheng on Thu, 10/30/2014 - 05:37

Forums:

General discussion

I want to create some interactive math courseware, but I find mathjax.js does not work in h5p content.

How to use equation in h5p content?

Attachments:

pic01.jpg

Dominic Baker

Fri, 11/06/2015 - 10:10

Permalink

Did you mean 'comment out the

Did you mean 'comment out the h5pmathjax_h5p_scripts_alter function'? The result is no errors. Only the standard 8 buttons appear in the h5p editor, and any Tex string is not recognised as special

Dominic Baker

Fri, 11/06/2015 - 11:16

Permalink

I have had a look at the devloper tools to see what scripts are loaded inside the iframe that has the h5peditor. Attached is a screenshot. you will see that it appears the cdn file is not loaded inside here? Would that be an issue?

Attachments:

Capture2.jpeg

falcon

Fri, 11/06/2015 - 11:25

Permalink

The mathjax script is only

The mathjax script is only needed when you view the content, so that shouldn't be a problem.

icc

Fri, 11/06/2015 - 11:28

Permalink

Hm, I'm not sure. I think the

Hm, I'm not sure. I think the CKEditor plugin should load the plugin itself when the config option is set, but I don't have a lot of experience with it.

Dominic Baker

Sun, 11/08/2015 - 16:07

Permalink

Hi icc, I don't feel like

Hi icc, I don't feel like quite giving up on this yet as I am sure it might be useful. I have done some code tracking working on some text that has LaTex tags ( i.e. surrounded by $$....$$).

When they are NOT in an h5p element they get processed by the mathjax_filter_process() and are surrounded by a div with given a class = tex2jax.From there they are identified and can be processed by the js.

When they are in an h5p element the filter does not get invoked as the h5p_content has a type of hidden whisch is caught in field.default.inc field_default_view() around line 204.

<code> if ($display['type'] !== 'hidden') {

// Calling the formatter function through module_invoke() can have a

// performance impact on pages with many fields and values.</code>

This type of hidden appears to be set whether the h5pmathjax module is enabled or not.

Is this at all relevant? Is there a way to override this test? Is there anything in the way of traces/logs I can supply to you that might help to track this down? Thanks in advance

icc

Mon, 11/09/2015 - 08:58

Permalink

Hi again! I'm sorry for not

Hi again! I'm sorry for not being able to help you more. I would love to create the module for you, but as my development time is mostly taken up by paying customers, so it will have to wait until I have some spare time. As for now I can only give you some pointers.

The interactive content is stored as JSON and is not filtered by Drupal due to it semantic nature. This means that you'll have to have a module that supports H5P filtering. Interactive content has to be filtered using the format described by the content type. When you implement the semantics alter function you add the math tags to a whitelist of tags that are allowed. After implementing the function and adding to the whitelist, you can, in theory, use MathML in your texts. However, the CKEditor will automatically escape your math tags and make them look like text. This is why you need the Formulas plugin, to be able to enter and generate the MathML code. You can also use other plugins, e.g. a plugin for editing the HTML directly and insert MathML tags that way.

The scripts alter function(which I asked you to comment out) is for adding MathML when viewing H5Ps. This is only for browsers like Chrome that can't render MathML. If you test in Firefox you should be able to see the formulas as soon as you enter them.

Dominic Baker

Mon, 11/09/2015 - 10:20

Permalink

Thanks. I understand

Thanks. I understand completely - you have been very helpful so far. I will go through your suggestions carefully and see what I can come up with. I will let you know of any progress, as it may help in the development of the functionality of this fine product!

Dominic Baker

Wed, 11/11/2015 - 08:31

Permalink

Hi icc, I am continuing to

Hi icc, I am continuing to work on this with some measured success. I have a specific question. I am using the hook_h5p_filtered_params_alter() ut would like to know exactly what library the params refer to at that point. I can probaly infer this from the $filtered object that is passed, but it seems safer to know the real library name. Is this possible using the api or similar?

Effectively I want to be able to say 'if library is <Fill in the blanks> then modify this element of the object'.

Thanks in advance.

Dominic Baker

Fri, 11/06/2015 - 13:46

Permalink

I seem to be out of ideas.

I seem to be out of ideas. Can you help? Please? For what its worth I am happy to start completely from scratch if you think that might help.

Anjelo

Fri, 01/27/2017 - 16:30

Permalink

Hi have you been successful

Hi have you been successful on making mathjax work on opigno? I am having the same problem also and I hope you figured out something on how to make it work. Thanks :)

mhenriquez

Wed, 02/03/2016 - 18:51

Permalink

Any updates/tricks for this?

Guys, we really need to add equations for our project site, any updates or tricks to make equations in h5p? ...thanks

falcon

Thu, 02/04/2016 - 19:21

Permalink

The problem here is that

The problem here is that there are no good open graphical formula editors out there as far as I know. Joubel is delivering this to customers using the wiris plugin and MathJax, but we can't share that since Wiris is proprietary software.

When open alternatives becomes available we will probably be quick at adding them to H5P.

mhenriquez

Thu, 02/04/2016 - 19:45

Permalink

..but as Lex syntax like $formula$ ...

..but as Lex syntax like $formula$ ? ...no need the editor integrated...

falcon

Thu, 02/04/2016 - 19:52

Permalink

Yes, that is probably the

Yes, that is probably the most viable option at the moment, but I think many of our users will be unable to work with LaTex formulas. If someone adds patches for this we will be happy to review it, but this requires some work and it isn't on the top of the core teams todo list at the moment.

mhenriquez

Mon, 02/22/2016 - 18:07

Permalink

..ok let me try..

Hi falcon, can you point me in the right direction?, is important for our project (is a NASA website) to have better text editor and equation support in h5p or we are going to be force to move from it...I could try first to add support for latex syntax that can be display on h5p iframe...

The project allow me to spend some time on this so let me know where to start, debug, or read..

regards,

Mauricio

falcon

Tue, 02/23/2016 - 08:56

Permalink

Hi Mauricio, is wiris +

Hi Mauricio, is wiris + MathJax an option for you? Wiris is not open and free, but if you can use it I can post a Drupal module here that adds wiris and MathJax to the H5P CKEditor.

mhenriquez

Wed, 03/02/2016 - 02:38

Permalink

is it is fine, do it have a

is it is fine, do it have a cost or is just not open but free?..it will be possible to use with h5p right?...let me know what I have to do..

Thanks a lot!

falcon

Thu, 03/03/2016 - 16:36

Permalink

Wiris is not free. You need a

Wiris is not free. You need a license for it :/

Wiris does work with H5P if you add some custom code. It really has nothing to do with H5P but works with the ckeditor that H5P uses for rich text editing.

zuernBernhard

Tue, 01/24/2017 - 10:55

Permalink

Wiris Mathjax

Hi falcon,

we are also interested in using Mathjax, and perhaps Wiris if necessary. Can you post the module here or bette post a link to a github repo ?

with best regards from Germany,

Bernhard

falcon

Tue, 01/24/2017 - 16:06

Permalink

Sure, here it is :)

zuernBernhard

Tue, 01/24/2017 - 16:09

Permalink

Cool ! Thank you very much !

Cool ! Thank you very much ! Are you ( or do you know someone who is ) available for paid extension /modification of h5p ? Can you please contact us at bernhardDOTzuern(at)ueberbitDOTde ?

zuernBernhard

Fri, 02/03/2017 - 09:34

Permalink

You can use formulars without

You can use formulars without a ckeditor button and render the output if you enter them like so : `x^2` (without any extra markup). The only thing to solve now is to get the button and formular editor into the h5p ckeditor.

Anjelo

Sun, 02/05/2017 - 03:11

Permalink

Hi, could you please share how

Hi, could you please share how? and does that include the square roots, fractions, etc?

Thanks!

Julian Strecker

Tue, 02/07/2017 - 10:43

Permalink

One Approach

We are using Drupal7 here so the Solution I implemented goes like this:

In the mymodule.module file I load the MathJax CDN:

function mymodule_h5p_scripts_alter(&$scripts, $libraries, $mode) {
  $path = drupal_get_path('module', 'mymodule');
  $scripts[] = (object) array(
    'path' => 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_CHTML&delayS...',
    'version' => '?ver=1',
  );
}

And thats it.

Anjelo

Wed, 02/08/2017 - 02:55

Permalink

Thanks

Thanks, may I also ask if there are math editors available for an h5p content like Opigno LMS (Drupal based) as I tried some but they did not work, I think WIRIS may work but it is not free I hope there's an alternative. Thank you.

roman

Tue, 04/11/2017 - 19:29

Permalink

I wonder if anyone has been

I wonder if anyone has been successful in getting this to work? I have followed the directions to make a custom Drupal module, got some errors, fixed it all up and no longer get any error messages, but I do not get an extra button in the WYSIWYG editor. Even tried the directions in the tutorial for that and it seems like everything is working as it should.

I was able to repliate the Table Button example from the tutorial but anything that has to link to a JS file for a custom plugin has been a no go. I feel like I am very close but just cant get there yet.

Any help would be appreciated :)

Thanks

falcon

Wed, 04/12/2017 - 09:44

Permalink

I believe this is used in

I believe this is used in production. It provides math, a content browser, styling and more, but it is unfortunately D6.

roman

Wed, 04/12/2017 - 14:54

Permalink

Thanks, I saw this and

Thanks, I saw this and download it to mess around with it but could not get it ported to D7 successfully. Do you know of anyone else working on this maybe? I know you guys are busy with other things at the moment J

fnoks

Tue, 04/18/2017 - 09:19

Permalink

Hi,We will probably port the

Hi,

We will probably port the D6 code for wiris+mathjax to D7 before summer, and release it as a Drupal module. Stay tuned.

roman

Tue, 04/18/2017 - 14:02

Permalink

Thats very awesome news!

Thats very awesome news! Thank you for the heads up.

sanderaido

Wed, 07/05/2017 - 14:59

Permalink

I have been messing with

I have been messing with adding editor buttons and plugins to CKEditor for the last couple of days now (same as Roman, I am stuck at the custom plugin button, managed to add the table functionality from the tutorial but the last hook doesn't seem to execute) and haven't had any success in Drupal 7.

Does anyone have any code for this in a repo somewhere where I can find newer directions or hints? Trying to add math input as well, so even the Wiris plugin could be of help just to see how it was integrated (I know the plugin itself needs a licence).

zuernBernhard

Wed, 04/12/2017 - 09:55

Permalink

We use it in production on D7

We use it in production on D7. Julian will talk about it in Frankfurt next Week: https://2017.drupalcamp-frankfurt.de/node/198

roman

Wed, 04/12/2017 - 14:50

Permalink

This is very awesome, I

This is very awesome, I wonder if there would be a recording of this or if the presentation can be available online? If it was in English it would be great also, but I can always use Google Translate or something ^_^

Please keep me updated.

obeid

Wed, 12/06/2017 - 15:21

Permalink