Arrrrrr, AR!

tl;dr There’s a new content type for H5P called AR Scavenger. It features Augmented Reality. You can download it here.

Quite some time ago, Nele Hirsch approached me, asking if it was possible to create a content type in H5P that would allow to feature Augmented Reality (AR). From scratch? Quite a job! But in the wonderful world of open source software, there’s a framework called AFrame that allows you to use 3D models in a browser. And then there’s another framework called AR.js that builds upon AFrame and allows to blend 3D models into a device’s camera image. Nele pointed me towards that one. And now there’s AR Scavenger that builds upon AR.js and brings it all together with H5P. It’s fair to mention that now would probably not have been now but later if the Hamburg Open Online University (HOOU) and the HAW Hamburg in particular had not partially funded this initial version.

What can I do with this?

Just take a look! Here’s the content type that you can use right away, but you’d have to use it on a device that has a camera attached to it. Then just find the markers down below with your camera – either on another screen or print them on paper.

Marker 1

This one should simply show you a True-False-Question, but on paper you could put any H5P content type here.

HIRO marker

Marker 2

This one should show you a 3D model of a duck that’s facing out of the marker, so if you have the marker on a screen, the duck should look right at you.

DUCK marker

What is it good for?

So, obviously you can define markers and either let H5P interactions pop up whenever a marker is found, or you can blend a 3D model with the camera image. Not much, but using that features

  • you could create some scavenger hunt game in a physical environment that requires students to find a marker to open a quiz related to the place of the marker,
  • you could add markers to exhibits in a museum to deliver additional information in an Interactive Video,
  • you could add digital 3D models to a physical book,
  • you could …

I bet you will come up with even better use cases …

How can I get it?

Ultimately, you will be able to install H5P AR Scavenger just like any other H5P content type from the H5P Hub, but the H5P core team will have to find some time for reviewing and releasing it first. Until then, you could download the required libraries (H5P.ARScavenger-library.h5p.) and upload them via the library settings page of your H5P plugin (not the H5P Hub where you’d upload content):

  1. Download the libraries file (
  2. In your H5P plugin, go to the library settings page
    • Drupal: Content -> H5P Libraries
    • moodle: Site Administration -> Plugins -> Activity modules -> H5P Libraries
    • WordPress: H5P Content -> Libraries
  3. Find the “Upload Libraries” section and upload the file that you just downloaded. You should get a message like “Added x new H5P libraries”.

Also, you can get all the source code on github, but it’s spread across a couple of repositories starting with H5P.ARScavenger (+ H5P.AFrame + H5P.AFrameAR + H5P.AFrameOrbitControls + H5PEditor.InputRow + H5PEditor.ARMarkerGenerator + H5PEditor.ThreeDModelLoader).

But there’s at least one catch!

H5P does not allow to upload gltf and glb files

H5P currently doesn’t allow to include files with the extension gltf or glb that are required for the 3D models. The H5P core team will allow this shortly. Until then, without some modification, you will only be able to use AR Scavenger for H5P content types.

On Drupal you can amend the list of allowed extensions in the H5P plugin settings, but not in other plugins. So, here’s the pull request to allow uploading gltf and glb files. The changes will point you to what you’d have to patch if you’re not running H5P on Drupal.  If you want to do this manually:

  1. Know what you are doing
    You cannot really break anything here, but if you’re new to this and make a mistake, you might get some sweat 😉
  2. Find h5p.classes.php
    On WordPress, it should be located at your-wordpress-path/wp-content/plugins/h5p/h5p-php-library/h5p.classes.php. On moodle it should be located at your-moodle-path/mod/hvp/library/h5p.classes.php. If you’re using moodle 3.9 and above including moodle’s H5P integration, it should be located at your-moodle-path/h5p/h5p/lib/joubel/core/h5p.classes.php
  3. Take a look at yourself and then make a change
    Add gltf and glb as shown at

H5P cannot access the camera

This one shouldn’t be a problem in many cases, but it might become one. Browsers are becoming more and more strict when accessing browser features such as video or microphones and expect HTTP Feature Policies to be in place (also potentially causing trouble for Audio Recorder). There’s a discussion about this topic related to H5P at I am proposing a code change (for WordPress to be adapted to Drupal and moodle) that will allow to use browsers’ features within the H5P iframe (unless the server is even more strict and doesn’t allow them).

If your browser (on your server) simply won’t ask you for the camera, you may need this patch. A suggestion can be found at The changes will point you to what you’d have to patch on WordPress yourself. There’s no suggestion yet for Drupal or moodle, but if you can code a little, it won’t be difficult to temporarily apply the same approach manually.

Questions? Maybe I have answered them already

Sponsor Note

Die initiale Fassung dieses Vorhabens wurde gefördert durch die HOOU und die Behörde für Wissenschaft, Forschung und Gleichstellung der Freien und Hansestadt Hamburg.

The initial release of this project was funded by the HOOU and the Ministry of Science, Research and Equality of the Free and Hanseatic City of Hamburg.

Surprise: Structure Strip

Do you know structure strips? I didn’t until I met a wonderful person who explained the concept to me. I learned that when students write texts, they often struggle with the proportions of the text’s sections. For example, the introduction might become as long as the main part. On paper (literally), structure strips can help.

Let’s say, an introduction should roughly take up 20 % of a text, the main part should span 60 %, the conclusion 20 %. Then a teacher could prepare a paper strip that’s divided into these three sections, where each sections takes up the required percentage of the strip’s full length. If students now put this paper strip next to a piece of paper, they now can see how much space a section should cover in relation to the others. In addition, the teacher could add some information to the section on the strip, e.g. what details must be covered or what to pay attention to in particular.

While this method seems to be pretty useful, doing it on paper comes with at least one problem: Students cannot simply change the length of their text. Once they have used up all the space for a section, they can’t add missing information or remove parts that are less important and could be spared in order to stay within the desired proportions.

H5P to the rescue!

I bet by now you can already guess where this is headed at: I have created a new content type for H5P in my free time. It allows you to create digital structure strips. ‘Structure Strip’ is not completely done, but the finishing touches should not take forever. It will look and feel something like this:

The virtual strip sections will either be next to each text input field or above them if there’s not enough horizontal space, e.g. on mobile devices. Students can write their text sections, and on clicking “check”, they will receive feedback on each sections’ length. Of course, there’s some slack that you can define, so students won’t have to hit a particular percentage precisely. There’s also a “live” mode that teachers can choose, so the feeback will be displayed within the section while students are typing instead of them having to click on the check button. Eventually, if the exercise is not supposed to be a self-assessment only, students can copy the complete text into the clipboard using a dedicated button and paste it somewhere else.

What’s missing before Structure Strip is released?

While everything is working fine, the user experience will become nicer thanks to the feedback I received from Jelena who works at Joubel.

mockup of a section of the structure content type

If teachers give hints for a section, the section may become quite large and so will the overall form. That’s why it will be possible to hide the hints and require the students to click on the question mark symbol shown after the section title. The hints will then show in a popup.

The sections will get some visual representation of how close the section text is to being complete. That’s the bar that you can see at the top of the image above.


And that’s it … The source code will be openly licensed as usual, so you can customize it as you like or add features that you think are missing – or you might want to hire me to do that for you, of course 😉