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

### 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

### Drupal

I am using Drupal.

wiris ?

### Example code for adding your

// If not teaser and has library.
if (!$a3 && isset($node->main_library)) {
// Add generic CSS (will not work on iframed content).
$module_path = drupal_get_path('module', 'my_module'); if (H5PCore::determineEmbedType($node->embed_type, $node->main_library['embedTypes']) === 'div') { // Div drupal_set_html_head(''); } else { // Iframe$content_id = h5p_get_content_id($node);$settings['h5p']['cid-' . $content_id]['scripts'][] = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';$settings['h5p']['cid-' . $content_id]['styles'][] =$module_path . '/css/styles.css';

### HI

1. I delete "!$a3 &&" , I don't know$a3 what is it.

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.

Attachments:

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

### Now, new xAPI include ?

Now, new xAPI include ?

### Not yet, but soon I hope :)

Not yet, but soon I hope :)

### Thanks

Thanks, look forward next release ......

### 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?

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

<?php

/**
* @file
*  h5pmathjax.module php file
*  Drupal module h5pmathjax.
*/

/**
* Implementation of hook_h5p_semantics_alter().
*
* Adds mathml tags to wysiwyg fields.
*/
function h5pmathjax_h5p_semantics_alter(&$semantics) { foreach ($semantics as $field) { // Lists specify the field inside the list. while ($field->type === 'list') {
$field =$field->field;
}

if ($field->type === 'group') { h5pmathjax_h5p_semantics_alter($field->fields);
}
else if ($field->type === 'text' && isset($field->widget) && $field->widget === 'html') { if (!isset($field->tags)) {
$field->tags = array(); } // Add MathML tags$field->tags = array_merge(field->tags, array( 'span', 'math', 'maction', 'maligngroup', 'malignmark', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mlongdiv', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mscarries', 'mscarry', 'msgroup', 'msline', 'mspace', 'msqrt', 'msrow', 'mstack', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'semantics', 'annotation', 'annotation-xml', )); } } } /** * Implements hook_h5p_scripts_alter(). * * Adds MathJax support. */ function h5pmathjax_h5p_scripts_alter(&scripts, &$libraries, &$embed_type) {
$scripts[] = (object) array( 'path' => 'http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML', 'version' => '' );$scripts[] = (object) array(
'path' => drupal_get_path('module', 'h5pmathjax') . '/mathjax.js',
'version' => '?ver=0.0.1'
);
}


And mathjax.js:

(function ($) { if (MathJax === undefined) { return; // Missing MathJax } // Hide annoying processing messages MathJax.Hub.Config({messageStyle: 'none'});$(document).ready(function () {
// Find H5P content
$('.h5p-content').each(function (i, e) { var doJax = function (node) { MathJax.Hub.Queue(['Typeset', MathJax.Hub, node]); }; var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; if (!MutationObserver) { var check = function () {$('math', e).each(function (j, m) {
doJax(m.parentNode);
});
checkInterval = setTimeout(check, 2000);
};
var checkInterval = setTimeout(check, 2000);
}
else {
var running = false;
var limitedResize = function () {
if (!running) {
running = setTimeout(function () {

### 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?

### Yeah, you will have to select

Yeah, you will have to select the correct window. The H5P runs in an iframe so you have to select that window.

Did as you suggested and  add an alert message or console.log after "$('.h5p-content').each(function (i, e) {" . It was not invoked. ### Sounds like the code runs too Sounds like the code runs too early then - not sure how to fix it without digging into the code, hopefully someone else will jump in here. ### 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. ### 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). ### icc: thanks. Done it now... I inserted this code <code>$(document).ready(function () {

// Find H5P content

console.log('Find H5P content');

debugger;

### You can also try to remove

You can also try to remove the MutationObserver part and reducing the code to:

(function ($) { if (MathJax === undefined) { return; // Missing MathJax } // Hide annoying processing messages MathJax.Hub.Config({messageStyle: 'none'});$(document).ready(function () {
// Find H5P content
$('.h5p-content').each(function (i, e) { var doJax = function (node) { MathJax.Hub.Queue(['Typeset', MathJax.Hub, node]); }; var check = function () {$('math', e).each(function (j, m) {
doJax(m.parentNode);
});
checkInterval = setTimeout(check, 2000);
};
var checkInterval = setTimeout(check, 2000);
});
});
})(H5P.jQuery);


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'});

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

### 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? ### 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?

Attachments:

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

function h5pmathjax_form_alter(&$form, &$form_state, $form_id) { if ($form_id == 'h5p_content_node_form') {
$form['#after_build'][] = 'h5pmathjax_node_form_process'; } } function h5pmathjax_node_form_process($form, &$form_state) {$module_path = drupal_get_path('module', 'h5pmathjax');
$cache_buster = '?' . variable_get('css_js_query_string', ''); drupal_add_js(array( 'h5peditor' => array( 'mathjaxPluginPath' => base_path() .$module_path . '/mathjax/',
'assets' => array(
'js' => array(
'/' . $module_path . '/add-mathjax-plugin.js' .$cache_buster
)
)
)
), 'setting');
return form; }  And then create add-mathjax-plugin.js and add: var H5PEditor = H5PEditor || {}; H5PEditor.HtmlAddons = H5PEditor.HtmlAddons || {}; H5PEditor.HtmlAddons.math = H5PEditor.HtmlAddons.math || {}; H5PEditor.HtmlAddons.math.mathjax = function (config, tags) { config.extraPlugins = (config.extraPlugins ? ',' : '') + 'mathjax'; config.toolbar.push({ name: "mathjax", items: ['Mathematical Formulas'] }); tags.push('span'); tags.push('math'); tags.push('maction'); tags.push('maligngroup'); tags.push('malignmark'); tags.push('menclose'); tags.push('merror'); tags.push('mfenced'); tags.push('mfrac'); tags.push('mglyph'); tags.push('mi'); tags.push('mlabeledtr'); tags.push('mlongdiv'); tags.push('mmultiscripts'); tags.push('mn'); tags.push('mo'); tags.push('mover'); tags.push('mpadded'); tags.push('mphantom'); tags.push('mroot'); tags.push('mrow'); tags.push('ms'); tags.push('mscarries'); tags.push('mscarry'); tags.push('msgroup'); tags.push('msline'); tags.push('mspace'); tags.push('msqrt'); tags.push('msrow'); tags.push('mstack'); tags.push('mstyle'); tags.push('msub'); tags.push('msup'); tags.push('msubsup'); tags.push('mtable'); tags.push('mtd'); tags.push('mtext'); tags.push('mtr'); tags.push('munder'); tags.push('munderover'); tags.push('semantics'); tags.push('annotation'); tags.push('annotation-xml'); }; (function () {
$(document).ready(function () { if (window.Drupal === undefined) { window.Drupal = window.top.Drupal; } if (window.CKEDITOR !== undefined) { // Add plugin CKEDITOR.plugins.addExternal('mathjax', Drupal.settings.h5peditor.mathjaxPluginPath); } }); })(H5P.jQuery);  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. ### Thank you very much. I am Thank you very much. I am currently checking and trying this... ### 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 1. I appended the php into h5pmathjax.module 2. I created a new file add-mathjax-plugin.js withe the above js 3. I downloaded the CKEditor mathjax plugin from the link above and put it in \sites\all\modules\h5pmathjax\mathjax Do I need to another plugin called widget? and maybe others? I see the site says 'Dependencies: Requires the following plugins to work: WidgetLine Utilities,DialogClipboard.' 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 WidgetLine 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? ### 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: function h5pmathjax_form_alter(&$form, &$form_state,$form_id) {
if ($form_id == 'h5p_content_node_form') {$form['#after_build'][] = 'h5pmathjax_node_form_process';
}
}

function h5pmathjax_node_form_process($form, &$form_state) {
$module_path = drupal_get_path('module', 'h5pmathjax');$cache_buster = '?' . variable_get('css_js_query_string', '');
'h5peditor' => array(
'mathjaxPluginPath' => base_path() . $module_path . '/', 'assets' => array( 'js' => array( '/' .$module_path . '/add-mathjax-plugin.js' . $cache_buster ) ) ) ), 'setting'); return$form;
}

var H5PEditor = H5PEditor || {};
H5PEditor.HtmlAddons.math.mathjax = function (config, tags) {
config.extraPlugins = (config.extraPlugins ? ',' : '') + 'widget,lineutils,mathjax';
config.toolbar.push({
name: "mathjax",
items: ['Mathematical Formulas']
});
tags.push('span');
tags.push('math');
tags.push('maction');
tags.push('maligngroup');
tags.push('malignmark');
tags.push('menclose');
tags.push('merror');
tags.push('mfenced');
tags.push('mfrac');
tags.push('mglyph');
tags.push('mi');
tags.push('mlabeledtr');
tags.push('mlongdiv');
tags.push('mmultiscripts');
tags.push('mn');
tags.push('mo');
tags.push('mover');
tags.push('mphantom');
tags.push('mroot');
tags.push('mrow');
tags.push('ms');
tags.push('mscarries');
tags.push('mscarry');
tags.push('msgroup');
tags.push('msline');
tags.push('mspace');
tags.push('msqrt');
tags.push('msrow');
tags.push('mstack');
tags.push('mstyle');
tags.push('msub');
tags.push('msup');
tags.push('msubsup');
tags.push('mtable');
tags.push('mtd');
tags.push('mtext');
tags.push('mtr');
tags.push('munder');
tags.push('munderover');
tags.push('semantics');
tags.push('annotation');
tags.push('annotation-xml');
};

(function ($) {$(document).ready(function () {
if (window.Drupal === undefined) {
window.Drupal = window.top.Drupal;
}
if (window.CKEDITOR !== undefined) {
['widget', 'lineutils', 'mathjax'].forEach(function (p) {
CKEDITOR.plugins.addExternal(p, Drupal.settings.h5peditor.mathjaxPluginPath + p + '/');
});
}
});
})(H5P.jQuery);

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.

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

### Different in IE11

Just to say that all the alerts get triggered in IE 11 (the resize gets triggered 3 times)

### 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!

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

config.mathJaxLib = '//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML';


Correction (Ihad some debugging code in). The lines

Its looking for (and not finding):

• /jax/input/Tex/config.js
• /jax/output/HTML-CSS/config.js
• /extensions/tex2jax.js
• /extensions/MathZoom.js

are incorrect. IT is only looking for:

• /extensions/MathZoom.js

Sorry. No other error messages are being produced. So it looks like a case for some more debugging statements!

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

• /jax/input/Tex/config.js
• /jax/output/HTML-CSS/config.js
• /extensions/tex2jax.js
• /extensions/MathZoom.js

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:

1. get LaTex or similar to interpret a string such as  $$....$$ and convert it to MathML
2. get MathJax to process the MathML
3. add a nice user friendly button to the h5peditor (and ckeditor as well) to help with the above
4. provide all the above in a way that the rest of the world can do this rather more easily

I am doing a bit of 'reading the manual(s)' at the moment to ensure I am not doing something stupid too.