How to use H5P.JoubelUI in Hello World


I successfully created the HelloWorld H5P tutorial and added the two other H5P libraries to access H5P.MultiChoice and H5P.Blanks from within the HelloWorld content.

Now i would like to add the score bar, check and retry button, ... and i found out that for this i could use the H5P.JoubelUI dependency. 

What i have done so far, i added the dependency in my library.json:

"preloadedDependencies": [
      "machineName": "H5P.JoubelUI",
      "majorVersion": 1,
      "minorVersion": 2

-> What should i call in my HelloWorld.js for the U5P.JoubelUI extras?

Thank you

fnoks's picture


When the dependency is added to library.json, you may use it like this:

var $scoreBar = H5P.JoubelUI.createScoreBar(10, 'This is a scorebar');
var $button = H5P.JoubelUI.createButton({
  title: 'Retry',
  click: function (event) {
    console.log('Retry was clicked');

$scoreBar and $button are jQuery objects, you would need to attach them to the DOM.

All the public H5P.JoubelUI functions are documented here: