This article illustrates the H5P library installation process with many screenshots for dummies explained by a dummy (me). Why could it be important to know such technical issues for the standard H5P user?
There are many H5P content types out there that are not yet officially accredited by the H5P core team. There is a list on a community Wakelet1 I started several months ago. Only two new content types – KewAR and Advent Calendar (beta) – were released in the last two years.
I plan to describe the educational scenarios for using these new content types and add these articles to my blog list on German articles to self-determined learning with H5P. The next step will be an English book written and published together with Oliver Tacke, a well-known H5P programmer with educational interests and pedagogical skills. As a matter of fact, this article was an obligation to him: After he has explained the following procedures via email twice to me, I promised to try it a third time, and if I succeed, I will write an article as an act of public penance. So here it is!
Content types not yet released officially
New content types not yet released are (alphabetically sorted):
- AR Scavenger: H5P content type that features Augmented Reality (AR). Using a device’s camera, find physical markers attached to objects in order to trigger displaying 3D models or to trigger H5P interactions.
- Bingo: Create (Buzzword) Bingo sheets online and share them with your friends and colleagues. And if you really want to, you can play normal Bingo, too …
- Crossword: Crossword puzzle for H5P.
- Geography Quiz: GeoQuiz lets you create geography quizzes. The questions are answered by clicking the correct location or area in a leaflet map.
- Guess the Sentence: Guess a „mystery sentence“ previously entered by the teacher, word by word. (I have just found the library file. There are also variations on the Dialog Card and Drag and Drop exercises as new content types available.)
- Highlight the Words: H5P content type that allows students to select text in different colors – and potentially more.
- Mark the Letters: Based on Mark the Words you can mark letters in a text. (I have just found the library file.)
- Matching: Match two texts, or an image and a text.
- Pick the Symbols: Put the correct punctuation marks into the text.
- Sort the Paragraphs: Sort paragraphs into the correct sequence.
- ZUM Image Hotspots Enhancements: It enhances H5P Image Hotspots by integrating several other content types: Drag & Drop, True/False Question, Mark the Words, Summary, Single Choice Set, Fill in the Blanks, and Speak the Words. (The library file can be downloaded from GitLab, another popular hosting site or collaboration and version control.)
I plan to describe the educational scenarios for using these new content types and add these articles to my blog list on German articles to self-determined learning with H5P. The next step will be an English book written and published together with Oliver Tacke, a well-known H5P programmer with educational interests and pedagogical skills. As a matter of fact, this article was an obligation to him: After he has explained the following procedures via email twice to me, I promised to try it a third time, and if I succeed, I will write an article as an act of public penance. So here we are!
These new content types listed above work well and are great tools that could supplement the list of H5P content types. But as you maybe have seen, almost all links go to GitHub repositories. So the question arises:
H5P library installation: The easy way
Whenever you see one of these content types not only on GitHub but in use on a website (maybe as an example to demonstrate it), look for the reuse button. Places where you can find many of the above-mentioned library template files – often provided with demonstration content – are OTacke’s Lab and Papi Jo’s Drupal Test Site.
If there is a reuse button, then you can celebrate! The installation of the new library is pretty easy:
H5P library installation: The hard way
But what if there is no free accessible (demo) material of this new h5p content type available? Or the developer did recently some changes which are up to now only via the GitHub repository obtainable? Then you have to go the long road for the h5p library installation.
Please be aware that the following procedure is not without risks. As Oliver Tacke is repeating all the time: Try to understand what you are doing instead of blindly typing into your keyboard or pasting commands. Things can break. No backup, no pity!
Before you can start you have to overcome two hurdles:
Where is your command-line interface?
You have to complement your usual interface interaction with your operating system with a command-line interface (CLI). This feels a little bit like back to the 1970s and 1980s, where command line input was commonly used. But as a bonus: Using a CLI will power your computer knowledge tremendously and will come in handy on many occasions.
The following summary is taken from Command Line Crash Course by Zed A. Shaw, p.5-6.. Other possible useful links are:
- Free Udemy Course: Learn The Linux Command Line: Basic Commands
- How to Use the Command Line Interface (Windows)
- The Linux Command Line for Beginners (Linux)
- How to use Terminal on Mac
- Hold down the command key and hit the spacebar (CMD-space). This opens the spotlight search.
- Type „terminal“
- Click on the Terminal application that looks kind of like a black box. This will open Terminal.
- You can now go to your dock and CTRL-click to pull up the menu and then select Options .> Keep In Dock. Now you have your terminal open and you can get to it.
There is also a wikiHow Tutorial.
If you have Linux then you already know how to get to
your terminal. Look through the menu for your window manager for
anything named „Shell“ or „Terminal“.
On Windows, you can use PowerShell. People used to work with a program called cmd.exe, but it’s not nearly as usable as PowerShell. If you have Windows 7 or later, do this:
- Click Start.
- In „Search programs and files“ type: powershell. Hit Enter.
See also the wikiHow Tutorial.
Install necessary programs
Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.https://git-scm.com/
Or simpler expressed: Git is software for tracking changes in any set of files, usually used for coordinating work during development. Originally only used by programmers to collaboratively develop source code during software development, Git is nowadays also used to write a book jointly or other corporate tasks.
You will find the „authoritative“ installation guide for different platforms on the Git Getting Started page.
Node.js and npm
Nodejs is a free open source server environment and runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.). npm is the world’s largest software registry with over 800.000 code packages. Open-source developers use npm to share and install software.
There are various ways to install node and npm depending on your operating system. With an internet recherche you will find many more guides, also specially tailored to your operating system. A first starting point may give you the following two articles:
The last piece we will need is the H5P Command Line Interface. This tool simplifies the development process of HTML5 packages, but we will need it only for one command: To pack all files into an h5p library. For its use, you need to have installed nodejs and npm already.
npm install -g h5p into your command-line interface to download h5pcli.
H5P Library Installation for Dummies
Finally, we are now in the position to install the new content type via GitHub. GitHub is a code hosting platform for collaboration and version control where you can find almost all of the H5P content types.
H5P Library Installation Step 1: Get the URL from the GitHub repository
H5P Library Installation Step 2: Clone the h5p project to your computer
H5P Library Installation Step 3: Check if everything went smoothly.
H5P Library Installation Step 4: Enter the new downloaded h5p folder
H5P Library Installation Step 5: Check if there is a package.json file inside the folder
H5P Library Installation Step 6: npm install
H5P Library Installation Step 7: check if there are any vulnerabilities
H5P Library Installation Sidestep 7a: npm audit fix
H5P Library Installation Sidestep 7b: Continue even if not all vulnerabilities are fixed
H5P Library Installation step 8: npm run build
H5P Library Installation step 9: h5p pack folder library.h5p
Puhhh! Now we can leave the command-line interface and upload the library file into our h5p installation. In my case it is WordPress; so I have to open H5P Content -> Libraries.
H5P Library Installation step 10: Upload the library file into your H5P installation
Finished. When you scroll down your list of libraries will find the new h5p library.
A final remark
Please refrain from this hack in the way I have done it! Oliver Tacke, in his comment, has added some valuable and corrective information.
Please read his addition carefully and remember his mantra: Try to understand what you are doing instead of blindly typing into your keyboard or pasting commands. Things can break. No backup, no pity!
I tried to upload a library with a minor change: A new language file for German was added but the library had the same version number. In this case, h5p did not install this changed version. I had to change the version number myself manually.
H5P Library Installation Sidestep 8a: Files containing the version number
H5P Library Installation Sidestep 8b: Changing the patchversion number
Of course, you have to change the version number before you pack the library (before the last command with
h5p pack …).
- This Wakelet is open to the public. Join us to watch & report future H5P developments!