H5P library installation via GitHub: 10 steps to get new content types not yet released officially

The article explains the h5p library installation process for new – not officially released – content types. There is a bunch of H5P content types not yet officially accredited by the H5P core team. How can you take advantage of these goodies if they are not yet officially and distributed via the standard H5P way?

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):

  1. 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.
  2. 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 …
  3. Crossword: Crossword puzzle for H5P.
  4. Geography Quiz: GeoQuiz lets you create geography quizzes. The questions are answered by clicking the correct location or area in a leaflet map.
  5. 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.)
  6. Highlight the Words: H5P content type that allows students to select text in different colors – and potentially more.
  7. Mark the Letters: Based on Mark the Words you can mark letters in a text. (I have just found the library file.)
  8. Matching: Match two texts, or an image and a text.
  9. Pick the Symbols: Put the correct punctuation marks into the text.
  10. Sort the Paragraphs: Sort paragraphs into the correct sequence.
  11. 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:

How to take advantage of the new content types that are not officially released but already available at GitHub?

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 step A: Upload the h5p file
Fig. 02: H5P library installation step B. Start to create a new content type. But instead to choose from the list of content types click on the upload button to get the previously downloaded h5p file into your h5p installation.
H5P library installation step D: Screen after you have successfully uploaded the new library.
Fig. 04: 5P library installation step D. Screen after you have successfully uploaded the new library. Even if you do not need the content provided with it you have to click „Create“ and save it. Then the new content type with its library is integrated in your H5P installation. From now on you can create content with it via searching for this content type as figure 02 shows.

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.

Requirements

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:

macOS
  1. Hold down the command key and hit the spacebar (CMD-space). This opens the spotlight search.
  2. Type „terminal“
  3. Click on the Terminal application that looks kind of like a black box. This will open Terminal.
  4. 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.

Linux

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“.

Windows

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:

  1. Click Start.
  2. In „Search programs and files“ type: powershell. Hit Enter.

See also the wikiHow Tutorial.

Install necessary programs

Git

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:

h5pcli

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.

Type 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 1: Screenshot of the GitHub repository of an H5P content type.
Fig 05: H5P Library Installation Step 1. Go to the h5p content type and copy the URL of its GitHub repository.

H5P Library Installation Step 2: Clone the h5p project to your computer

H5P Library Installation Step 1: Screenshot of the command-line interface with the git clone command.
Fig. 06: H5P Library Installation Step 2. Fire up your CLI Software (which is, in my case, on macOS the Terminal) and write git clone <URL of content type at GitHub>.

H5P Library Installation Step 3: Check if everything went smoothly.

H5P Library Installation Step 3: Terminal screenshot: Checking if everything went smoothly.
Fig 07: H5P Library Installation Step 3. You will get a similar result as shown in the screenshot.

H5P Library Installation Step 4: Enter the new downloaded h5p folder

H5P Library Installation Step 4: Terminal screenshot: Changing directory.
Fig 08: H5P Library Installation Step 4. The next command we need to execute inside the downloaded folder. Chance, therefore, the directory with the following command: cd <name-of-the-downloaded-h5p-folder>. (You don’t have to type the full long name of the folder. After starting you can type TAB and the program will complete the name.)

H5P Library Installation Step 5: Check if there is a package.json file inside the folder

H5P Library Installation Step 5: Terminal screenshot: Checking if package.json is inside the folder.
Fig 09: H5P Library Installation Step 5. Now we need to list the content of this folder to see if the package.json file is included. If so continue with the next step. If not then you can skip some steps and continue with step 9.

H5P Library Installation Step 6: npm install

H5P Library Installation Step 6: Terminal screenshot: Waiting for finishing the "npm install" command.
Fig 10: H5P Library Installation Step 6. Now, we can call the node package manager and install the h5p library with npm install. This will do hard work and look for all the necessary packages. So stay tuned and be patient. In my installation, it takes an exceptionally long time of 4-5 minutes.

H5P Library Installation Step 7: check if there are any vulnerabilities

