Assistance with Moodle and New Content Types

Submitted by Oliver Kr on Fri, 05/08/2026 - 13:51
Forums: 
Developers

Hello everyone,

I am making a post here in hopes of getting some help in developing my own H5P project. I'm doing it as a student project and seem to be a bit lost under all the documentation and knowhow needed to work with H5P and moodle. 

So far I have made a project with this structure:
h5p-project/
 ├──h5p.json
 ├──content/
 │   └──content.json
 └──H5P.RoutingSim/
     ├──.h5pignore
     ├──library.json
     ├──semantics.json
     ├──images/
     │   └──Router_symbol_icon-Blue.svg
     ├──scripts/
     │   ├──routing-sim.js
     │   └──simulator.js
     └──styles/
         └──routing-sim.css

I have recently managed to get it working using the moodle core plugin (mod_h5pactivity), while I was usually using mod_hvp. 

Do you have a recommendation on which one to use and how to develop it further?
The file itself is attached below.

p.s. please keep in mind this is a work in progress and not the final version

H5P file: 
Binary Data RoutingSim.h5p
otacke's picture

otacke

Sat, 05/09/2026 - 00:16

Just looking at this on my phone, so I won't dive into the file.

What I can see here is a content file. Do you really build this by hand and try to upload that anywhere?

Either way: 

The H5P.RoutingSim folder name is lacking the version number. I'd also add an icon.svg file or the H5P Hub client will miss that one. The rest will depend on the contents.

Oliver Kr

Wed, 05/13/2026 - 17:21

It seems I completely missed the docs page that you linked below for h5p-cli. I have been writting this code raw in Code - OSS and then zipping the folder with

<em>rm -f RoutingSim.h5p && zip -rDX RoutingSim.h5p h5p.json content/ H5P.RoutingSim/ --exclude='H5P.RoutingSim/.h5pignore'</em>

 

otacke's picture

otacke

Sun, 05/10/2026 - 20:24

Just tried to upload the file, and to my surprise, H5P did not care and installed the library (even though `H5P.RoutingSim-0.6` is what H5P itself would export to a content file).

Is your question what platform you should use for development? The H5P plugin for Moodle or Moodle's own H5P integration? Neither. H5P CLI is way more convenient (https://h5p.org/h5p-cli-guide).

Quick tips:

  • Splitting up your code into dedicated classes and associating the CSS to these might help in the long run.
  • CSS: Nesting helps a lot with intelligibility, avoid "px" values where it makes sense. Most often a bad choice.
  • JS: There's a coding style guide for H5P. Only very old H5P code uses ES5, feel free to modernize. Try to avoid jQuery as jQuery will be removed from H5P's core at some point. Extending H5P.Question may have been helpful for a question-like content type. Not yet localizable (but that you know). Building the DOM in `attach` and not in `constructor` often causes issues when using the content as subcontent, as parents may query `getMaxScore` etc. before the content is attached, thue retrieving wrong values.
  • Content type: Not accessible.

If you want to check things yourself in more detail: https://snordian.de/2023/04/29/how-to-review-h5p-content-types/

Oliver Kr

Wed, 05/13/2026 - 17:10

Thank you so much for taking the time to give me feedback!

I appreciate it and will make sure to update the code when I get the time. Currently I am swamped with writting the paper for the integration and development of said code.
I was using ES5 for compatibility sake, maybe someone would try and run it on an old browser, but I would like to modernise. This syntax gives me a headache. :)

Thanks again! I will repost the modernised code at some point here.

Cheers,
Oliver

otacke's picture

otacke

Wed, 05/13/2026 - 19:07

  1. ES6 was introduced in 2015, here's the support table: https://caniuse.com/?search=es6. What browser were you expecting to be used?
  2. There may well be cases where you want to use newer features that are not yet adopted widely, but then you'd use Babel to transpile modern code that you write to older code (potentially adding polyfills if really necessary). And you'd have that in a build chain, not run it manually.
  3. H5P Group itself only guarantees support for the latest two versions of a browser.

Oliver Kr

Wed, 05/13/2026 - 19:38

Understood. I come from a community where people often use old, deprecated software, so making sure it works without backporting became a habit of sorts.

I will definitly update this to newer versions, especially if H5P group only guarantees support for the latest two versions of a browser. I must've missed the warning in the docs.

Thanks again,
Oliver

otacke's picture

otacke

Wed, 05/13/2026 - 21:12

No. It's not in their documentation. You must know where to look too often, or just have learned from experience :-/

They only specifically mention support for accessibility at https://help.h5p.com/hc/en-us/articles/7505444789405-Accessibility-statement-for-H5P-com. But one of the developer once told me that this is true for code, too. They don't actively pursue to use the latest stuff though, so they often support older browsers, too.