When Check button is pressed

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