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:
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: 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:
- 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
macOS
- 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.
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:
- Click Start.
- 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 2: Clone the h5p project to your computer
git clone <URL of content type at GitHub>.H5P Library Installation Step 3: Check if everything went smoothly.
H5P Library Installation Step 4: Enter the new downloaded h5p folder
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
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
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 Sidestep 7a: npm audit fix
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
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
npm run build. With this command, the h5p package will be compiled.H5P Library Installation step 9: h5p pack folder library.h5p
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
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 …).
Fußnoten
- This Wakelet is open to the public. Join us to watch & report future H5P developments!
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 trueshould 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 falseshould 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 replacetruewithfalse) 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.