{"id":1680,"date":"2020-10-01T22:17:03","date_gmt":"2020-10-01T22:17:03","guid":{"rendered":"https:\/\/jrdingwall.ca\/blogwall\/?p=1680"},"modified":"2020-10-01T22:23:27","modified_gmt":"2020-10-01T22:23:27","slug":"playing-tag-with-h5p-mods-adding-buttons","status":"publish","type":"post","link":"https:\/\/jrdingwall.ca\/blogwall\/playing-tag-with-h5p-mods-adding-buttons\/","title":{"rendered":"Playing Tag with H5P Mods – Adding Buttons"},"content":{"rendered":"

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.<\/p>\n

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).<\/p>\n

\"h5p
h5p accordion ckeditor<\/figcaption><\/figure>\n
\"h5p
h5p multiple choice ckeditor<\/figcaption><\/figure>\n

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<\/a> 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.<\/p>\n

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

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).<\/p>\n

\n\t\t\t
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n <\/div>\n
\n \n Copy Code<\/span>\n Copied<\/span>\n Use a different Browser<\/span><\/a>\n <\/div>\n <\/div>\n 
\n
\/**\r\n  *Adding extra buttons to the WYSIWYG text editor\r\n*\/\r\nfunction mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {\r\n    foreach ($semantics as $field) {\r\n      \/\/ Go through list fields\r\n      while ($field->type === 'list') {\r\n        $field = $field->field;\r\n      }\r\n   \r\n      \/\/ Go through group fields\r\n      if ($field->type === 'group') {\r\n        mymods_h5p_semantics_alter($field->fields, $library_name); \/\/ Check your function name!\r\n        continue;\r\n      }\r\n   \r\n      \/\/ Check to see if we have the correct type and widget\r\n      if ($field->type === 'text' && isset($field->widget) && $field->widget === 'html') {\r\n         \/\/ Found a field. Add support for the following tags.\r\nif (!isset($field->tags)) {\r\n$field->tags = array();\r\n}\r\n\r\n\r\n\r\n\r\n\r\nadd_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter');<\/pre>\n<\/code><\/pre>\n\t\t\t<\/div>\n        <\/div>\n
This gets us down to the point where we can now specify the tags we are interested in adding. If you check out the\u00a0 h5p-editor-php-library<\/a> you’ll be able to see that a number of markup items are labelled as tags such as:<\/p>\n