Whatsa Agamotto?

Of all the H5P Content Types, the one that does not indicate its purpose in the name is the enigmatic Agamotto. Before diving into the what, try this example that shows how maps of Europe change over time (from an eCampus Ontario Workshop Pressbook).

The Agamotto is used to present a series of images (if comparing just two images, the Image Juxtaposition content type might be better) that are interrelated or represent a series of the same object, maps, over time. Or it might be of use to show different layers of an object, machinery with different diagrams, keys to seeing different parts of a microscope example, or perhaps, like an example from H5P, showing something at multiple levels of zoom.

The key feature is that it can collapse many images into one interface, rather than asking a reader to scroll up and down a page, but also, that the images blend into each other as the slider is moved. Another useful feature is that the buttons on the stops for each can be labeled (like Years above) and explanatory text provided below.

I found only 3 Agamotto examples in the eCampusOntario H5P Studio. One for Medical Terminology looked interesting for putting a lot of materials into one space, but it could have been done as Course Presentation (and a side note, this like many other examples here lack metadata, and I can see is using images that are not open licensed). The other two examples used it more or less to present something like a comic, so more like a storybook. Or it could have use to show photos of the same location in different time periods to compare the effects of climate change.

I found an Agamotto from an H5P site for Queen Mary University of London that compared how a web page changed over time.

From my memories of studying Geology, I could see use for learning to understand mineral identification in thin section, and use of the polarizing feature.

In a Pressbooks I cannot even tell you how I found much less anything knowledgeable in the content, Atlas of Renal Lesions in Proteinuric Dogs, I saw uses of Agamotto to identify features in microscope images. It might take some scrolling, but see Figure 1G in the chapter on Amyloidosis.

I’d be keen to hear of other use cases… they are not really easy to find.

Before You Agamotto

One thing to keep in mind is that the Agamotto tool does not currently meet Accessibility standards. That almost rules it out, unless you add to your book enough of an image alternative description in text. And in many cases, I can see replicating the functionality in the Course Presentation content type. The thing you do not get is the cross fade between images, but you would also have the ability to add some interactivity in the mix.

I was wrong here! Agamotto is listed on the current H5P listing as meeting accessibility standards.

What’s in a Name?

But what about the name? The only direct answer I found was the name of a Marvel character. I tried Google Translate, which guessed (as I would) that Agamotto is Italian. It translated into English as… Agamotto.

Thanks Oliver Tacke for commenting with the origin story.

I cannot say I have seen enough Agamotto, have you? Again, reply below if you have come across a good use case (In our April Webinar, Steel Wagstaff did show one comparing bones, but I have not been able to locate it).

Or if you know Agamotto’s back story (Oliver?), chime in too.

More Examples

Oliver Tacke shared that a future version of H5P will offer a full screen mode button, see it in action on this German language example that includes a few Agamottos.

Also, see the femedtech Digital Quilt project for Agamottos that compare the front and back of four handmade quilts where squares were made by educators around the world (see as well some use of the Hotspot too).

Image Credit: Sidewalk Mystery flickr photo by cogdogblog shared into the public domain using Creative Commons Public Domain Dedication (CC0)


I totally agree. You can do very much the same with Course Presentation. The origin of Agamotto simply lies in a request from someone in the community who asked for exactly that feature. Personally, I prefer using (and combining) small tools that serve a single purpose over large all-purpose tools that can do “everything” at the price of complexity, but I also understand people who want everything under one roof. In the end, people can choose, and if they prefer Course Presentation, that won’t give me sleepless nights 😉

The name was simply inspired by the 2016 Doctor Strange movie. If you have a look at how Marvel chose to visualize how Doctor Strange uses the Eye of Agamotto to turn back time with a gesture with his hand and if you have tried that with this “image blender” content type, then it’s quite apparent. In retrospect, it might have been a better idea to name it after its function as usual, but that felt too boring 🙂 And, oops, I did it again

If you’re interested and Google translate does a good job with translating from German, you may also be interested in Peter Baumgartner’s post on Agamotto discussing its pedagogical potential.

Oh, and about accessibility: What’s missing? Last time I checked, Agamotto could be used with a keyboard, readspeakers announce the images’ alt tags and the descriptions when shifting to another image, … The slider handle might be a little too small, but it was modeled after the slider of Interactive Video and there nobody seems to be bothered.

Thanks Oliver for getting to the source story. I honestly like that it has a sense of mystery to its name.

And apologies, Agamotto is listed as meeting accessibility standards on the current list. I came across information elsewhere in my search that suggested not, but it must be dated. Will be updating the post.

And woah, AR! That’s impressive.

Aah, I see. You had a look at that a11y list. I think it was outdated for some time. I believed you might have found some problem.

If you ever need a sous chef as guest in the kitchen to talk about H5P things, by the way, just let me know 🙂

Leave a Reply