You are here

Events

Events are actions triggered on or inside H5P content. They make it easy to do operations based on what's happening with the content. On this page, we'll have a look at which events H5P content generate, and how we can hook into them.

If you want to learn how to use events in your content type or why you should, please check out the Using the Event Dispatcher guide.

Common Events

H5P content can generate any kind of custom events. The ones listed here are the most common ones.

xAPI

The xAPI events are loaded with information about the actions the user does. The xAPI statements are better explained in the H5P and xAPI section.

resize

The resize event is triggered every time the content container potentially have changed size. This is commonly used to changed the size of containers that wraps the H5P content, or to change the size of tasks and sub-content used inside the H5P.

enterFullScreen

exitFullScreen

Triggered when the user leaves full-screen mode. Useful for updating the UI.

No event data available.

focus

This event is used when the content tries to grab focus in the browser. For example, after fullscreen has been entered the content can set its focus back to the previous element. In Course Presentation, this is used for keyboard navigation to continue working.

No event data available.

instance.on('focus', function () {
// The element in focus has changed. Set it back to our input field.
$textArea.focus();
});

domChanged

Triggered when content is inserted into the page. Gives 3rd party scripts an opportunity to add their customizations.

External Event Dispatcher

H5P has exposed an external event dispatcher where the CMS or browser can register event listeners. This means that we can detect every time some H5P content on the page resizes, or if the user has completed a task.

You can test this out on any page that has an H5P task on it. Open your browser's console(Ctrl/Cmd+Shift+J) and insert the following:

Comments

I'm struggling to get the domChanged event to work for the Quiz (question set) content type. Does it not work for every H5P type? In the source code for the question set, I noticed that it triggers events such as resize, but couldn't find anywhere it triggers domChanged. Nevertheless, I thought it was possible I was just missing something in how this event is supposed to be used. For example, I'm not sure what `instance` refers to in the examples above, but I tried using `H5P.eventDispatcher` and `H5P.instances[0]` (where I found the instance of QuestionSet) and neither worked. I'm using Drupal and have added my own script to the document, which is working in other areas. As an example of what I have tried:

Hi, unfortunately I don't think the existing content types are very consistent with triggering these events at the appropriate times. Instance refers to the content instance, so using H5P.instances[0] should get you the instance as long as your script is within the appropriate frame. domContent is triggered whenever a section is attached/registered with the root "Question" instance, but probably wont trigger for other DOM content changes, unfortunately. What DOM changes is it that you're trying to react to, perhaps there are some other event you could listen to or you could look into overriding prototype functions (monkey patching), although this should be used cautiously as there will be no guarantees that this will work with future versions. A different approach would be to create a pull request for the "Question Set" github repo adding the events that you would like to react to, I'm sure other developers would appreciate these events being there as well.

My goal is to keep the functionality of the Question Set, but have more control over its styling to match our own UI. Overriding the CSS gets me pretty far, but I'd love to be able to add classes to the H5P content so that I can reuse the button styles etc. that exist elsewhere in my project. The idea would be to listen for the button to be added to the DOM and then add a class to it. It would also be helpful to attach a listener to the completed event AFTER the DOM has changed (the one currently made available fires when the "finished" button is clicked, but before the DOM is updated) so that I can add an element to the DOM that reports the scores in a different manner than is currently offered by the template. Right now I'm using the resize event that gets triggered which is a bit hacky since that isn't the intended purpose of the event.

I definitely want a solution that will be more likely to work for future versions so that my project will be easier to maintain. I'll look into creating a pull request, but I'm not sure my skills are advanced enough to achieve what I'm looking for.