Moodle Customization
Customizing H5P content can be a useful tool for tailoring the H5Ps to fit your site.
Theme overriding/hooks
The H5P Moodle plugin has the same abilities to alter H5Ps as the other platform integrations.The way to do this is through extending a theme in Moodle. The theme would then need to override the renderer of the H5P plugin.
A complete example of overriding the renderer can be found in the H5PMods example theme.
The H5P renderer is defined in renderer.php. All functions in the renderer can be overriden by a theme. You can read more about overriding a plugin renderer in the Moodle documentation.
To add a script to an H5P you would typically:
- Add to or extend the theme you are currently using in Moodle
- Extend the H5P renderer so you are able to override its functions
- Implement the h5p_alter_scripts function so that it adds your script to the existing scripts
- Activate the theme through the Moodle interface
- Visit an existing H5P to make sure your script is run
For a complete example of a theme that uses all the available overriding functionality of Moodle you can see the H5PMods example theme.
Comments
obeid
Tue, 02/20/2018 - 12:34
Permalink
Add Mathjax to moodle H5P (Quick solution)
file: moodle/mod/hvp/library/js/h5p.js
Line 380
<code> var createScriptTags = function (scripts) {
var tags = '';
scripts.push("https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTM...");
for (var i = 0; i < scripts.length; i++) {
tags += '<script src="' + scripts[i] + '"></script>';
}
return tags;
};</code>
After adding this line it's possible to use Mathjax equation in your textareas.
Like:\(\sqrt{x}\) or $\sqrt{x}$
thomasmars
Wed, 02/21/2018 - 15:11
Permalink
Nice, thanks for sharing.
Nice, thanks for sharing.
obeid
Wed, 02/21/2018 - 15:58
Permalink
new Mathjax URL
Better to use the new URL of Mathjax: "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=T..."
BV52
Thu, 02/22/2018 - 04:55
Permalink
Thank you for the additional
Thank you for the additional information obeid.
-BV52
max30272
Tue, 06/12/2018 - 11:21
Permalink
Not working :(
I add the extend code (renderers.php) to the exist theme.
And edit the css and js direction to the right place.
But Nothing change.Did I miss anything?
obeid
Thu, 06/14/2018 - 09:26
Permalink
You have to extend the JS
You have to extend the JS File in "library/js/h5p.js" Not "renders.php".
File h5p.js between line 381 and 382 put this Line:
thomasmars
Fri, 06/22/2018 - 14:39
Permalink
As a general rule of thumb,
As a general rule of thumb, you should never change any of the code inside the actual plugin, if there are changes that needs to be put in the H5P plugin they should be applied through pull requests. Otherwise they will be overwritten when a new version of the plugin is released.
Changes should be applied by extending the renderer like the h5pmod example demonstrates: https://github.com/h5p/h5pmods-moodle-plugin
obeid
Mon, 06/25/2018 - 14:34
Permalink
Not final Solution
Hi Thomas,
that was a quick solution, I have to continue another project. After this I will provide a clean one.
thomasmars
Fri, 06/22/2018 - 14:40
Permalink
Please provide detailed steps
Please provide detailed steps of what you've changed and whether the files are loading or not. The more information you provide the easier it is for us to help you properly and efficiently.
max30272
Mon, 06/25/2018 - 09:54
Permalink
Here's what i did
I add the "renderers.php", "/js/h5p_custom.js", "/js/h5p_customEditor.js" and "/style/h5p_custom.css" to the exist theme. ( I just add "h5p_" to the example code name)
Then modify the "renderers.php" to the right direction.
And try to let the "config.php" as same as the example.
But nothing change to the h5p interactiveVideo. :(
thomasmars
Mon, 06/25/2018 - 14:25
Permalink
You must choose this theme as
You must choose this theme as your new theme in appearance menu of Moodle ( https://docs.moodle.org/35/en/Installing_a_new_theme ). When you do this make sure that the code is run by checking if the file loads in your browser's console ( https://developers.google.com/web/tools/chrome-devtools/manage-data/page-resources ) when you open InteractiveVideo editor or view.
max30272
Tue, 06/26/2018 - 06:02
Permalink
It works
It works, but it will lose the parent theme's css and js display effect.
Otherwise, thanks for help. :)
Anh Pati
Sat, 05/18/2019 - 13:24
Permalink
Extension of theme in Moodle
Hello,
Before making any changes to my training site, I wanted to do some local tests.
So I installed Moodle, installed the H5P plug-in and installed a random theme: "TREMA".
Then I downloaded your GitHub repository: "h5pmods-moodle-plugin". I have placed the folder in my "theme" directory. I renamed the folder "h5pmod" to match its calls in the files "config.php", "version.php" and "lang/en/theme_h5pmod.php". I also modified the call to the parent in the "config.php" file so that it extends my TREMA theme.
The "h5pmod" theme was displayed in my installed plugins. I updated the database.
But despite all this, CSS changes made in the "styles/custom.css" file located in the "h5pmod" theme are not taken into account when displaying.
If you could help me see things more clearly. Feel free to ask for any additional information that may help you.
Thank you, Romain.
thomasmars
Mon, 05/20/2019 - 15:51
Permalink
Hi Roman,In the h5pmods
Hi Roman,
In the h5pmods-moodle-plugin example theme the styles are only applied if the library you are using is Interactive Video, as can be seen in the renderers.php code L#24-25 (https://github.com/h5p/h5pmods-moodle-plugin/blob/master/renderers.php#L24-L25).
To always display the custom.css changes for any H5P, you have to remove the if so that it always adds the style to the $styles[] array.
Hope that helps, let us know if you have any further problems after trying this.
- Thomas
Anh Pati
Mon, 05/27/2019 - 17:14
Permalink
Second test
Hello Thomas,
Already a big thank you for your answer which brought me some light and thanks to which I was able to display the CSS changes locally.
However, when I try to extend my theme (Remui) on my site, not only do I lose the styles I defined for Remui in "theme/remui/styles/custom.css", but also as before I no longer see any style changes in my H5P activities.
I don't know if this is related, but when I installed the theme (H5P extending Remui), an error message informed me that the required dependencies were not available. So I modified the "versions.php" file of H5P to fill in the Moodle version in "$plugin->requires" while I left the Remui version in "$plugin->dependencies".
In the end, I thought I understood well with your previous answer, but by going further I still feel far from being able to customize the plugin.
Do not hesitate to ask me for any additional information that may help you to see things more clearly. Thank you in advance, Romain.
Anh Pati
Tue, 07/02/2019 - 16:41
Permalink
Hello,Do you have any new
Hello,
Do you have any new leads to follow? I'm going in circles in my attempts.
Besides on the dev platform, I have a new problem, I may have removed all my modifications but nothing has been done. The h5p activities already created are not displayed and when I go to the moodle h5p editor, I miss fields and options.
Here is a screenshot of the console.
Thank you, Romain.
thomasmars
Fri, 07/26/2019 - 13:11
Permalink
Hi, looks like your library
Hi, looks like your library is not installed properly. Please reinstall the library by downloading and then re-uploading Multiple Choice from examples & downloads: https://h5p.org/multichoice
If it still fails please check your php error log for any errors.