Using other libraries
In this tutorial, we will show you how to use other H5P libraries in your custom library.
Using other libraries is a powerful feature of H5P. In this tutorial, we will add a task to our example to show how easy it is to use already existing libraries in another library.
Update your semantics
First we need to describe which libraries may be used. This is done in our library's semantics.json where we add the following:
{ "name": "task", "type": "library", "label": "Task", "options": [ "H5P.MultiChoice 1.7", "H5P.Blanks 1.6" ] }
Make sure you use the right version numbers for MultiChoice and Blanks. In the time of writing the latest stable versions are 1.7 and 1.6, but you have to use versions you have installed on your system. H5P can keep several versions of a library on the system so you don't have to update your library when libraries you use are updated. Your library will keep using the specified versions until you update your library.
Important to notice here is type (which is set to library) and the options array. Read more about semantics here.
Invoke and resize the task libraries
The H5P core will not initialize the external libraries – this must be done by our library. To do this, use the H5P.newRunnable() function, which will return a new instance. Also make sure the new library gets to respond to any resize events. Add the following to your constructor:
if (this.options.task) { // Initialize task this.task = H5P.newRunnable(this.options.task, this.id); // Trigger resize events on the task: this.on('resize', function (event) { this.task.trigger('resize', event); }); }
To append the library to the DOM, invoke the attach function. Add the following to your attach function:
if (this.task) { // Create a container for the task var $taskHolder = $('<div>'); // Attach the task to the container this.task.attach($taskHolder); // Append the task container to our content types container $container.append($taskHolder); }
It is important to notice that the first parameter in H5P.newRunnable is the field exemplified in the semantics above. As a rule of thumb, we initialize the other library in our constructor and attach it to the DOM in our attach function.
Override CSS
When including external libraries you often need context dependent styling. In the example below we override the background color of the buttons in the task:
/* Task buttons override */ .h5p-greetingcard .h5p-joubelui-button { background-color: #000000; }
To be able to override a library's CSS, we need to use a more specific CSS selector than the library already is using. Please don't use the !important rule, since this is considered bad practice.
The complete code is attached.
Comments
korogui
Tue, 07/05/2016 - 00:41
Permalink
Error, could not load the content type form.
Hello,
I've done the tutorial, cloned the libraries, but when I select the "content type" in "Add content".
I get the error "Error, could not load the content type form"
No JS errors, or logs about it. Any ideas about it?
korogui
Tue, 07/05/2016 - 08:48
Permalink
My bad, I mistyped the
My bad, I mistyped the semantics file name
falcon
Tue, 07/05/2016 - 12:56
Permalink
:)
:)
alkanadi
Thu, 08/11/2016 - 17:58
Permalink
Does this code go inside a
Does this code go inside a function? I just put it at the end near return C.
this
.on(
'resize'
,
function
(event) {
this
.otherInstance.trigger(
'resize'
, event);
});
thomasmars
Fri, 08/12/2016 - 10:09
Permalink
Hi,
The 'resize' event can be used to make sure that the iFrame is of sufficient size when the content inside it has been initialized. It should be used when all content has been added to the dom, which is likely to be inside you attach function.
Dialog cards has a good example of this https://github.com/h5p/h5p-dialogcards/blob/master/js/dialogcards.js#L80 since images are added to the iframe after its initialization, the content inside the iframe will grow, so the iframe has to resize in order to encapsulate all of the content.
programmieraffe
Sat, 08/13/2016 - 16:49
Permalink
Include course presentation?
Hey,
thanks for the tutorial?
Does it work for Course Presentation as well? I managed to get it working with "H5P.MultiChoice 1.7" and "H5P.Blanks 1.6", but ""H5P.CoursePresentation 1.11" does not work. (It is displayed in the select field, but there is no content after reloading below the select field).
Thanks in advance!
Best regards,
Matthias
programmieraffe
Sat, 08/13/2016 - 17:22
Permalink
Javascript error is the
Javascript error is the following: "this.presentation is undefined"
(btw: In the previous comment i meant "thanks for the tutorial!" not "thanks for the tutorial?" ;-))
falcon
Mon, 08/15/2016 - 09:27
Permalink
I haven't tried, but it
I haven't tried, but it should. Sound like something is going wrong when passing the arguments to the Course Presentation constructor. Does everything work in the authoring tool? Both when creating and when editing the after saving?
alkanadi
Sun, 08/14/2016 - 10:32
Permalink
Thanks for updating this
Thanks for updating this tutorial. I will give it a try some time this week.
alkanadi
Sun, 08/14/2016 - 11:08
Permalink
"Make sure you use the right
"Make sure you use the right version numbers for MultiChoice and Blanks. In the time of writing the latest stable versions are 1.7 and 1.6"
Does this mean that my content will break when the Libraries are updated?
falcon
Mon, 08/15/2016 - 09:18
Permalink
Thank you for asking. No, it
Thank you for asking. No, it will keep using the old version and H5P will have several versions installed. See updated text.
tsar
Mon, 10/09/2017 - 08:48
Permalink
no new result after adding tasks
I followed the tutorial of hello world and i also tried adding the tasks as above. But its showing nothing new other than the image and the text. My file structure is as in the tutorial manually create packages. There are no results given after this tutorial. What should the exact result be?
tim
Tue, 10/10/2017 - 09:50
Permalink
Try downloading the
Try downloading the attachment at the bottom of the article and uploading it to your installation. It should show additional content types added. You can also unzip and .h5p file and inspect the code to see how yours differs.