Using Tabs Interactions in E-Learning Revisited

Using Tabs Interactions in E-Learning Revisited

October 27, 2022 Off By JR

Back in 2020 I completed the elearning hero challenge, Using Tabs Interactions in E-Learning (2020) #272. There I talked a little bit about when tabs might be used, and highlighted how they could be done in HTML, or using H5P. Kyle Mackie’s was probably the first example I came across demonstrating tabs in H5P through his shared template (below)

I also provided an example in the previous post, also using the course presentation content type. In both examples, Kyle and I made use of the anchor in the course presentation to link to other slides. Also, in both of our examples, we left it on normal display mode so you can see it is slides. More recently, for specific interactions like these, I have been activating surface mode to hide the slides interface and give the appearance of tabs or buttons.

Enter new work from Oliver Tacke, H5P Tabs. This new type is a bit like a combination of Accordion, and an authoring interface like the Question Set, Document Builder, or Interactive Book (i.e. add new content section on the left and build a column content type on the right).

H5P tabs authoring interface. A field for the title at the top, tabs on the left, and a column on the right with content blocks.

Also similar to dialog cards, you add new major sections on the left and then build the content of each section using the subcontent type column (Screen capture from OTACKE Labs content in my instance of Lumi Desktop).

Oliver points out that one of the major perks of this content type, over say Accordions, is the ability to add images and other content types. This was a pretty big pain point with Accordions, leading to me trying to use the H5P Mods plugin for WordPress to change the editor to all for images. While I was able to get superscript, subscript, and other buttons working in H5P Mods – later made moot by the integration of MATHJax which I was thankful for – I was not able to get the images button to work.

So I guess my example is not e-learning specific in this case. Oliver does a better job showing off the use of hotspots and other interactive elements. While you might be able to build what I made using HTML and CSS, I like the ease of authoring and portability H5P affords here. I can already think of a bunch of places in online courses where you might use this new content type.

If you haven’t read Oliver’s blog about this new type yet, go check it out and try H5P Tabs for yourself!