How to use H5P.JoubelUI in Hello World

Submitted by Richards on Tue, 02/28/2017 - 10:32
Forums: 
Developers

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

fnoks

Wed, 03/01/2017 - 09:44

Hi,

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: https://github.com/h5p/h5p-joubel-ui/blob/master/js/joubel-ui.js