- For H5P there is Transcript. There is Timekeeper. And not there is Tabs.
The Hochschule Hannover sponsored the new Tabs content type. It doesn’t do much, but I hope the right things. Like Accordion, Tabs enables you to let users explore content one after the other. Unlike Accordion, you cannot only use text. You can fill tabs with any content combination that Column allows. To be fair, Accordion could do that, too, but the H5P core team still needs to review the pull request.
And that’s everything that Tabs does. Close to. There’s a little more than meets the eye. Tabs supports the xAPI, so in other words: results will end up in gradebooks. You can define how much of the available horizontal space the tabs will take up. If less then 100%, you get the typical tab look. And you can decide whether the content type will display the tabs on top or left of the content. Or if you want to leave that to H5P and the screen size. If you want to, set a background color that matches your page, hide the action bar, and then Tabs blends into your page. Well, here it is white anyway 🙂 And after a small update after release, as of version 1.0.1 you can replace the “H5P blue” default color and set the color of the tabs. That color will also be used for buttons in subcontents, etc. where you’d normally have the default “H5P blue”.
Want to use it already?
I will ask the H5P core team to review the content type. Afterwards, they should release it on the H5P Hub, but this process usually takes some time. If you want to use the content type right away, look for the Reuse button underneath the content. Use that button to download the demo content, and then upload the .h5p file onto your H5P platform in the H5P Hub. Please note that you will need to have permission to install H5P libraries. Otherwise, you cannot install the content type this way. In that case, your system admin will need to assist you.
The source code is available as well:
Any future plans for that content type?
You may wonder what I intend to add to this content type. I don’t know. Could be something, could be nothing at all. I am open for ideas either way. But please keep something in mind: I coded this content type, but it’s not mine. I coded it at a discount rate as I usually do if the result bears an open source license. I’ll take care of all the change requests that the H5P core team may have to bring the content type onto the H5P Hub. Additionally, I suppose that I will find time to help you on the H5P forum if you have questions. That’s what I usually do anyway. But if you claim free support as if it was your right, you’ll most likely get a “no” from me. The same applies if you expect me to add features pro bono to solve your specific problems. I may add things, but at my own time – or expect you to toss me a coin. I hope you understand that. Not all do, as I know from bad experience.
Can you make a Tyrannosaurus content type ? 😉 Seriously thanks for the 3 Ts especially Tabs. I’m dusting off my H5P chops for a workshop in 2 weeks and eager to show how one uses un official content types.
Thanks for sharing your work, Oliver
You’re welcome! And sure, what should that Tyrannosaurus content type do? 🙂
This feature is exactly what I was looking for for years, even better than an extended version of H5P-Accordion!
I hope the system admins at my university will make it possible to include the needed libraries in “our” moodle.
Thank you so much for your effort!
It will eventually be available on the H5P Hub, too. That would probably make things easier.
Thank you so much for making this! Have been trying to find an alternative to display h5p embed under tabs for a long time. I have one question. When I have interactive videos (made with youtube links) under tabs and embedded the Tab content type in Canvas, the videos are not resizing in response to the window resizing. Any suggestions are much appreciated. Please let me know if more information is needed. Thanks!
How do you include the content in Canvas?
I grabbed the embed link from wordpress and pasted it in the Rich content editor. It is resizing correctly when I am in wordpress but the video gets cut off if I reduce the screen size in Canvas. Thanks! I can send a screenshot if needed.
H5P requires the resizer script (see full H5P embed code) to be running properly – in general, not only for Tabs. If the rich text editor filters out that script (what they usually do to prevent cross-site scripting), then the experience is likely to be as you describe it.
There’s nothing that any H5P content type could do to prevent this.
Thanks!
Hello Oliver, I noticed that the video embedded under the second tab doesn’t have the Enable Full Screen button. Is this something that can be changed? Thanks1
No, it can’t. Sorry. Making subcontent go to full screen can cause issues, and that’s why you should not find that option for any H5P content that runs as subcontent – Check adding a video to Course Presentation for instance. And if you find that option, rest assured that iOS users may run intro trouble …
Thank you for your quick response!
Hi Oliver !
I’m using the latest version of Tabs on my WordPress which is updated.
I’ve noticed that if I insert an image slider in any tab, it prevents the content-type from working : nothing displays at all. If I remove the image slider, everything is back to normal.
Here is the console log (on Chrome) with Image slider used in tabs :
0697eb163c3c7581d2382f2cb99d7c52e1c92e49.js:333 Uncaught TypeError: Cannot read properties of undefined (reading ‘hasClass’)
at C. (0697eb163c3c7581d2382f2cb99d7c52e1c92e49.js:333:42)
at C.call (h5p-event-dispatcher.js?ver=1.15.6:209:26)
at EventDispatcher.trigger (h5p-event-dispatcher.js?ver=1.15.6:240:12)
at Column. (0697eb163c3c7581d2382f2cb99d7c52e1c92e49.js:6486:20)
at Column.call (h5p-event-dispatcher.js?ver=1.15.6:209:26)
at EventDispatcher.trigger (h5p-event-dispatcher.js?ver=1.15.6:240:12)
at o. (0697eb163c3c7581d2382f2cb99d7c52e1c92e49.js:27882:107865)
at o.call (h5p-event-dispatcher.js?ver=1.15.6:209:26)
at EventDispatcher.trigger (h5p-event-dispatcher.js?ver=1.15.6:240:12)
at n.activate (0697eb163c3c7581d2382f2cb99d7c52e1c92e49.js:27882:108609)
18:14:05.118 h5p.js?ver=1.15.6:2231 Uncaught TypeError: Cannot read properties of undefined (reading ‘trigger’)
at H5P.trigger (h5p.js?ver=1.15.6:2231:16)
at H5P.Dialog. (h5p.js?ver=1.15.6:127:15)
at H5P.Dialog.dispatch (jquery.js?ver=1.15.6:2:28337)
at v.handle (jquery.js?ver=1.15.6:2:25042)
at Object.trigger (jquery.js?ver=1.15.6:2:27423)
at H5P.Dialog. (jquery.js?ver=1.15.6:3:3107)
at Function.each (jquery.js?ver=1.15.6:2:5257)
at init.each (jquery.js?ver=1.15.6:2:2013)
at init.trigger (jquery.js?ver=1.15.6:3:3083)
at h5p.js?ver=1.15.6:1080:24
Here is a recording of my screen (with and then without Image slider) : https://recordit.co/eRJcjCcUQM
Is this something happening only on my hand or can you replicate it ?
Thanks in advance for your help !
Isabelle
Please try the latest version of Tabs which is 1.0.3.
Hi Oliver,
Many thanks for your quick fix and reply !
I’ve downloaded and re-uploaded on my WordPress the demo content from this page (berry-tabs-131.h5p) to upgrade to the patched version 1.03 but my library is still on version 1.02. Is there something else that I should do to upgrade ?
Isabelle
Hi Isabelle!
The demo content definitely contains version 1.0.3 of Tabs. What comes to my mind: Have you trouble with some caches maybe?
Best,
Oliver
Hi Oliver !
Hurray ! I made it ! I have deleted the 2 tabs activities that I had (the demo content and my first content) and re-uploaded the demo-content from this page and the library was upgraded to v.1.03 this time. I have inserted a slider and it works perfectly.
Thank you so much for your help and for this very handy content-type !
Best,
Isa
That’s weird. This should not have been necessary. Version 1.0.3 should have been installed over 1.0.2. But if there’s an issue, it’s with H5P itself, not the content type.
Yes, that is what I thought as well. I have had problems with upgrading some H5P libraries lately ; maybe it is related.
BTW, I’m really enjoying this content-type as you can see : http://g.recordit.co/2QKrzZ5Bu7.gif 😀
Cheers,
Isa
Nice 🙂
Hello Oliver, hope this message finds you well. Another question came up when using the tab. Is it possible to eliminate the white space below the tab where the content length is shorter than other tabs? Thanks!
Sorry, I am not sure that I understand what you’re asking for. Could you share a screenshot somewhere maybe?
Thanks for getting back to me.
Tab 3 [has more content]: https://iastate.box.com/s/rxs4km3ib0vqeh2ee02fg6570yr4akgv
Tab 2 [has less content so the Previous and Next button are way down the page]: https://iastate.box.com/s/y3yxhpgyjgwgmwq5w5eczvpnz6zsvdn6
Where are you running this how? The content linked to each tab should resize, of course. Can’t tell why this is not happening on your site. Ideally, you’d share a link.
I created it in wordpress and copied over the embed code to Canvas Free for Teachers. Does the content type version matter? Currently, we have 1.0.1. Thanks!
I updated the version in the library but found that the tabs are not displaying correctly on the pages. Is it possible to revert to the previous version?
Thanks!
There’s your issue.
You cannot only use the embed URL only. It is necessary to also add the link to the resizer script that is part of the whole embed snippet. Otherwise, there is no way for the H5P content to tell the iframe to resize if necessary. That’s not only true for Tabs, but for any H5P content.
Even if you also copy the HTML code for the resizer script, it is possible that the platform (here Canvas) filters it away for security reasons – allowing to run arbitrary JavaScript is not advisable, even though the piece of JavaScript from H5P core is harmless.
Thanks! That makes sense. Any directions on the version issue? Is there a way to revert to the previous version of the tab content?
It is displaying the following.
https://iastate.box.com/s/pr6mdgt7hrr5qdhp0og2e6ry4bbpex0f
You can always get the code at https://github.com/otacke/h5p-tabs and build a version from any commit as you like but that should not influence the resize issue and you’d meet bugs that were fixed meanwhile.
Thank you! I wasn’t adept at coding. Is it possible for you to share a previous version of that tab content type?
Sorry, no, I will not do that.
Thank you for your time. Your input is much appreciated. I will do some more work on this.