Hello,

We're working with a survey framework where we want to include H5P content for training purposes. The h5p-standalone has worked perfectly so far in testing as long as we don't try to load additional or reload content in the same session. The overall framework is Angular, and then I have limited capability within that.

Basically, my content is implemented as a class. I specify my dependency:

static get jsDependencies() { return [{ id:'h5p', url:'/h5p/main.bundle.js' }]; }

And an initialization function:

init() {
  const opts = {
    h5pJsonPath: '/h5p/content/' + this.properties.h5pfolder,
    librariesPath: '/h5p/libraries',
    frameJs: '/h5p/frame.bundle.js',
    frameCss: '/h5p/styles/h5p.css'
  };
  var div = this.widgetQuerySelector('.h5p-div');
  new H5PStandalone.H5P(div, opts).then(() => { H5P.externalDispatcher.on("xAPI", (e) => this.xApiEventHandler(e)); });
}

The framework takes care of injecting all of the appropriate dependencies and the class into the page when it is required. This works just great when init() gets called for the first time. BUT if the training contains content on multiple pages, or the user navigates back to a page where some content was previously loaded, then it breaks with the following error (Firefox): ERROR TypeError: H5PStandalone is undefined

I have checked the documentation, and assume I'm in the basic realm of "Multiple Players on the same page". The problem is that I don't have any control over importing the script. I can detect H5PStandalone is no longer defined and do something else, but I'm not quite sure what that should be. Any assistance is appreciated!!