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

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: 

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

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: 
falcon's picture

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

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.

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's picture

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.

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!

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.

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.

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

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

 

 

falcon's picture

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.

 

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

falcon's picture

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.

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's picture

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.

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's picture

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's picture

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's picture

Sure, here it is :)

zuernBernhard's picture

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's picture

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. 

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

Thanks!

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.

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's picture

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's picture

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

roman's picture

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's picture

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's picture

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

sanderaido's picture

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's picture

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

roman's picture

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.

Hi

is there any workarroud like this for Moodle?

fnoks's picture

The hooks used for making this possible is available also for Moodle, so it should be possible for a developer to do this for Moodle as well.

Did you know in which file this Change should come, so that the formulas are rendered?

<code><script type="text/javascript"
   src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=T...">
</script></code>

I tried it in the files: h5peditor-editor.js in 'var populateIframe' that dos'nt work.

 

thomasmars's picture

Hi, please follow the guide for customizing Moodle.
Tell us what you have achieved so far and where you are having troubles so  we can help you.

otacke's picture

Hi obeid!

It's unfortunately not as simple as adding the script code to get MathJax running in H5P. But fear not! We're about to release a solution soon.

Cheers,
Oliver

test

dfsadsa

Pages