👨🏻‍💻 Harry Kalantzis Instructional designer

Create image hotspots in H5P with this workaround

I very much enjoy working with H5P everyday, but the user experience can be painful sometimes and the Image Hotspots content type is a good example of this. While the content authoring side is getting improved (despite positioning hotspots on an image still being a pain), the end user’s side hasn’t been improved much: the size of the hotspots is not configurable; once you click on a hotspot, the content appears through an unnecessary slide-in animation; and when the content behind the hotspots is just text, it looks extremely small. The latter is what frustrates me more, because it makes me to want to format text using h2. It does make text bigger, but also bold because h2 is meant for headers.

I recently came across an example of an H5P course presentation made by the Core team. The Content Management screen includes a screenshot of the H5P.com interface and some hotspots (in blue) which, once clicked, display some content in a much nicer way.

The workaround

Here’s how they did it:

  1. In H5P, start with a Course Presentation.
  2. Insert the image on which the hotspots will be placed.
  3. Insert a text field.
  4. Add some content and check the box Display as button at the bottom.
  5. Once you click Done, your content will appear as a clickable blue hotspot.
  6. If you want the content to be a video, then, instead of the text field, click the video icon in the H5P editor and don’t forget to display it as a button. What’s even cooler is that when behind the hotspot there is a video, then the hotspot will show a video icon instead of the information icon (the same applies when you display quiz activities as buttons).

The example from the Core team has a pulse animation behind each hotspot. This isn’t provided by default in H5P and I suspect it’s just a animated gif that has been placed behind each hotspot.

Limitations

  1. If the image you added in step 2 is large vertically (e.g. a long screenshot of a page), then it will have to be resized to fit in course presentation, which means it will look smaller and any text on the image will be less legible.
  2. The clickable hotspots can only be blue.