H5p content, How to use mathjax.js for equation?
Submitted by yucheng on Thu, 10/30/2014 - 05:37
Forums:
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?
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?
Navigation
Connect with H5P
About
H5P is a registered trademark of H5P Group
Privacy policy |
Copyright ©
2024
falcon
Fri, 10/31/2014 - 07:39
Permalink
Probably because the content is rendered in an iframe
If you're adding mathjax to your page the normal way it won't work since many of the H5P content types are displayed in an iframe. The iframe is used to avoid css conflicts.
To fix this you need to add the mathjax script inside the iframe. Are you using Wordpress or Drupal?
We use Mathjax on a customer site with wiris as editor
yucheng
Fri, 10/31/2014 - 16:21
Permalink
Drupal
I am using Drupal.
wiris ?
falcon
Sat, 11/01/2014 - 10:22
Permalink
Example code for adding your
Example code for adding your own scripts: (hook_node_view)
Wiris web site:
http://www.wiris.com/
yucheng
Sat, 11/01/2014 - 19:51
Permalink
Thank you
Thank you! I will try.....
yucheng
Mon, 11/03/2014 - 07:26
Permalink
Hi
I am not good at code.
$a3 what is meaning?
In drupal7 drupal_set_html_head change to drupal_add_js ?
yucheng
Mon, 11/03/2014 - 10:12
Permalink
HI
1. I delete "!$a3 &&" , I don't know $a3 what is it.
2. "drupal_set_html_head" instead of "drupal_add_html_head".
I test 3 content types, on "Course Presentation" page 1 and 2 that is ok, but page 3,4,5.... that does not work.
"Summary" and "Multichoice question" not work.
falcon
Wed, 11/05/2014 - 14:31
Permalink
The code was copied from a
The code was copied from a drupal 6 module. Sorry about that.
Multichoice and summary uses div so it mush be something wrong with the div section of the code. Can you see the math jax code getting loaded in your browser console?
The coursepresentation preloads the first two pages. I guess that's why it works on the two first pages and not on the rest of them. You'll need to make mathjax run again everytime the user visits a new page:
http://stackoverflow.com/questions/5200545/how-to-recall-or-restart-mathjax
We'll be adding xAPI in our next release. Then you'll be able to listen in to the stream of xAPI events and trigger mathJax whenever the users goes to a new page.
yucheng
Wed, 01/21/2015 - 08:23
Permalink
Now, new xAPI include ?
Now, new xAPI include ?
falcon
Thu, 01/22/2015 - 10:32
Permalink
Not yet, but soon I hope :)
yucheng
Thu, 11/06/2014 - 06:28
Permalink
Thanks
Thanks, look forward next release ......
kristina
Wed, 05/20/2015 - 13:39
Permalink
Mathjax
Hi, this thread is a bit old but I am also trying to use mathjax within h5p. Are there any plans of integrating mathjax into h5p so you can simply type e.g. $v=u+at$ in a text box and it shows up formatted? Or should I try to follow the instructions above to call mathjax?
falcon
Wed, 05/20/2015 - 13:50
Permalink
We're planning to add a
We're planning to add a mathjax library in the future, but we're not there quite yet. The comment above is a bit outdated.
Try this in a module:
And mathjax.js:
kristina
Wed, 05/20/2015 - 14:01
Permalink
Thanks for the quick reply.
Thanks for the quick reply. Where do I paste the code? I am using Wordpress, not Drupal if that matters.
falcon
Wed, 05/20/2015 - 14:04
Permalink
Oh, sorry, I don't know why I
icc
Wed, 05/20/2015 - 16:29
Permalink
It should be possible to do
It should be possible to do in WordPress as well, but it might be difficult for a novice user.
You need two components to get this working. You'll have to have a CKEditor plugin where you can enter the symbols, and then you need mathjax to display them.
You should be able to use the code falcon posted, but first you have to create a simple plugin to use it in, or do it in a custom theme that you have. I would recommend creating a simple plugin. Secondly you'll have to add the function as a trigger, i.e.
add_action('h5p_alter_library_semantics', 'h5pmathjax_h5p_semantics_alter');
in your plugin.
There might be some issues and debugging, so if you're not into coding I think I'd wait until someone created a plugin that does this. Or if you have the money, pay someone to create it.
kristina
Wed, 05/20/2015 - 17:05
Permalink
Thank you. That does sound a
Thank you. That does sound a bit too advanced for now so I'll work around it by saving the equations as pictures until someone else makes a plugin...
I'm on a low budget I'm afraid, making my website as a non-profit. It's amazing that H5P is free even though it's a fantastic plugin :) I'm so glad I finally found a plugin to make great-looking courses without any coding so I can focus on the content.
Anjelo
Fri, 01/27/2017 - 17:57
Permalink
Hi, I have made a plugin
Hi, I have made a custom plugin and I am wondering if you could help me on the next steps on how to make mathjax work through it? Thanks
icc
Mon, 01/30/2017 - 08:17
Permalink
Great!If you share the code I
Great!
If you share the code I'm sure someone is willing to have a look.
Anjelo
Thu, 02/02/2017 - 15:06
Permalink
Here are the 2 custom plugins
Here is the custom plugin but I do not know what's the next step.The plugin allows custom javascript to be injected inside a WYSIWYG iframe. I hope someone can continue and may find the plugin helpful.
icc
Fri, 02/03/2017 - 09:21
Permalink
Thanks!
Thanks!
falcon
Wed, 05/20/2015 - 17:09
Permalink
:)
farrisimin
Thu, 05/21/2015 - 12:44
Permalink
hi falcon,I would love to use
hi falcon,
I would love to use this module do I just create it under sites/modules or in sites/modules/h5p/modules
falcon
Thu, 05/21/2015 - 14:06
Permalink
Great, yes, you create it
Dominic Baker
Wed, 11/04/2015 - 19:26
Permalink
Cannot get the js to be included
I have tried to install this mathjax support for h5p, but with no success.
I have created a module by placing a folder in \sites\all\modules\h5pmathjax\h5pmathjax.module as listed in the code section above. I added h5pmathjax.info and mathjax.js (as listed in the code section above) to this folder.
I enabled the module, successfully I believe as I added a function h5pmathjax_help which is being recognised). When I try to use a mathjax string it remains as a string. By looking in developer tools in CHrome, I can see that the mathjax.js file for the mathjax module has been loaded, but this one does not appear. What am I missing?
Experience level: php/js reasonable; Drupal/Opigno very new. Thanks for your consideration.
falcon
Wed, 11/04/2015 - 19:40
Permalink
Have you tried to debug the
Dominic Baker
Wed, 11/04/2015 - 20:24
Permalink
Thanks. I put a 3 alerts in
Thanks. I put a 3 alerts in the new mathjax.js to see if it was being loaded and run. One at line 2, one at line 10, one at line 28 (i.e. in the linitedREsize function. The first two were triggered. The third was not. I got a couple of console messages looking for files in \extensions folder MathZoom.js, MathMenu.js (but not finding them - as they are not there!)
falcon
Wed, 11/04/2015 - 20:27
Permalink
Might be that the code above
Dominic Baker
Wed, 11/04/2015 - 20:33
Permalink
I will do that and respond. I
I will do that and respond. I would try and debug this in developer tools but cannot see the source (which made me think it was not being loaded - proved incorrect by sticking in the messages). I can see the source of the mathjax.js that is in the non hp5 folder but not the one that I copied from this page. Do you know where I would find that?
falcon
Wed, 11/04/2015 - 20:50
Permalink
Yeah, you will have to select
Dominic Baker
Wed, 11/04/2015 - 20:35
Permalink
Did as you suggested and add
Did as you suggested and add an alert message or console.log after "$('.h5p-content').each(function (i, e) {" .
It was not invoked.
falcon
Wed, 11/04/2015 - 20:49
Permalink
Sounds like the code runs too
Dominic Baker
Thu, 11/05/2015 - 10:03
Permalink
Hi Falcon,I'm happy to have a
Hi Falcon,
I'm happy to have a look round and see what is going on and make suggestions. The only problem is that I am not sure what the mathjax.js is trying to do. If it is just the case that, because the hp5 is running in an iframe and so cannot see the mathjax.js on the mnain site, why do we just not load the identical files inside the iframe, rather than writing a new script? If you can point me somewhere that I could find out what it is trying to do I can spend sometime: looks like it would be useful.
icc
Thu, 11/05/2015 - 10:25
Permalink
First we need to figure out
First we need to figure out if our script tries to trigger MathJax. Put a console.log('Running MathJax', node); inside the doJax function and watch for output.
You can also try to step through the code by inserting debugger; on a separate line, that should add a break point for the Developer Tools in the browser(Ctrl+Shift+J in Chrome).
Dominic Baker
Thu, 11/05/2015 - 10:49
Permalink
icc: thanks. Done it now...
I inserted this code
<code>
$(document).ready(function () {
// Find H5P content
console.log('Find H5P content');
debugger;
$('.h5p-content').each(function (i, e) {
console.log('Found one',i,e);
debugger;
var doJax = function (node) {
console.log('Running MathJax', node);
debugger;
MathJax.Hub.Queue(['Typeset', MathJax.Hub, node]);
};
</code>
The first 2 were triggered, the one inside the MathJax was not. (can't seem to get code to be formatted)
icc
Thu, 11/05/2015 - 11:28
Permalink
Good! Are you sure you have
Good! Are you sure you have any math tags in the H5P? Try adding console.log('Math tags: ' + $('math').length); after the console.log('Found one',i,e); to make sure they are present.
icc
Thu, 11/05/2015 - 11:35
Permalink
You can also try to remove
You can also try to remove the MutationObserver part and reducing the code to:
You can also try to uncomment or remove the "hide annoying processing messages" line and see if that gives your any error messages: // MathJax.Hub.Config({messageStyle: 'none'});
Dominic Baker
Thu, 11/05/2015 - 11:56
Permalink
Thanks.No maths tabs were
Thanks.
No maths tabs were found. (zero length)
Removed the annoying message bit, but no messages presented.
One of the things I noticed in setting this up was applying the filters to the text formats. Both h5p and MathJax would like to be the last in the list... Could I confirm these should be enabled and the order. Checking these I currently have (for both HTML and plainText: h5pcontent not enabled; MathJax enabled and placed last.)?
I will go ahead and try the MutationObserver suggestion...
icc
Thu, 11/05/2015 - 13:13
Permalink
Without the math tags you won
Without the math tags you won't get any math symbols.
You must make sure that you've implemented the "function h5pmathjax_h5p_semantics_alter(&$semantics) {" from the example code. If the MathML tags aren't added to the allowed tags in H5P they will be stripped away. The allowed tags is a whitelist that improves security by removing unwanted code.
Which CKEditor plugin did you use to add the math symbols?
Dominic Baker
Thu, 11/05/2015 - 13:26
Permalink
Thanks. It does look like
Thanks. It does look like function h5pmathjax_h5p_semantics_alter(&$semantics) {" has run. Can I check it worked and that the tags have been added?
I used the h5p editing screen in Opigno (as per capture.jpeg screenshot attached). Is there something I should have set up here to use a particular plugin?
I really appreciate your help.
icc
Thu, 11/05/2015 - 14:12
Permalink
Hm ok, you'll need a plugin
Hm ok, you'll need a plugin like WIRIS or Mathematical Formulas to CKEditor in order to enter the formula. Plugins like these will create the MathML code that MathJax needs to create the formula.
Here's an example of how to add the latter plugin:
Add these to your h5pmathjax.module:
And then create add-mathjax-plugin.js and add:
You will, of course, have to download the CKEditor mathjax plugin and put the directory in your module's directory so that the mathjaxPluginPath exists, if not it won't be able to load the plugin. When everything is loaded correctly you should see a button in the WYSIWYG toolbar for inserting math formulas.
Dominic Baker
Thu, 11/05/2015 - 15:00
Permalink
Thank you very much. I am
Thank you very much. I am currently checking and trying this...
Dominic Baker
Thu, 11/05/2015 - 15:35
Permalink
Tried - failed - message back
Thanks again, but I get the message 'Uncaught [CKEDITOR.resourceManager.load] Resource name "widget" was not found at "/profiles/opigno_lms/modules/contrib/h5p/modules/h5peditor/h5peditor//ckeditor/plugins/widget/plugin.js?t=F7J9".'
It looks like I have not installed the plugin correctly? Is it relevant that there is a double slash between h5peditor and ckeditor?
To recap
Do I need to another plugin called widget? and maybe others? I see the site says 'Dependencies: Requires the following plugins to work: Widget, Line Utilities,Dialog, Clipboard.'
In the folder \profiles\opigno_lms\libraries\ckeditor\plugins I have subfolders dialog and clipboard but none of the other two.
In the folder H:\WWW\htdocs\OpignoTest1\profiles\opigno_lms\modules\contrib\h5p\modules\h5peditor\h5peditor\ckeditor\plugins I have subfolders dialog and clipboard but none of the other two.
Do I install Widget, Line Utilities, in both of these locations. Are these foloders copies of ech other? Or should I be doing all of this through the UI somehow?
icc
Thu, 11/05/2015 - 16:02
Permalink
Oh, my bad! Yes, you do need
Oh, my bad! Yes, you do need the plugin dependencies as well. You should download them, put them in the module's folder with mathjax and add them the same way.
The \profiles\opigno_lms\libraries\ckeditor\plugins are the CKEditor used outside of H5P. The one inside the h5peditor folder is the one used by H5P, but you shouldn't change them as they will be replaced when you update Opigno or the modules.
Here's the updated code:
I haven't tested it so I'm not sure if the order is correct, you can try to re-order them if you get the same message.
Dominic Baker
Thu, 11/05/2015 - 17:25
Permalink
Thanks. Sorry for the delay.
Thanks. Sorry for the delay. still not quite there. Will post details as reply to main topic as I am running out of screen space with the replies indenting.
Dominic Baker
Wed, 11/04/2015 - 20:46
Permalink
Different in IE11
Just to say that all the alerts get triggered in IE 11 (the resize gets triggered 3 times)
Dominic Baker
Thu, 11/05/2015 - 17:29
Permalink
I am getting an error in the
I am getting an error in the /sites/all/modules/h5pmathjax/mathjax/plugin.js around line 18
<code>
init: function( editor ) {
var cls = editor.config.mathJaxClass || 'math-tex';
if ( !editor.config.mathJaxLib ) {
CKEDITOR.error( 'mathjax-no-config' );
}
</code>
The delay was me researching to see if I could work it out - no luck!
icc
Fri, 11/06/2015 - 08:46
Permalink
It appears that the plugin
It appears that the plugin requires the MathJax lib to work. You can set the path to it by adding a config line next to the other config lines in the JavaScript we created:
Dominic Baker
Fri, 11/06/2015 - 09:31
Permalink
Correction (Ihad some
Correction (Ihad some debugging code in). The lines
Its looking for (and not finding):
are incorrect. IT is only looking for:
Sorry. No other error messages are being produced. So it looks like a case for some more debugging statements!
Dominic Baker
Fri, 11/06/2015 - 09:21
Permalink
Hi icc, thanks for your
Hi icc, thanks for your advice. I tried exactly that (well at least I am learning!) last night to no avail.
Its looking for (and not finding):
These are all being called from the http://cdn.mathjax.org/mathjax/latest/MathJax.js that has been injected into our \sites\all\modules\h5pmathjax\mathjax.js
It seems that there are a few things we are trying to achieve:
I am doing a bit of 'reading the manual(s)' at the moment to ensure I am not doing something stupid too.
Your help is greatly appreciated.
icc
Fri, 11/06/2015 - 09:57
Permalink
Hm, let's try to focus on the
Hm, let's try to focus on the editor first. We need to get the formulas in before we worry about the view.
Try to uncomment the h5pmathjax_h5p_scripts_alter function and see if anything changes. There might be some trouble since the plugin is trying to load MathJax as well.
Pages