Custom HTML5 applet in a (h5p)-box

Forums: 

Hi, 

I have created some simple little apps (e.g. a binary number to decimal converter) that have one html, one css and one js file.

I thought it would be easy to wrap them in a custom h5p content type. I have tried building a minimal h5p content type using the greeting card example as a blueprint. I attached the contents of the html file to the container in the main js file. My custom css and js is in extra files and loaded by the html file. 

so the directory structure is

myapp/
myapp/h5p.json
myapp/content/    (empty directory)
myapp/H5P.minimal 
myapp/H5P.minimal/library.json
myapp/H5P.minimal/minimal.js
myapp/H5P.minimal/index.html
myapp/H5P.minimal/script.js
myapp/H5P.minimal/style.css

If I load this with Lumi it gives an error. Uploading to Moodle gives an error as well.

I then tried to use the iframe-embedder content type to achieve the same goal, but everything I create with it gives an error as well.
I read somewhere that html is not whitelisted... does this mean the h5p file is invalid if it contains a html file?


I feel like the docs I read are not completely up to date. What am I missing? 

otacke's picture

Your assessment is correct. You will need to build your DOM elements programatically, not using an HTML file. The documentation has many gaps, that's true, but I don't think it suggests that you could use HTML files.

Thank you for the quick answer.

And I didn't want to take a dig at the docs. they were fine and I even found the whitelist somewhere but the implications/context were unclear to me. I assumed html is fine because it was contained in the iFrame embedder example.

 

otacke's picture

Sorry, I am not part of the H5P core and I don’t know what iframe embedder example you are referring to. The docs are outdated and so are the examples that I know of. A file type being allowed in the H5P specification or by amending the allow list does not mean it's handled automatically in any way.

Best,

Oliver 

Okay I have found https://github.com/h5p/h5p-boilerplate and assume this is the current way to get a working minimal module. I'll start with this. thanks for your help

Okay, forget iframe embedder it does not work anyway.


Actually, I am just trying to get a minimal working example of a hand-written h5p file.
I have followed the greeting card example (https://h5p.org/tutorial-greeting-card) up to manual h5p package creation (https://h5p.org/hello-world-h5p-package).
The package created does not load in Lumi. 
Is there a new tutorial somewhere or a minimal h5p package that I can look at for guidance? 
 I just need a working minimal example that I can expand gradually. 
Is the H5P specification (https://h5p.org/library-definition) up to date? 

Sorry for taking advantage of your kindness but if you point me in the right direction I am sure I'll be able to continue on my own.

otacke's picture

You can have a look at https://github.com/otacke/snordian-h5p-boilerplate instead which IMHO is cleaner that the boilerplate template that you were looking at and the readme is more detailed.

The H5P specification is still the one that's documented.

Thanks, this is much better documented.
One more clarification: To test my new content type and customize its content (instantiate it if you will) i have to load this in Drupal's H5P developer mode, right? Or is there more modern tooling for this? the h5p-cli's pack command seems to only build the content type archives and those cannot be loaded by Lumi for example.

Regards

otacke's picture

You can upload them to Lumi. The cog icon in the upper right-hand corner leads to the library management screen of Lumi where you can upload and delete libraries.

That will work with any (official) H5P integration.

The recommended development platform is Drupal 7 with developer mode turned on, yes, but if you have a look at the branches of the H5P CLI tool, you'll notice that some major overhaul is being done that should be finished soon (and could already be used I suppose). It will free you from having to install a custom platform for development.