Recently I’ve been developing templates and eLearning courses in Captivate 2017 and wondered if it was possible to embed a H5P component into a page.
Turns out you can and it’s pretty easy.
It comes down to embedding a web object into a page, but here’s the kicker, you need to have H5P working as a stand-alone application, not on a web server. This allows the Captivate template to work in any browser without being connected to the internet.
Stand-alone H5P
Visit https://github.com/tunapanda/h5p-standalone to get the code for the stand-alone H5P. There is a fantastic article on how to set it up at http://www.knanthony.com/blog/hosting-h5p-content-on-your-own/ or checkout the video below.
For me, I just downloaded the image-juxtaposition from the H5P example page at https://h5p.org/image-juxtaposition.
Playing with the CSS, I found that you may need to reduce the size of the H5P DIV container to make it fit nicley in the Captivate web object. This is very simple, just open the /styles/h5p.css file in the stand-alone project you just downloaded, and update line 121 to be:
.h5p-iframe-wrapper {
width: auto;
height: auto;
}
to
.h5p-iframe-wrapper {
width: 600px;
height: 400px;
}
One of the main things to consider here is the renaming of the .h5p file to a .zip and extract to the src folder.
Once you have all that working, you need to add to your Captivate eLearning course.
Add a Web Object by selecting Object > Web into your slide
From the properties of the web object, the compressed zip folder of your stand-alone H5P application needs to be selected.
You can now preview in your browser and the H5P component is now embedded in an iframe in your course.
