- For H5P there is Transcript. There is Timekeeper. And now 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.
Hi Oliver !
I’ve created a mega Tabs content to test how each content-type displays in a tab. (I did the same mega content with Interactive Book first).
I’ve found issues with some of them in Tabs. I report them to you because they may help you, not as a polite request to fix them. I know that this content was developed for a client and that you don’t have time nor plans to improve it, but still I thought that this may be of use.
First, here is the content : https://www.autableau.net/wp-admin/admin-ajax.php?action=h5p_embed&id=1596. Please don’t mind the texts in there (the content was in an Interactive Book before and was meant for it ; I have simply copied-pasted the sub-contents).
Here is the download link : https://www.autableau.net/wp-content/uploads/h5p/exports/redesigning-tabs-1596.h5p
Issues that I found are mainly related to Content-Types relying on images :
– Chart : the chart isn’t display
– Collage : the collage isn’t displayed
– Image Hotspots : the image is not displayed
Then there are issues with contents sizes that change suddenly or content showing partially / not at all :
– Course Presentation : appears as a small block, but when you start interacting with it, it becomes suddenly very big, expanding to the entire available space.
– Dialog Cards : the cards are cut off (partially displayed)
– Single Choice Set : the container appears with the progress bar under, but the content is stretched in a blank strip.
– Drag the Words : the “drop aeras” are tiny and measures about 30px, the draggable phrases are on top instead of being under or on the right. But as soon as you interact with one draggable, everything resizes and falls back in place.
Finally, there is an issue with Drag and Drop only if Fullscreen mode is checked : the icon to switch to full screen should probably be removed because clicking on it crashes the Content (+ some errors appear in the console log)
I hope that these issues are not only on my hand (as I have altered the CSS, it may be so) ans that you can also reproduced them.
Cheers,
Isabelle
Hi Isabelle!
Thanks for bringing that to my attention. I have already released a fix (v1.0.4).
However, the full screen issue is an issue in Column, not in Tabs – you can easily verify that claim by pasting your Column subcontent that contains the Drag and Drop Question as a standalone content. It will show the same buggy behavior. While I could add counter measures to Tabs easily, any other content that uses Column as subcontent would need to do the same. I know that Interactive Book does, but I don’t see the point in not doing this in Column to fix it once and for all.
Just created https://github.com/h5p/h5p-column/pull/63 and https://h5ptechnology.atlassian.net/browse/HFP-3673. I don’t think I cannot do much more than this, basically delivering the fix to the doorstep for free.
Cheers,
Oliver
Hi Oliver !
I can’t believe that you have already issued a complete fix… As I said, I was not reporting the issues to have them fixed – I really meant to help in “debugging” (if there were bugs at all…) But I can’t thank you enough for this fix. I have downloaded the v1.0.4 and every issues that I pointed out are resolved as you can see by yourself on my “mega tabs content” : https://www.autableau.net/wp-admin/admin-ajax.php?action=h5p_embed&id=1596.
You are absolutely right about the “fullscreen” bug in Column. I assumed that Interactive Book and Column were working the same way, but was wrong. Thanks for your pull request too 🙂
By the way, I have a suggestion : why don’t you have a “Paypal Donate Button” here ? People like me who don’t have much but would like to “toss you a coin” as a thank you, would gladly do so. Even if it is not much, you know what they : “small streams make big rivers” 🙂
Cheers,
Isa
That must be my German side: You found a problem with some engineering solution – that needs immediate fixing 😉
Interactive Book uses Column, but for some reason, the “fix” was limited to Interactive Book and not applied to every other content type that might use Column. That’s what my pull request would change.
Donations cause more legal/fiscal trouble for freelancers than good in Germany. But first and foremost, I am part of an open community, not just a coder for hire, so I don’t want to put a price tag on everything.
Hello Oliver,
I found two small issues, first by using the cp-content inside the tab. It brings always a scroll-line on the right, which not looks very nice. We are using Tabs (1.1.0). Second issue is, that an apostrophe like “Peter’s” is not working as a header of the tabs. (Same issue as long time ago inside the matching-content with special signs.)
Tab ist a very nice content! I love it!
Regards Bernd Brockhaus
Fixed already, thanks for reporting.
Fantastic, thank you very much! Just added the new version to our system 🙂
Hi,
thank you very much for your work! Is there any possibilty to use Tabs in the interactive book?
Regards André
That’s a question that you will need to direct towards the maintainer of Interactive Book, which is H5P Group.
Hello,
I really like this content type and added it in Lumi desktop to edit it.
I now want to create a link like <iframe src="… to embed it in my javascript (I am still a beginner at this). Normally Lumi Cloud or h5p.org would create me that link. But for some reason I cannot upload this new content type.
Is there another way that I can create that link?
The reason why you cannot upload that content type is because both, Lumi Cloud and h5p.org do not offer it for use.
If you want to have an embed link to use the content, you will either have to find a public site that offers to use the content type, ask Lumi Cloud to add it to their service (h5p.org is for testing only, not for hosting your content, you should have noticed the respective notes), or you will need to host H5P yourself on WordPress, Drupal or any other platform that supports H5P.
I am having the same issue with Lumi–it’s missing the library file “H5P.Tabs-1.1.” Can we have that to upload to the library manually? I think us desktop Lumi users can do that.
Have you uploaded the demo file in Lumi as described in the post? That demo file contains everything that’s required.