Playing Tag with H5P Mods – Adding Buttons

Playing Tag with H5P Mods – Adding Buttons

October 1, 2020 0 By JR

All tools have their limitations, that’s just a fact. What is nice about using something like H5P is that there is a bit of a community that works on customizing it in addition to the core team of developers. That’s actually how I managed to snag a flashcard content type (built in dialog cards) prior to the official flashcard content type coming out.

The CKEditor varies across H5P content types, which can really bring a project to a screeching halt. For example, take a look at the text editor for the Accordion type (first) and the Multiple Choice content type (second).

h5p accordion ckeditor

h5p accordion ckeditor

h5p multiple choice ckeditor

h5p multiple choice ckeditor

I encountered my first roadblock with this years ago working on a pharmaceutical calculations course. At the time we used MCQs in the course content to provide practice opportunities for students, with some feedback built in, but the feedback field in H5P at the time would not allow us to provide a full equation solution so we opted for the Accordion to do that. However, what is something that you see in the MCQ editor that you don’t see in the Accordion editor? It’s pretty important for math AND chemical compound notation. That’s right, sub and super script isn’t there. Even copying and pasting from word wouldn’t make it stick. So this required some extra work. At the time I added to the H5P Mods WordPress Plugin and managed to get it working (I broke my entire WPMS multiple times trying this). Over time though, H5P kept getting updates and I didn’t touch the Mods plugin and it ended up jamming the H5P hub. All the current activities worked and I could upload new H5P content to the site, but I could not create anything new right within WordPress.

Recently, I did an activity Converting Static Content Into Interactive E-Learning #299 and ran into a similar issue which brought me back to this idea of the H5P Mods plugin.

I went back to the original H5P Mods plugin, got it again, and started from there (not using any of the work I’d done before), I needed a fresh start. If you look at the sample H5P Mods plugin, you’ll see it has some sample sections. Some are for score keeping of activities, one is a CSS reference (going to have to try playing with that later), and so on. I cleared out most of that, and then had to add some php to connect to the CKeditor (you’re about to find out I don’t use any of this lingo correctly).

					

/**
  *Adding extra buttons to the WYSIWYG text editor
*/
function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {
    foreach ($semantics as $field) {
      // Go through list fields
      while ($field->type === 'list') {
        $field = $field->field;
      }
   
      // Go through group fields
      if ($field->type === 'group') {
        mymods_h5p_semantics_alter($field->fields, $library_name); // Check your function name!
        continue;
      }
   
      // Check to see if we have the correct type and widget
      if ($field->type === 'text' && isset($field->widget) && $field->widget === 'html') {
         // Found a field. Add support for the following tags.
if (!isset($field->tags)) {
$field->tags = array();
}





add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter');

This gets us down to the point where we can now specify the tags we are interested in adding. If you check out the  h5p-editor-php-library you’ll be able to see that a number of markup items are labelled as tags such as:

  • u
  • sup
  • sub

and more. The way I wrote this up isn’t slick, as I’m sure I should be able to merge the array, but this worked for me:

					

// Add format group if formatters in tags (h1, h2, etc). Formats use their
        // own format_tags to filter available formats.
        if (!in_array($field->tags)) {
          $field->tags[] = 'strong';
          $field->tags[] = 'em';
          $field->tags[] = 'u';
          $field->tags[] = 'del/strike/s';
          $field->tags[] = 'h1';
          $field->tags[] = 'h2';
          $field->tags[] = 'h3';
          $field->tags[] = 'h4';
          $field->tags[] = 'h5';
          $field->tags[] = 'h6';
          $field->tags[] = 'a';
          $field->tags[] = 'ul';
          $field->tags[] = 'ol';
          $field->tags[] = 'hr';
          $field->tags[] = 'sup';
          $field->tags[] = 'sub';
          $field->tags[] = 'blockquote';
          $field->tags[] = 'img';
          $field->tags[] = 'address';
          $field->tags[] = 'pre';
          $field->tags[] = 'p';
          $field->tags[] = 'div';
          $field->tags[] = 'span';
          $field->tags[] = 'code';
        }

So now when we go look at both the Accordion and MCQ content type editors we get the following:

h5p mods accordion ckeditor

h5p mods accordion ckeditor

h5p mods mcq ckeditor

h5p mods mcq ckeditor

So we are beginning to see more overlap between the two. Both now have underline and the Accordion picked up sub and superscript. AND my site didn’t break. In each case I’ve also now got way more heading levels and paragraph format types than we had before.

If you have a keen eye you’ll notice something though, not ALL of the tags are appearing. For example, p, div, and span don’t appear and neither does img. Doing a bit of digging I found that some of these items appear along the bottom when using the editor and are not necessarily buttons, but also some tags such as img require adding some additional Javascript to the website. I haven’t made it that far yet.

Now, onto the next hurdle for me to jump. You’ll notice in the MCQ editor that font size, text color, and background color don’t appear, and yet they appear in the Accordion. This was a bit of a pain when I was working on the elearning hero challenge #299, because the background I was using made the MCQ question text impossible to read, and I could NOT change the text color. I had to do a bit of a work around which was ok, but not ideal. Going back to the h5p editor php library I can see that say font color is an available item:

					

if (this.field.font.color) {
      // Text color chooser
      colors.items.push('TextColor');

      if (this.field.font.color instanceof Array) {
        ret.colorButton_colors = getColors(this.field.font.color);
        ret.colorButton_enableMore = false;
      }
    }

But the big difference is that it is not executed simply with a tag. When I looked up the h5p advance text / semantics.json I see that they list tags, and that font is identified lower down:

					

[
  {
    "name": "text",
    "type": "text",
    "widget": "html",
    "label": "Text",
    "importance": "high",
    "enterMode": "p",
    "tags": [
      "strong",
      "em",
      "del",
      "a",
      "ul",
      "ol",
      "h2",
      "h3",
      "hr",
      "pre",
      "code"
    ],
    "font": {
      "size": true,
      "color": true,
      "background": true
    }
  }
]

When you edit the text color with the Accordion content type, the tag it throws is span so on the one hand I think I’ve got this part way there, but what I’m currently missing is how to get hooks into the buttons and have them display in all content type editors. Given the headached I have from getting this far, I’ll put this project down for a bit and maybe I’ll have some ideas come to mind over the next couple of days.


Photo by Luca Bravo on Unsplash