Help with Getting the API Score for Drag and Drop

Hi. I am trying to get the score from my Drag and Drop to interact with some javascript function.

I followed one of the previous posts and added the following code to my (wordpress) theme's functions.php file.

function h5pmods_alter_scripts(&$scripts, $libraries, $embed_type) {

  if (isset($libraries['H5P.DragQuestion'])) {

    $scripts[] = (object) array(

      // Path can be relative to wp-content/uploads/h5p or absolute.

      'path' => 'score-tracking.js',

      'version' => '?ver=1.2.3' // Cache buster

    );

  }

}

add_action('h5p_alter_library_scripts', 'h5pmods_alter_scripts', 10, 3);

I then added a score-tracking.js with the following code:

H5P.externalDispatcher.on('xAPI', function(event){

  if (event.result.score.raw() === event.result.score.max()){

    console.log('The user has exceeded our expectations!');

  }

});

However, when I go back to my page with the drag and drop and gets a maximum score, nothing shows up in the console log when I successfully completes the drag and drop.

Here is my page --  https://www.littlechinesereaders.com/staging/?sfwd-topic=drag-and-drop-h5p