H5P Guides

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

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

Nice, thanks for sharing.

njpengyong

Sun, 04/05/2020 - 13:42

not work for the third slide in course presentation

I create four slides in course presentation, each slide has the same mathjax content ,

Add the line does work for the first two slide in course presentation , but from the third on , it doesn't work any more!

Wed, 02/21/2018 - 15:58

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

Thank you for the additional

Thank you for the additional information obeid.

-BV52

max30272

Tue, 06/12/2018 - 11:21

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?

Thu, 06/14/2018 - 09:26

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:

scripts.push("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=T...");

after adding this line:

  var createScriptTags = function (scripts) {
    var tags = '';
    scripts.push("https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=T...");
    for (var i = 0; i < scripts.length; i++) {
      tags += '<script src="' + scripts[i] + '"></script>';
    }
    return tags;
  };

Fri, 06/22/2018 - 14:39

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

Mon, 06/25/2018 - 14:34

Not final Solution

Hi Thomas,
that was a quick solution, I have to continue another project. After this I will provide a clean one.

siddharth013

Thu, 10/15/2020 - 09:16

Edit the code to enable HTML code view in text editor

Hello

I have been looking for a way to enable the HTML code editor in the current text editor view of the H5P plugin used in my moodle site. I have read somewhere that by default they are disabled and I have been trying reading all the documents how to enable them, but can not find the way like explained on the above example that how the change can be made in which code?

Can you please guide that how can I make change in the respective file which will allow the text editor to enable the HTML code view and I can add the custom HTML code inside the editor?

Thanks in advance

Thu, 10/15/2020 - 11:34

Hi,There is no HTML code

Hi,
There is no HTML code editor for text fields in H5P. There's strict validation for the inputs of text fields, so only the styling that is allowed can be added through the buttons available by the text editor.

Why do you need to edit the HTML ? what is your goal ?

Tue, 10/27/2020 - 16:13

Thanks for the reply.I have

Thanks for the reply.

I have my HTML codes which I want to use. I have tables which I also want to use. The tables inside the H5P are not giving the desired output.

I want to give id to my DIVs and other elements as already some styling and features are applied there. This is one of the most essential requirement. As, I tried to add the code through the database I was successful but it was very tough to manage the things in such practice.

Fri, 06/22/2018 - 14:40

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.

Mon, 06/25/2018 - 09:54

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.

    public function hvp_alter_styles(&$styles, $libraries, $embedType) {
        global $CFG;
        if (
            isset($libraries['H5P.InteractiveVideo']) &&
            $libraries['H5P.InteractiveVideo']['majorVersion'] == '1'
        ) {
            $styles[] = (object) array(
                'path'    => $CFG->httpswwwroot . '/theme/iomadboost/style/h5p_custom.css',
                'version' => '?ver=0.0.1',
            );
        }
    }



    public function hvp_alter_scripts(&$scripts, $libraries, $embedType) {
        global $CFG;
        if (
            isset($libraries['H5P.InteractiveVideo']) &&
            $libraries['H5P.InteractiveVideo']['majorVersion'] == '1'
        ) {
            $include_file = ($embedType === 'editor' ? 'h5p_customEditor.js' : 'h5p_custom.js');
            $scripts[] = (object) array(
                'path'    => $CFG->httpswwwroot . '/theme/iomadboost/js/' . $include_file,
                'version' => '?ver=0.0.1',
            );
        }
    }

And try to let the "config.php" as same as the example.

defined('MOODLE_INTERNAL') || die();

require_once(__DIR__ . '/lib.php');

$THEME->name = 'iomadboost';
$THEME->sheets = ['font-iomad', 'iomad'];
$THEME->editor_sheets = [];
$THEME->parents = ['boost'];
$THEME->enable_dock = false;
$THEME->yuicssmodules = array();
$THEME->rendererfactory = 'theme_overridden_renderer_factory';
$THEME->requiredblocks = '';
$THEME->addblockposition = BLOCK_ADDBLOCK_POSITION_FLATNAV;

But nothing change to the h5p interactiveVideo. :(

Mon, 06/25/2018 - 14:25

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.

Tue, 06/26/2018 - 06:02

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

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.

Mon, 05/20/2019 - 15:51

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

Mon, 05/27/2019 - 17:14

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.

Tue, 07/02/2019 - 16:41

Hello,Do you have any new

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.

Fri, 07/26/2019 - 13:11

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.

Daniel Barraza

Tue, 06/16/2020 - 14:49