When Check button is pressed

Forums: 

Hi everyone

I'm new to h5p and i would like to ask something because i m creating my own module( PHP ).

I would like to capture when the check button in an h5p quiz (question set or multiple choice ) is pressed.

How can i do this?

Is there maybe a specific function or an event that is triggered when the check button is pressed?

 

Thanks in advance

 



otacke's picture

Hi Alex!

Of course, there's the buttons very own click even that could be listened to. For the check button in particular, listening to answered/completed xAPI-statements could be feasible, too. You'd have to use JavaScript however as the magic is happening in the browser.

Best,

Oliver

Can we see an example of using that element's click event?

otacke's picture

Hi Yuri!

What kind of example are you looking for exactly? It may depend on what you're trying to achieve. The general steps would be as follows;

  • Use the alter_scripts hook to add your custom JavaScript.
  • Option 1: Listen on H5P's external dispatcher for xAPI events that use the verb "answered" or "completed" that will be emitted when the results of a content type or subcontent type are transmitted to the host platform.
  • Option 2: Wait for the content type(s) to be initialized by listening on H5P's external dispatcher for "initialized". Then get hold of the button that you're interested in, either by using exposed variables of the H5P instance(s) or by finding the button in the DOM. And then attach a normal click listener ...
// Option 1
H5P.externalDispatcher.on('xAPI', (event) => {
  console.log(event.data.statement);
  /*
   * If there are multiple content types on the site, you will need to determine
   * what content type sent the event - but usually people are only interested in one ...
   */
});

 

// Option 2
H5P.externalDispatcher.on('initialized', () => {
  /*
   * A content type was initialized and should be ready to be accessed.
   * Beware if there is more than one main content type on the page -
   * Each of them will trigger that event.
   */

  /*
   * H5P keeps track of all instances - here we're checking the first one
   * Often, there's an exposed variable for the DOM which will give you
   * access to buttons. Other elements and internal structures may be
   * available, too. This approach allows to customize H5P a lot, but
   * it needs to be tailored to every content type.
   */
  console.log(H5P.instances[0]);
  
  /*
   * Many content types use the H5P.Question library to handle the buttons,
   * and the check answer-button will often have the class 'h5p-question-check-answer'
   * You can grab it via the DOM easily. Please note, however, that it may not
   * be attached to the DOM when the content is instantiated (there could e.g.
   * be a start screen), there may be multiple buttons visible (e.g. in Column)
   * and you'll need some effort to distinguish where they all belong to (and to
   * use `querySelectorAll` instead), ...
   */
  const checkButton = document.querySelector('.h5p-question-check-answer');
  checkButton.addEventListener('click', () => {
    console.log('Button was clicked.');
  });
});

 

There are even more ways, but I guess we're leaving the terrain of examples and answers for the forum ... 

Best,
Oliver

Hi, otacke!

Thank you very much for your answers and examples. The last example works perfectly well for the “Check“ button of the True/False Question. Can you develop a similar code example for tracking “Finish” button pressed after answering the last question in a Question Set (Quiz)? Or can you specify how to modify the last example to work with a Question Set?

Best regards

otacke's picture

Hi!

I assume that the button is not attached to the DOM at all times (and that it is recreated every time that it is needed), so you probably would need to resort to a MutationObserver on some parent element that's available all the time, filter the mutations for the button in question and add your event listener (once or each time if it is recreated).

Best

Oliver