How-to: embed rich HTML5 content into Open edX using H5P and LTI

OpenCraft just published a blog post that shows how to embed H5P’s HTML5 content into Open edX using LTI.

H5P is an open source platform for creating rich, mobile-friendly HTML5 objects and exercises. They have an extensive list of content types to draw from, which all make nice additions to the existing components in Open edX.

If you’re interested in trying it out, you can get a free trial of H5P as-a-service, and we even provide an Open edX to allow testing.

(I would have gladly provided links to all these resources but new members on this forum can’t have more than 2 links in their first few posts. @nedbat might you consider giving members a higher trust level by default?)

Your comments and questions are most welcome! :slight_smile:

3 Likes

About the link limit: we are still getting used to Discourse’s moderation controls. Thanks for the feedback.

Oh you… You published this 2 weeks late, I already wrote my user documentation! :rage:

Had I known you were working on it I would have waited a bit haha, or we could have made a collab.

See you around!

1 Like

@vincent.laberge sorry :man_shrugging:t2:

I’m glad to read that some EDUlib courses feature H5P objects :slight_smile:

I’ll keep in mind to announce these in advance next time. I agree that we could have worked on it together instead of duplicating efforts. That being said, perhaps you could make your doc public so we can mention it in our article? Maybe yours has complementary information?

Salut là!

Haaa, content-wise I made some different choices and visually I would be ashamed to compare to your blog post. I basically stood by the concept of “5-7 easy steps to…”.

Noticeable differences:

  1. I make them add the advanced module before the passport since the LTI passports window is hidden until the advanced module is hidden (on our platform at least)

  2. Our author site seems to not require any client key, therefore its value is arbitrary in the advanced settings.

  3. Since our users edit their h5p on Moodle, they have to use the custom parameter [“force_embed=1”] to prevent the whole Moodle UI to display inside the frame.

  4. Images are real, working examples with real values on my tutorial (in-house wiki), so it lessens the risk of error from our staff and they can troubleshoot by adding these values to the parameters in case nothing else works, to troubleshoot.

Creating an LTI_consumer to integrate H5P on open edX: (images ommited)
1- Create the activity in your h5p author platform.
2- Publish the activity as LTI (depending on the platform, lookup the according tutorials)
3- Enable LTI on the target edX course (advanced settings> List of advanced modules> add “lti_consumer” to the list of advanced modules
4- Create an LTI Passport (Advanced Settings> LTI Passports).
The ID and the client_key are arbitrary values. The secret_client corresponds to the “Secret” provided by your author platform (see step 2)
Each LTI component of the course must have its own passport, with an ID and a unique “Secret”.
5. Create a LTI Consumer xbloc (Unit> Advanced xBlock> LTI Consumer)
6. Edit the block:
LTI ID = Identifier chosen in step 4
LTI URL = Launch URL provided by author platform
Custom Parameters = [“force_embed = 1”] to nest only the H5P rather than the entire author platform interface
7. Validate the values ​​of the other parameters before saving and check that the LTI embed has worked well. Some H5P activities take up to 30 seconds to load, be patient.

Hey that’s all I can think of for now. Have a dashing day.

1 Like

This is awesome! I didn’t know about H5P before. Do you know if there exists a self-hosted equivalent solution? Apparently Open edX can also be used as an LTI provider, but it would be interesting to find an open source solution dedicated to the development of rich LTI content.

EDIT: I feel a bit silly. Is H5P itself open source? It looks like it can be easily installed in a Wordpress platform https://h5p.org/documentation/setup/wordpress

@regis it’s awesome indeed :slight_smile:

H5P.com is their self-hosted offering, if that’s what you were looking for? And yes, H5P is open source (I don’t know to what extent, though - see here).

Blockquote
EDIT: I feel a bit silly. Is H5P itself open source? It looks like it can be easily installed in a Wordpress platform https://h5p.org/documentation/setup/wordpress

Yes, you can install it on a Wordpress, however for security reasons we at EDUlib use our university’s Moodle installation as H5P editor.

h5p.org provides options for self-hosted, but it’s limited to wordpress & moodle. h5p.com is SaaS lti-compatible option.

1 Like

Hah, another of the “wrote my own documentation on H5P recently” club checking in, though I think this is nicer :wink:

I fully endorse H5P, they’re doing great work and importantly they’ve got a good eye towards accessibility in their activities

It’s worth noting that H5P.org is getting limited in the near future - I was speaking with Joubel about it and they mentioned that because it’s intended for trial purposes only, anyone using it sneakily in production is going to start seeing “Try H5P.com!” banners on their activities.

Also, LTI is only available on H5P.com or so I hear, self-hosted doesn’t have the capability yet. So without a native integration into Open edX (though how cool would an H5P XBlock be?!), if you want it graded my understanding is that you’re pretty much locked into H5P.com

4 Likes

Can someone confirm this? I would launch a Wordpress site myself for testing, but I don’t have time for that right now.

1 Like

@itsjeyd can you answer this?

@regis @gabrieldamours CC MHaton Yep, LTI integration is only available via H5P.com. There are some plugins for the self-hosted option that enable integration with other systems but those don’t include Open edX; only WordPress, Drupal, and Moodle are officially supported at the moment. I remember reading somewhere that the plugins supported grading and analytics, but based on the listing at the bottom of this page it seems like this is currently only true for Moodle.

4 Likes

@itsjeyd Wait, I thought the Wordpress/Moodle/Drupal plugins were for hosting LTI content? In my understanding, LTI content hosted on a self-hosted Wordpress would be available for inclusion in an Open edX platform. Isn’t that so?

1 Like

@regis Ah yes, it looks like the WordPress/Moodle/Drupal plugins don’t actually require self-hosting H5P itself. Instead, adding these plugins to a Wordpress/Moodle/Drupal installation will connect that installation to H5P’s content type hub and integrate H5P content creation into the Wordpress/Moodle/Drupal authoring workflow.

Based on that (and the fact that each of these systems seems capable of acting as an LTI provider, cf. [1], [2], [3]), what you’re proposing might work. We haven’t had a chance to test this approach, though – let us know how it goes when you do? :slight_smile:

I also posted about this in an edXchange thread about using in-video quizzes.

Not directly related to the questions we were discussing above, but H5P.com will receive a pretty substantial update next week. For anyone that’s interested, here are the details:

2 Likes

Hey @regis , Is there any news about that ?
We also want to begin using H5P in our OpexEdx courses, I installed the Wordpress plugin and I wonder if it can be connected by LTI and how to do it.

About what? H5P integration via LTI seems to be working, according to Gabriel’s and Opencraft’s blog post.

Is it possible to integrate it via LTI by the H5P wordpress plugin?