Spanish version
Written by: Prof. Orlando Carcamo Berrio
H5P is an open-source online software program that can be used without payment and under the authors' conditions. It can be defined as an online generator of numerous interactive open educational resources such as exams, presentations, photo exhibitions, interactive videos, timelines, etc. Resources can be created on https://h5p.org/ and subsequently embedded using iframe-type code on a web page.
On platforms such as Drupal 7 and 8, Moodle, and WordPress, a compatible H5P module can be installed, and from there, content can be produced and hosted. The generated resources can be configured to be reusable on other websites under a Creative Commons license. This has made H5P a popular tool among teachers, communicators, and interactive content creators.
The Problem
I recently migrated my website, "Orlando Cárcamo's Virtual Space," from Drupal 7 to Drupal 11. To my surprise, the H5P content I had created was no longer displayed in the new installation. The reason was clear. Since I didn't have the H5P module installed, the content produced with this generator couldn't be displayed.
To install the H5P module, I went to the Drupal module download page (https://www.drupal.org/project/project_module). I was surprised to find that the H5P module compatible with Drupal version 11 hadn't been produced. At the time, only versions were available for Drupal 7, 8, 9, and 10, which is why my content produced with H5P was virtually lost.
The Solution
I did a Google search to find any H5P modules adapted for Drupal 11 by members of the Drupal community, since none were available on the official website.
I found no modifications or adaptations of the H5P module for use with Drupal 11. However, I discovered an exciting alternative: Lumi. Lumi is a software program that allows you to create, edit, and view H5P content locally or online. Unlike H5P.org, Lumi has the advantage that it can be installed on your computer, and the H5P-type resources created can be exported and uploaded to any server. They can then be embedded in articles and web pages using iframe code.
When I explored the desktop version of this program, I realized that the produced H5P content can be exported as HTML files. At this point, I realized I wouldn't lose the content created with the H5P module in my old version of Drupal 7. Logic told me that if they could be exported as HTML, then the HTML for these learning objects could easily be embedded in the various pages or articles on my Drupal 11-based site.
I conducted the experiment. I downloaded content produced with H5P into my Drupal 7 installation. I imported it into Lumi. I reviewed it and then exported it as HTML. Next, I copied and pasted the HTML code into one of my published articles on my Drupal 11-based site.
And… surprise!
The HTML content worked exactly as the H5P object worked in my old version of Drupal 7.
Below are the steps I followed:
What did I do?
1. I downloaded the H5P objects hosted on my old Drupal 7 site.
2. I imported them into the Lumi application installed on my computer.
3. From Lumi, I exported each object as a standalone HTML file.
4. I copied the source code from the exported HTML file.
5. I pasted that code directly into the body of a Drupal 11 article using the "<>" (Source Code) button in the Drupal 11 text editor.
And it worked!
The interactive content displays and functions just like it did on my old site. Problem solved without the need for the H5P module!
Conclusion
Suppose you have a Drupal 11 site and need to use your old H5P content. In that case, you can continue using it with the help of Lumi, without requiring the official H5P module, which, as of this article's publication, has not been updated for this version.
This solution is functional, elegant, and practical. It allows your site to maintain interactivity and innovation in educational content, improving visitors' experience.
We invite you to share this article on your social media.
Please, continue reading my articles. You may find some interesting ones.