how to show h5p content in client

[hosais]

Hi,

I tried to show a h5p content in a client (browser) with the server (modified from h5p cli). But with Inonic mobile app it does not work. To find out the issue, I would like to clarify the steps of showing h5p client in the client. I would really appreciate if you could clarify the procedures for me.

I basically follow response of the function H5PServer.prototype.start = function (app) {} and create a html page:

1. add h5p core code in /asset (<script type="text/javascript" src="/assets/h5p-core/library/js/jquery.js"></script> ...)
2. add h5pIntegration and H5PDev according to specific content
3. add h5pContainer part.

My questions are:

1. My understanding is the h5p core script will replace h5pContainer according to h5pIntegration and H5PDev. Am I right?
2. In mobile app, the code usually stored in client side instead of downloading from the server. Is this possible with h5p? I mean if h5p libs and the content data are separated, I can put the script code in client slide and just modify the content data when navigating contents and this should not be difficult.

Please kindly clarify the issues I have. Thank you very much.

hosais

[falcon-git]

I don't know Inonic but I think this should be possible to achieve. I would go through for instance the hook_view implementation in Drupal and make sure that all the same things are done in the app. Please advice if you see that H5P needs to be changed in any way to facilitate this.

[hosais]

In my current understanding, it would require (or at least more efficient) some changes for Ionic mobile app. In node.js + browser arch, it is normal that the browser load the h5p libs to local and render the content. In mobile app, usually would be compiling the template (html or h5p libs) first and then the user downloading it when he install the app and updating the app continuously afterwards. I am trying to do the h5p way first now but without success. I will continue to test and investigate and will keep you posted.

[hosais]

Just would like to make it clear. Currently, the part I am not clear is add h5pIntegration and H5PDev according to specific content part. The rest parts are easy to move to Ionic mobile app (client).

[falcon-git]

I'm actually not sure what H5PDev is. I guess it is specific to the h5p-cli repository which I'm not familiar with?

[hosais]

OK, I retrieved h5pIntegration and H5PDev for a specific content from HTTP. Just for test. This will work for browser. Again, it will not work for my Ionic APP. I think it would be problems between AngularJs (in ionic) and jQuery. When I solve the issue, I will let you know. Thank you for your quick response.

By the way, I checked h5pIntegration content, it is just references of code and data (not the code itself). I think there would be basically fine with mobile APP.

[hosais]

Hi, I may need a little bit help or clarification about how h5p uses jQuery. Can I consider it as an jQuery plugin? There is some modifications may need to integrate to AngularJS. (refer to http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html). Should be similar in Ionic.

I may need to change a little bit h5pContainer part and add directives of AngularJS. I am not sure how h5p do with h5pContainer. I suppose it is replacing some DOM elements using jQuery but I am not clear about the detail. I think I would need to know which part would be matched and replaced by something.

Any suggestion of giving a little direction about what h5p code takes charge of this would be very helpful. Thank you very much.

[falcon-git]

Hi, H5P isn't a jQuery plugin but it comes with it's own version of jQuery to avoid versioning problems.

It does inject the H5P dom into the h5pContainer when it initializes. A reference to the DOM object is given to the H5P content type library and that library injects content into the DOM if i remember correctly.

[hosais]

OK. Finally I decide to load the whole web page (iframe) in ionic and it works. If I have performance issue or the difficulty of two-way data (such as user related), I will get put in another issue. Thank you falcon for your clarification.

[sebastianxcf]

Hi, if you insert the the h5p content with an Iframe, are you able to get the score, clicks, xapi events ,etc from there ?

[patidarkamlesh]

I have to display H5P content on mobile app. i think it is possible via iframe, but how to capture answers , clicks & other events.