Packing h5p for hosting outside of Wordpress / Drupal

Submitted by mvtango on Wed, 08/31/2016 - 20:17
Forums: 
General discussion

We're currently thinking about using h5p as a way of creating interactive content for customers with no Wordpress or Drupal. Their requirement is to be able to download a .ZIP file "with everything" so they can drop it on their webspace, no Wordpress / Drupal / PHP available. We're thinking along the lines of a "Web Export" (which you could minify/optimize along the way). We know the downside, it can break reusability of the result within the h5p ecosystem a bit, and you have to make sure usage data / test results get handled properly (we're thinking URL parameters for the iFrame) - but that's the requirement.

Has this been done by somebody? Should this be hooked into the "save" part of the h5p Wordpress plugin? Would like to discuss options, one of which can be joint development of something that will be a open sourced piece of software.

Cheers,

M

 

fnoks's picture

fnoks

Thu, 09/01/2016 - 09:41

Hi,

This question in different variants has been asked several times. How do you imagine the workflow? I guess there should be a download button somewhere, which creates a zip containing the H5P-runtime, libraries, and content. How should this be "dropped into their webspace". Should the zip-file contain a self-standing HTML page, or should it be put inside an existing page? Is the "destination" a CMS or something else?

Mathew Gancarz

Thu, 10/06/2016 - 01:17

Hi, our use case for this is embedding inside a Lectora SCORM Package, but I think the general use case could be:

1) Download button creates zip as you indicated

2) Zip file contains self-standing html page, that is then either just unzipped to a web server folder or embedded as part of something else, via an iframe or something similar. The idea is that the zip contains all of the front-end components needed to run the activity. Adding reporting to an LRS/xAPI style things could be a secondary stage, as I think in a lot of cases it's just the presentation that is important, no the actual storing of grades.

mvtango

Thu, 10/06/2016 - 07:29

I think what Mathew Gancarz describes is a good workflow.

mvtango

Thu, 10/06/2016 - 07:40

As a second option, exposing the download via wordpress' RESTful API to integrate the "stand-alone" Version into third part systems would be welcome.

fnoks's picture

fnoks

Mon, 10/10/2016 - 08:26

I found this one: https://github.com/tunapanda/h5p-standalone. I am not sure it works with the latest H5P Core version, though.

Mathew Gancarz

Tue, 10/11/2016 - 20:45

Hi all, I tested h5p-standalone that fnoks linked and while it did not work at first, it did once I tweaked it a bit. I've tested embedding it in a lectora module and it looks to work decently, though I haven't tested the fully responsive nature of it yet.

Steps that worked for me:

1) Download a copy of the h5p-standalone github project

2) Download a .h5p zip file, extract it into the workspace directory, so the h5p.json and related files are directly in the /workspace folder at the root of it. Rename the library folders in /workspace to not have the version number. ie: rename H5P.Nil-1.0 to H5P.Nil, jQuery.ui-1.10 to jQuery.ui and so on.

3) Go to the demo/index.html page and it should work. If it doesn't, watch for errors in console. For example it showed "Failed to load resource: the server responded with a status of 404 (Not Found)"  /workspace/H5P.Nil/library.json  until I renamed all of the libraries to not have a version number.

4) If you are embedding it in something else, like Lectora, I used it's 'add folder' functionality so that it includes a copy of the files in the package it creates and I embed it using the code: <iframe src="h5p-standalone-master/demo/index.html" width="772" height="484" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

 

Also related, it looks like the author is already aware and has a fix in the works that he just hasn't fully integrated yet. See: https://github.com/tunapanda/h5p-standalone/pull/3

 

fnoks's picture

fnoks

Wed, 10/12/2016 - 09:29

Great! We really appreciate you sharing this!