LATEX - Math Equations and Formulas - Wordpress-Plugin

Hey team,

we were in need of displaying mathematical latex equations within h5p. When using certain question types such as "question set" the output is rendered as an iframe and therefore not a native part of the wordpress ecosystem where basic latex plugins for wordpress would work. With the help of the forum I simply loaded the mathjax library via their CDN and all latex functions were are displayed properly - even in answers. 

So far so good.

Anyways, though this works like charm - it does so only within the regular answer rendering. When "response texts" for right or wrong answers are loaded no formuals are rendered there. Same when hitting "retry".

This is the code I am using in a custom WP plugin:

function h5pmods_alter_scripts(&$scripts, $libraries, $embed_type) {
  $scripts[] = (object) array(
    'path' => 'htt (REMOVE THIS TEXT - IT JUST PREVENTS AUTO LINKING IN THIS FORUM) ps://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_CHTML',
    'version' => '', //dont set a version to avoid conflicts
  );  
}
add_action('h5p_alter_library_scripts', 'h5pmods_alter_scripts', 10, 3);

 Can anyone elaborate on this? Why does the overall display work while it does not witchin the "response texts"?

P.S.: There is a problem with the display of code in this forum. Any "http:..." links are auto embedded into  "<a href="..." which breaks the code. I had to add the brackets-text until this bug is fixed here. Sorry for the inconvenience.

Attachments: 
Summary: 
latex works - sort of

See the attached wordpress plugin for latex support. Please help with the latex display within the "response texts"  :)

 

Attachments: 

Mathjax needs to fire up again and reprocess the newly to the DOM added content. Works now.

Hi, phaqlancs,

First, thank you very much for making your h5p-latex plugin for Wordpress available.  I think it's a real gift to the community.

I'm having a similar issue to the one you described on 10/24/2017, which it sounds like you solved on 10/27/2017.  Would you be willing to post an updated version of your plugin, or explain the change(s) you made?

Thank you!

Hey bbirkett, 

yes I can share it with you but unfortunately this could not be solved simply by using an external plugin. The areas that are created after user input appear AFTER the mathjax library has initially fired. So actually we need to enhance the JS of the used library with a few lines of code. 

In my case I use the multiple choice library that controls the output of any multiple choice elements. Just follow these steps (Wordpress):

- Download this whole folder /wp-content/uploads/h5p/libraries/H5P.MultiChoice-1.10
- Locally open up this file: H5P.MultiChoice-1.10\js\multichoice.js
- Basically you have to add the following lines several times to fire up the formula rendering again whenever new elements appear. Just because sometimes the necessary space is grwos after formular rendering you should also fire up the resize function again. Therefore we have two lines of code to be added accordingly: 

MathJax.Hub.Queue(["Typeset",MathJax.Hub,""]); //fire up formula rendering
self.trigger('resize'); //resize the element

- Add these two lines for the "try again reloading" procedure which reloads the whole question. To do so find this function and add the MathJax and resize calls before the closing bracket of the function: 

self.addButton('try-again', params.UI.tryAgainButton, function () { ... }

- Also add the lines for the "insert Feedback" procedure. To do so find this function and add the MathJax and resize calls before the closing bracket of the function: 

var insertFeedback = function ($e, feedback) { ... }

- Finally also add the lines for the "General Tip" procedure. To do so find this function and add the MathJax and resize calls before the closing bracket of the function: 

 $multichoiceTip.click(function () { ... }

 

Nice. But we are still not here yet.

- Zip your local folder where you have made the changes to a "H5P.MultiChoice-1.10.zip" so that you have your library folder named untouched inside like "H5P.MultiChoice-1.10"

- Open up your wp-config.php file and add this line somewhere in the end. This enables us to overwrite libraries with uploads of the same version:

define('H5P_DEV', true);

- Then navigate to your Wordpress admin "H5P Content - libraries": /wp-admin/admin.php?page=h5p_libraries

- Select your zip file in the "Upload Libraries" section and make sure you have "Disable file extension check" checked! Upload it  

- Make sure that u have my plugin enabled that loads the mathjax library.

Thats it (lol). Sorry that it is so complicated. I dont like the H5P library handling and stuff and in my opinon this should be much easier. I am not a big fan of JS anyways. And I fear that the core team is not interested in implementing this although is was frequently asked for. Please share any solution you might find. 

-phalancs

 

Hi again, phalancs,

Thank you very much for the detailed and clear instructions; really helpful.  I will try this soon, and will let you know about any additional insights I gain.

Many thanks!

otacke's picture

Hi bbirket!

If you follow the advice given by phalancs, please be aware that your changes will be overwritten whenever the respective library gets an update. You would have to change the code again or to resign from updates.

Also, please feel warned that you should not set the environment variable H5P_DEV to true in a production environment, but only in a dedicated development environment.

Best,

Oliver

Thank you, Oliver, for highlighting both points.  I understand.

I'm hoping we can (with others) work to get this all sorted, and then work with everyone to formally integrate in this functionality.

For now, thanks again for the helpful info — much appreciated!

otacke's picture

Hi phaqlancs!

 

Sorry that you're having trouble with the way H5P handles libraries. What would you suggest to be improved?

 

And if I may ask: What gave you the impression that we are not interested in implementing LaTeX support into H5P? 

 

H5P has become quite popular, it is versatile, and it is used in many different contexts by many different people. That's great! But it also means that there are lots of different wishes and requests. This makes it hard at times for the core team to decide what to tackle next. In order to improve that situation, a voting mechanism is planned.

 

However, this mechanism will inevitably have its own flaws and it still doesn't guarantee that all suggestions will be acted on by the core team. Resources are still limited, and some bills have to be paid as well. That's where the open nature of H5P comes in very handy. It's open source, and obviously you have been digging into that topic a little bit. You could propose a solution and create a pull request for it. Why not give it a shot?

 

I hope this cleared up the subject a little bit and helped you to understand why progress might seem slow?

 

Best,

Oliver

Hey Oliver, thanks for stopping by. I just had that impression cause my threads and replies regarding mathjax in this forum gained no attraction although many users have asked for solutions. I felt like the focus of development was on different things. Maybe I was just disappointed cause this thread was going unnoticed for quite some time. :)

But now that you are on board I feel much better already  :D

P.S.: What is the issue with the DEV variable? :O Did I miss something? I thought it was just for disabling the version checks on manual ibrary uploads.

otacke's picture

Hei!

You're correct. The core team's focus of development was on other things as I just explained. But that doesn't mean we're not interested in what people want. You can see what we're working on, by following the updates in the JIRA ticket system. Who knows, maybe you'll find a surprise. 

Enabling H5P_DEV will ignore the version check when trying to upload files to the library folder. This means, if you or others by accident or nescience upload old versions to this folder, you could bring the libraries in a state in which your content may not work anymore. Of course, this can probably be fixed, but you surely would not want this to happen in a production environment leaving users with a broken system.

Hi, I'm interested in two tools for education - (LaTeX and Woolfram Alpha). 

I saw this thread and decided to put my comment down to receive a possible notification for when you get down to updating H5P with the LatTeX feature. 

Thank you for H5P. This is a great tool!

BV52's picture

Hi bitdag,

Good news LaTeX is already integrated with H5P. Head over to this page for more details.

-BV52

otacke's picture

Hi bitdag!

What kind of integration of Wolfram|Alpha do you have in mind? It is a very powerful tool and I like it very much, but I am not sure what their API allows to be done with it by other software.

Best,

Oliver