Enabling configuring H5P contents through iFrame

Forums: 

Hi all,

We have a collaborative learning platform, where we would like to support H5P activities as "first-class" activities. This should mean that users should be able to choose and configure activities directly from within our platform. However, our platform is written in JS/Node, so we cannot directly use the H5P backend libraries. Instead, my idea is to run a separate Wordpress/Drupal/Moodle site, and embed the config within an iFrame. This is how it would work:

- I make a GET/POST request to myh5p.org asking it to configure a new H5P activity with the id = some uuid which I generate

- the hub is displayed in an IFrame, the user chooses the activity type, and configures it in the iFrame (or if the activity already exists, it directly opens the edit config for that activity)

- when I want to run the activity, I just make a GET/POST request to myh5p.org telling it to please display activity id=same uuid as above

It seems to me that all of the "ingredients" for this already exists... The H5P code does not need to care at all that it's in an iFrame, it just displays things normally - the only change is that anyone should be able to call a certain URL, have a new H5P activity automatically generated with a given ID, and opened in the config (without logging in to Moodle, manually clicking on "Create new H5P activity" etc)... 

I can mention that I have already implemented a similar API for the config of activities on my system - and currently another system is embedding our activities (the advantage is tha our activities support synchronous group collaboration, which makes them interesting to many other systems), so I have some experience designing this kind of an API and know that it's completely feasible. (To see an example, here: https://imgur.com/a/bgctk9p. The first image is configuring an activity within FROG, the two next images show Graasp - a completely different system, which embeds the activity type chooser and the config as iFrames).

I would love something general that could get merged into H5P core, and which would enable embedding in multiple other systems, not limited to ones that support H5P. I have begun looking at this, but I am still struggling a bit to follow the logic, because it is kind of split between for example WordPress, the H5P WordPress plugin, the H5P Hub, multiple other H5P packages (core etc), and even within a package, there is some javacript code and some backend code :) So even if we might only need to change a few lines, it's hard to find where those lines should be changed :) I talked to someone at Joubel, and he told me:

To get the config without all the WordPress UI, you might need to make a custom WordPress plugin which uses the H5P plugin. It shouldn't be so hard, you can make an AJAX-URL which only calls this function and then the editor should appear

https://github.com/h5p/h5p-wordpress-plugin/blob/master/admin/class-h5p-content-admin.php#L431

Anyway, I was wondering if anyone has done any work in this direction, or would be interested in collaborating?

[email protected]

Thanks!
Stian

icc's picture

This sounds like an interesting project, although it will probably be some work involved I can't really see why it shouldn't work.
Thanks for sharing!