Using HTML in questions and answers (fill in the blank quiz)

Hi,

I’m looking to create a ‘fill in the blank’ quiz, but for my particular use case, I need to input some HTML so I can style things later. Most importantly, a few <div> and <span> tags.

I’ve searched around the site and the forum and found a few forms posts as well as this page: https://h5p.org/adding-text-editor-buttons

I’ve tried to follow instructions, but without any results yet, so I thought I’d double check if I understand this correctly.

- By default, the text editor used in H5P only allows ‘normal’ text. HTML tags are not ‘converted’ into elements, but instead show on the page as plain text.

- The above link shows a method to tell the editor to recognize certain tags as HTML.

- As a Wordpress user, I need to put the code into my functions.php

- For example, if I want HTML table tags to work in the text editor for the multiple choice quiz, I’d need to add this code to functions.php:

 

function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {
  // Check if this is the multichoice question type.
  if ($library_name !== 'H5P.MultiChoice') {
    return; // Nope, do not continue.
  }
 
  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 table tags.
      if (!isset($field->tags)) {
        $field->tags = array();
      }
      $field->tags = array_merge($field->tags, array(
        'table',
        'thead',
        'tfoot',
        'tbody',
        'tr',
        'th',
        'td'
      ));
    }
  }
}
add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter'); 

 

If anyone could shed some light on this question, I'd really appreciate it. Thanks!

Freek

otacke's picture

Hi Freek!

For WordPress, it's suggested you use a tiny plugin called "H5P Mods" that will contain your functions for customization. Please see the related documentation page for more information.

Best,
Oliver

Hi Oliver,

Thanks for your help! Really appreciate it.

I'd already setup the "H5P mods" plugin for some custom css, so I've simply added the above code to it.

However, the quiz is not showing the table. This is what I'm seeing: https://prnt.sc/j3p0k9

Any thoughts on what I could try to make this work?

Thanks again,

Freek

otacke's picture

Hi Freek!

I had a look at your code, and I noticed that you're neither passing a priority nor the number of arguments to the add_action function of WordPress. Omitting the priority is fine, but since your function for altering semantics has two parameters and the number of arguments that add_action expects is 1 by default, I guess using

add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter', 10, 2);

should do the trick. Otherwise, $library_name will never be set to anything, so it will also never be 'H5P.MultiChoice'.

Best,
Oliver

Hi Oliver,

Great, that did the trick! Thanks for your explanation of why this wasn't working. Very helpful to learn what I'm doing wrong, so I can figure this out myself in the future.

The table button has now shown up in the editor and I can create a table using that. I've also added some more HTML tags to the code (for div, span and p tags), but entering html tags (including all the table tags) isn't working yet. I read in another thread that I might have to ' change the field widget to html'. Would that be the next step?

Thanks again,

Freek

P.s.: If anyone else runs into this, here's the exact code that worked for me:

function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {
  // Check if this is the multichoice question type.
  if ($library_name !== 'H5P.MultiChoice') {
    return; // Nope, do not continue.
  }
  
  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 table tags. And other HTML tags.
      if (!isset($field->tags)) {
        $field->tags = array();
      }
      $field->tags = array_merge($field->tags, array(
        'table',
        'thead',
        'tfoot',
        'tbody',
        'tr',
        'th',
        'td',
        'div',
        'span',
	'p'
      ));
    }
  }
}
add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter', 10, 2);

 

 

otacke's picture

Sorry, I didn't read what you were trying to do in the first place.

AFAIK, the tags field is not supposed to allow any tag, but only a specific set of tags that will add the corresponding button/option to the CKEditor. That's also what I can read from the source file. So, you won't get an HTML editor like field to enter the tags. They will still be interpreted as plain text.

I have unfortunately never tried to add new plugins to the CKEditor, but I guess this would be the way to go.

PS: The field widget is already set to HTML, that's what you're checking for with $field->widget === 'html' in your code -- otherwise the new tags wouldn't be set at all.

Hi Oliver,

Many thanks for your help, you've gotten me a few steps closer to my goal.

Looking into adding plugins to the CKEditor right now. Looks like that should get me there.

All the best, Freek

otacke's picture

You're welcome!

FJRonH5P, I'm trying to create option in text so I can enter my own divs, classes, styling etc.
I'm at the same level like you described in this thread, and I guess I should be adding plugins into CKEditor to achieve this, but I'm stuck at this point.

I'm wondering - have you managed to do this and would you be willing to share your code here?

HI gettonet,

Unfortunately, I never managed to get beyond this point. I remember trying to install CKEditor, but never being able to add HTML markup... In the end, I used a whole different plugin instead.

Sorry I couldn't be of more help. Good luck!

HI gettonet,

Unfortunately, I never managed to get beyond this point. I remember trying to install CKEditor, but never being able to add HTML markup... In the end, I used a whole different plugin instead.

Sorry I couldn't be of more help. Good luck!