H5P Library Installation Step 7: Terminal screenshot: Checking if there are any vulnerabilities.
Fig 11: H5P Library Installation Step 7. When you get a message „found 0 vulnerabilities“ then you have a lucky day.

H5P Library Installation Sidestep 7a: npm audit fix

H5P Library Installation Step 7a: Terminal screenshot commented: When to use "npm audit fix" and when not "npm audit fix --force".
Fig. 12: H5P Library Installation Sidestep 7a. Here is another case. As you can see there are 20 vulnerabilities. You can try npm audit fix but not with --force as this destroys your packages because of breaking changes of newer package versions.

H5P Library Installation Sidestep 7b: Continue even if not all vulnerabilities are fixed

H5P Library Installation Step 7b: Terminal screenshot: Continuation even if not all vulnerabilities are resolved.
Fig. 13: H5P Library Installation Sidestep 7b. After waiting for several minutes I got many lines where the program tried to fix the problems. But only two low vulnerabilities were solved. Originally I have then tried npm audit fix --force which asked me to install several new updated software, like the new version of nodejs and other packages. In the end, it didn’t work out as the result was not compatible anymore with this h5p content type. So I continued without fixing all problems and was lucky.

H5P Library Installation step 8: npm run build

H5P Library Installation Step 8: Terminal screenshot after completing "npm run build" successfully.
Fig. 14: H5P Library Installation Step 8. Let go back and resume the installation process with npm run build. With this command, the h5p package will be compiled.

H5P Library Installation step 9: h5p pack folder library.h5p

H5P Library Installation Step 9: Terminal screenshot: Packing library with the h5pcli tool.
Fig. 15: H5P Library Installation Step 9. The last step in the compilation and bundling process is to generate to h5p library. For this last command, we need to step out of the directory of the h5p content type with cd ... (There is a space between after ‚cd‘.) This step is not shown in the picture because I have cleared the output in the Terminal to get a better view that is not so distracted from all the other commands.

