How to resolve dependancy failures between H5P core assets?

Submitted by coreywi on Wed, 05/08/2019 - 21:14
Forums: 
Developers

Hello.

I'm trying to integrate H5P into a custom platform.  I could really use some advice on a couple of problems I'm faciing. 

The platform is an Single Page Application, where I'm only loading the H5P assets as-needed (in the browser).  The problem I'm seeing is that the dependancies between the various H5P assets is complex.  I found early on that I had to make all the <script> tags synchronous (async = false), or h5p.js would not load becase H5P.jQuery  wasn't defined, etc., etc.

Is the order of browser-side loading of the assets important?  Seems like there are many case where timing problems cause grief.

The problem I'm fighting now is H5P.init() is failing for a content-type (Blanks) because the cached-asset containing H5P.Blanks has not loaded yet.  It's a timing issue because sometimes it works, and other times it does not.

So I can conceptually get dependancies to resolve it I load .js in this order:

jQuery.js
cachedassets/04e0e75325f4d706d9f18d401f893a6f1c9613db.js
h5p.js
etc.

Is this a good approach, or is there other infrastructure somewhere in H5P that might help me with loading the core assets properly?

Thanks!

 

Dimitris

Thu, 05/09/2019 - 10:41

Hello,

Working on an implementation of h5p myself, I can say that the order of the js files is indeed important. What I've found so far to be effective is to load the specific files : jquery.js,h5p.js,h5p-event-dispatcher.js,h5p-x-api.js,h5p-x-api-event.js,h5p-action-bar.js,h5p-content-type.js in that specific order, then load the joubelUI js files (every h5p content I've seen so far has them), then the rest of the preloaded js(the content specific ones should be last and in the order mentioned in the h5p.json file of the h5p package). This so far has worked for me. Hope it works for you too!

coreywi

Thu, 05/09/2019 - 17:29

Hi Dimitris.  Thanks for the reply.

I am creating and inserting <script> tags into the DOM for .js files based on the order defined in H5PCore::$scripts, which is:

  public static $scripts = array(
    'js/jquery.js',
    'js/h5p.js',
    'js/h5p-event-dispatcher.js',
    'js/h5p-x-api-event.js',
    'js/h5p-x-api.js',
    'js/h5p-content-type.js',
    'js/h5p-confirmation-dialog.js',
    'js/h5p-action-bar.js'

Then I load my cached-asset .js file associated with the widget.  All the scripts are loaded synchronously.  If I don't do this, h5p.js can't find H5P.jQuery.

Also, when h5p.js loads, via it's $(document).ready method, it tries to find H5P.Blanks required by the widget in H5P.init().  H5P.Blanks is only defined in the cached-asset file, which isn't loaded yet.  h5p.js then blows up because it can't construct H5P.Blanks.

The problem is that the failure is random, which implies a timing problem between the H5P core and the cached-asset .js file.  h5p.js needs the cached-asset already loaded and depends on H5P.jQuery defined.  The cached-asset file needs H5P.jQuery defined as well. 

Any suggestions (anyone)? 

coreywi

Wed, 05/22/2019 - 22:03

Any suggestions anyone?

There are interdependancies between the core H5P script files.  If I am loading the scripts manually (via javascript) there appears to be circular references between the files that I cannot seem to easily resolve.  Having the script files loaded in <head> or <body> is okay, for some reason.

We are stalled using H5P, so any assistance would be really appreciated.