Customising fill-in-the-gap markup output

Submitted by ade.oduye@harin... on Sun, 05/12/2019 - 01:44
Forums: 
Content creation

So, can anyone please tell me how I can customize the HTML markup for the fill-in-the-blank plugin?

I'm using H5P for the first time and I need some help please.

I would like to identify each textfield generated by the fill-in-the-blank plugin by adding a unique ID for each one. Right now, only the h5p-text-input class is available on all the textfields.
My plan is to use the ID in an ajax callback to retrieve selectable options for each textfield.

And ....

Is there an API I can use to fetch plain HTML markup for each question to use in an app?

Content types: 
Fill in the Blanks
serettig's picture

serettig

Sun, 05/12/2019 - 08:09

Hi Ade,

I think H5P filters the HTML in the edit fields, so customizing it might not be possible. If I understand your use case correctly, you might want to have a look at the new ‘Advanced Blank‘ content type I created. It supports selecting from a pre-defined list in a fill-in-the-Blanks exercise: https://h5p.org/advanced-fill-the-blanks

About your second question: Do you mean something like a REST API? I don‘t think it exists currently, but it would probably be easy to implement one.

Best

Sebastian

ade.oduye@harin...

Mon, 05/13/2019 - 01:03

Hello Sebastian

Thank you for responding to my question.
Your advance-fill-the-blanks node is great but I want to create something closer to a traditional cloze question. In other words, the options to select from are visible and available for the user to select from. However, I only want the options to appear when the user clicks on the relevant textfield.

Relating a set of options to a particular textfield is why I need each field to have a unique ID. Can you elaborate on what you meant by "H5P filters the HTML in the edit fields" please??
Some code must be generating the markup creating the textfields which leads me to think I should be able to overwrite from a custom module or hack the code directly. So instead of just the following:
<code><input type="text" class="h5p-text-input" autocomplete="off" autocapitalize="off" aria-label="Blank input 3 of 16" style="width: 56px;"></code>

... I'll include a unique ID for each textfield, like you have in your advanced-fill-the-blanks example(sample below):

<code><input class="h5p-text-input" type="text" id="cloze2" size="20" autocomplete="off" autocapitalize="off" value=""></code>

I'm just having difficulty finding the code responsible where I can include an id.

And, you are correct. I did mean a REST API.
Would you mind giving some pointers in creating one so I get HTML markup for a question? The plan is to embed it on a website or an app and when a form is submitted, the data has to be written to the Drupal database as if it was used natively.

Thanks again for your help.

serettig's picture

serettig

Mon, 05/13/2019 - 09:28

Advanced Fill the blanks has a second mode in which you can do what you want, I think. Try downloading the sample and change the mode in the settings.

ade.oduye@harin...

Tue, 05/14/2019 - 18:40

How do I install the advanced-fill-the-blanks plugin?

It's not on the "H5P select content type" list and I can't find a download botton on https://h5p.org/advanced-fill-the-blanks

ade.oduye@harin...

Tue, 05/14/2019 - 22:24

Sorry! I just re-read your last message.

I downloaded the sample, tested it, added an example to it and it works perfectly.

Is there a module/plugin I can download to use this advnaced-fill-the-blanks feature, please?

serettig's picture

serettig

Wed, 05/15/2019 - 08:55

You should be able to upload the h5p file you've downloaded to your LMS or website. This will copy the module to your site and you will be able to create your own content from then on.