The last command uses the h5pcli: h5p pack <name of folder of the content type> <library name>.h5p (Between the two names is a space. The name of the library is not essential but must have the file ending „.h5p“. If you are omitting the library name completely h5p generated it with the default name „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

H5P Library Installation Step 10: Screenshot of the WordPress library administration interface
Fig. 16: H5P Library Installation Step 10. Upload the newly generated library file into your H5P installation.

Finished. When you scroll down your list of libraries will find the new h5p library.

H5P Library Installation finished: Screenshot displaying a list of installed libraries with the new library successfully uploaed.
Fig. 17: H5P Library 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 Step 8a: A commented screenshot of the h5p folder directory on macOS: Where are the files that include a version number?
Fig. 18: H5P Library Installation Sidestep 8a. In these three files, I had to upgrade the version number. I do not know if this process is correct. Maybe it will result later in some problems. But I hope it will work until this content type will be released officially.

H5P Library Installation Sidestep 8b: Changing the patchversion number

H5P Library Installation Step 8b: Screenshot of the program editor Visual Studio Code demonstrating how to change the version number.
Fig. 19: H5P Library Installation Sidestep 8b. This screenshot of my Visual Studio Code editor gives you an impression where you have to look for the version number. In the two other files is the version number a little bit different situated but you will it find always on top of the file.

Of course, you have to change the version number before you pack the library (before the last command with h5p pack …).

Fußnoten

  1. This Wakelet is open to the public. Join us to watch & report future H5P developments!

Von Peter Baumgartner

Seit mehr als 30 Jahren treiben mich die Themen eLearning/Blended Learning und (Hochschul)-Didaktik um. Als Universitätsprofessor hat sich dieses Interesse in 13 Bücher, knapp über 200 Artikel und 20 betreuten Dissertationen niedergeschlagen. Jetzt in der Pension beschäftige ich mich zunehmend auch mit Open Science und Data Science Education.

2 Antworten auf „H5P library installation via GitHub: 10 steps to get new content types not yet released officially“

Hi Peter!

This is a very well written post! You might have added Try to understand what you are doing instead of blindly typing into your keyboard or pasting commands. Things can break. No backup, no pity! every other paragraph 🙂 Apart from that, the one thing that I would not recommend is to bump the version number in order to install libraries (unless you know what you’re doing).

The scenario that you are describing is to use some bug fixes or new features that you find in the official repository. There’s absolutely nothing wrong with that, but you need to aware that there may still be bugs lurking in a dark corner as usually the so called „master branch“ has not yet been fully tested, may contain preliminary changes, etc. Let’s say you have checked all that and you’re confident to install it. Great! You are about to take your first step into a world of opportunity.

Version number confusion

Now let’s have a look at the version numbers. Let’s assume the official release version is at 1.0.0 and there are some changes in the repository that you would want to use. Now you bump the version number to 1.0.1 (or 1.1.0 depending on what the changes were – a topic in itself) so H5P will install your changes. So, now you are at 1.0.1. Then the developer of the content type may add some more things, fix bugs, etc. Then he/she releases that version as 1.0.1 and all people but you will find that update on the H5P Hub. Why? Because H5P notices that you already have version 1.0.1 installed and don’t need the update. You’d have to wait for the official 1.0.2 or some other later release until you’d see the official version. Or you’d have to get the latest changes manually yourself, would bump to 1.0.2 and be out of sync again. Things would even get worse if you continuously install unreleased updates and bump the version number each time. The version numbers deviate from one another even more.

Interjection

Try to understand what you are doing instead of blindly typing into your keyboard or pasting commands. Things can break. No backup, no pity!

So, what’s the alternative?

The H5P plugins have a „development mode“ that they can be set into. When in development mode, H5P will not compare the version numbers of libraries in order to determine whether that library should be installed. It simply will install whatever comes it’s way. And this requires caution!

When you upload content, H5P will check if it already has the required libraries installed, and if not install them from the file. That would overwrite your changes. And, sneakily, those libraries may even come as dependencies that you don’t have in mind and by installing H5P.CoursePresentation you’d also install H5P.TrueFalse for instance – so if you had made changes to H5P.TrueFalse, they’d be gone On top of that, we’re running into matters of server performance that’d be wasted by installing everything over and over.

Long story short: You should only set H5P into development mode when you need to install your patched libraries, and then you should put it back into normal mode.

How to set H5P into development mode?

The H5P plugins for WordPress, Drupal and moodle all just require a simple „switch“.

It’s easiest for Drupal 7: It’s right in the H5P settings and labeled „Enable H5P development mode“.

For Drupal 8 it’s also quite convenient if you are using the utility called „drush“ (see https://www.drush.org/ for details). I have to admit that I have never done this, but drush config-set h5p.settings h5p_dev_mode true should set the required setting in Drupal’s database that will tell H5P to be in development mode. Consequently, drush config-set h5p.settings h5p_dev_mode false should revert this. If you find your way through databases, you can go to the config table, search for the h5p.setting entry and set the h5p_dev_mode property manually.

For WordPress, there’s documentation at https://h5p.org/wordpress-customization. Essentially, you would add the line define('H5P_DEV', true); to your wp-config.php file if you have access to that. Alternatively, you could also add it to the functions.php file of your theme that you should be able to edit from the backend of WordPress in the theme editor, too. But be careful where you put that line there! I have heard of people who just put it on top rendering the PHP invalid and thus crashing their site. It needs to go after
<?php

Finally, there’s moodle. It’s similar to WordPress. You would add $CFG->mod_hvp_dev = true; to the config.php file and remove the line (or replace true with false) when you’re done. Caveat: I am not aware how the moodle core integration of H5P that was done by moodle (aka „blue H5P“) works – it may use the same variable, it may work differently or not at all.

Final words

Try to understand what you are doing instead of blindly typing into your keyboard or pasting commands. Things can break. No backup, no pity!

Thank you, Oliver! At first, I thought to remove the last heading „A final remark“. But finally, I left it, otherwise, your valuable addition would not be understandable.

But I have added two warnings with your mantra „Things can break…“ and have also recommended not to follow my hack with the version number.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Captcha loading...