Using Hotspots and Invisible Buttons in E-Learning #296

Using Hotspots and Invisible Buttons in E-Learning #296

March 13, 2021 Off By JR

I have a back catalogue of small instructional design challenges and charrettes that I’ve been meaning to build into something bigger one day. That is obviously taking too long, so here’s a new idea. The Articulate E-Learning Heroes Community runs a weekly eLearning Challenge. I’ve mentioned before that often different IDs in different contexts will use different tools, and while I’ve used some of Articulate’s products, I’m primarily a Mac user. This means that a number of their products are not available to me. So instead, I thought, rather than being an Articulate eLearning Hero, that I could be an InArticulate eLearning Hero. So here it goes.

This week, your challenge is to show how hotspots and invisible buttons can be used in e-learning.

– David Anderson


Well I have to say, this one lead me down a bit of a rabbit hole. With H5P there are three basic hotspot type activities: image hotspots, find the hotspot, and find multiple hotspots. The first one has little icons that show you where to click for more information, like in the previous post:

The find hotspot activities make the hotspots invisible and make it a score based activity, a check your understanding. The find the hotspot activities are limited to plain text feedback on click, whereas the image hotspots allows you to add three types of media to a single hot spot: text, image, video. Not only that, but the image hotspots allows you to combine those media on a single hotspot click. This challenge asked about invisible hotspots, so I thought maybe there is a way to make invisible buttons for the image hotspots type. Here’s the proof of concept:

View the Proof of Concept

The long path

I first started with the icon, which allows you to choose a colour. I thought maybe if I made if transparent that it’d work. No dice, I was left with a white circle.

icon editor in h5p image hotspot

Next I thought I would be clever and use the custom image for the Hotspot icon. I made up a 75×75 px alpha png (transparent square) and loaded that in. It looks like it will work in the editor, but again, no dice, I was left with a white circle.

icon image h5p hotspot

From there, I exported a single .html from Lumi, opened it in Firefox and could see that the button actually has a white background!

So from here I figured I could go into the archive folders of the h5p activity and make the change there. And actually, I’m pretty sure I found the spot. As I mentioned in a previous post, you can see the contents of an H5P activity by changing the “.h5p” to “.zip” and then unpacking the zip folder. For this content type in particular you can go through H5P.ImageHotspots-1.9 / styles / image-hotspots.css and take a look at the cascading style sheets there. You’ll find the same item shown in the screen cap above .h5p-image-hotspot and the background can be changed. Make the change and you’re good to go, right?

Well not so much. What I found was that when I used the “compress” command to try to zip up all the files and folders again and then changing “.zip” to “.h5p” and upload it to Lumi or WordPress I got all kinds of errors. For the most part the errors stated I had files I couldn’t use in the set. That was weird. So into the H5P forums I go and I see a note about zipping the files not the folder. That makes sense, so instead of right clicking on the folder for the activity, I highlight to select the files and folders within and compress those.

Still no dice. After a bit of searching again I discover that the compress button on MAC OS actually injects some hidden files into .zip file set. So the general advice is to compress the file set using Terminal. This normally would have freaked me out. Before last summer I would have come to a dead stop. But last summer I had a chance to play around with command line using my Reclaim Cloud account, so the commands weren’t completely foreign to me. So, back to the H5P forums and I find this gem that explains the process. Back in business. I compress and upload the folder set successfully. This is it! I check it out and…

What the heck right? I unpack the folders on my desktop again and yeah, my change was still there. Why were these still white circles? Well, as it turns out, I think because I didn’t do anything to customize the library (the files that go into your WP install or Lumi when you “get” any content type) that the libraries that were installed were overriding my changes. So note to future self, check out the documentation on making custom libraries. I know this is possible with content types, as way back in the day there was a custom dialog card set someone made and shared in the forums which I still use to this day, without any weird overriding.

At this point, I was well past the time I had set aside for this little project, so instead I used Lumi to export the .html file, which contains EVERYTHING you need. Then I opened it with Sublime, used command+f to look for instances of “.h5p-image-hotspot” until I found a line that looked like the CSS I was looking for, made the edit, and FTP’d it to my sandbox. Not the solution I was hoping for, but kind of fun wrench turning so to speak.

If you’ve read this far, thanks for reading. I’m hoping to learning more about making these little tweaks to H5P to get other specific uses out of itin the future.