Experimenting Via the H5P Back Door

One of the many reasons we like H5P is that the thing it produces in the end is a package of web standard HTML5 content that can be used in more than a single publishing platform. Yes, it will not suffer the fate of Flash.

And the ways you can create H5P via a Learning Management System, WordPress (meaning Pressbooks too), H5P.org, H5P.com, even the Lumi desktop app, means the kitchen appliance is the same wherever you cook.

What is not obvious is that depending where you are cooking, you may not see the exact same set of tools (the demo site only gives you 8 while H5P.com has more than elsewhere), and as I found out the hard way, the plugin in WordPress/Pressbooks plugin does not have all the ones listed as content types.

And then, another lesson learned, is the content types that make use of more granular tools, e.g. Column, Course Presentation, Branching Scenario, Interactive Video offer some, but not all you might expect.

Much of this is because of the “P” part in the name- as a content type and a tool, H5P makes use of “packages” and is not a single monolithic software.

And thus, sometimes when confronted with the situation of “why can’t I do this in H5P?” possible answers are found in the community forum. You might be able to achieve what you want via a back door.

Below are a few recent efforts to try that door. As they say in the commercials, “your mileage may vary”.

Bringing in The Advanced Fill in the Blanks (via the Back Door)

One of our project teams asked for suggestions for a particular type of exercise. It usually is phrased as “What is the best H5P tool to use?” for which I generally respond with 3 or more options. As an adjective, here “best” is rather suspect.

But in this case, it seemed that the Advanced Fill the Blanks I suggested was top of the list for the way it offered possible options via a drop down menu (note that the example on H5P.org is broken, the one inside the tutorial functions properly) (I told them this).

I felt like my job was done.

Until I heard back.

I do not see the “Advanced Fill in the Blanks” tool in Pressbooks (adding new H5P). What’s the trick for finding it??

I did not even check! #FAIL! I did confirm that Advanced Fill Blanks is not present in Pressbooks (or the WordPress plugin on a regular site like here).

But here is a back door I found in the H5P forums. First, go to the example in the tutorial. Use the Reuse button and click to download the content as a .h5p file. In the H5P interface for creating new content, use the Upload option at the top, and when prompted select and upload this .h5p file.

Shazam! You have a working version of their demo. Now just wipe out their content and replace with your own.

Is this risky? (someone check me on this) I do not think so because the functionality is all self contained in that “package” and anything it needs to edit comes from the H5P libraries present.

I might suggest this if the question type really cannot be done in satisfactory way by any other tool.

This is also a way to bring content types into h5p.org that cannot be created there. I imported an Image Juxtaposition example from this web site into my H5P.org account, and look what I could do.

Adding Image Sequencer To The Column (via the Back Door)

For another request someone asked why the Column Content type, which lets you compile many different H5P activities (plus text, images) into a single H5P, does not let you use the Image Sequencing content type.

It’s description reads:

Organize your content type into a column layout with H5P Column. Content types that address similar material or share a common theme can now be grouped together to create a coherent learning experience. In addition, authors are free to be creative by combining almost all of the existing H5P content types.

https://h5p.org/column

The trip point here is “almost.”

It’s not listed, but by inspecting the menu in the Column tool, there are 29 content types you can put in a Column:

Accordion, Agamotto, Audio, Fill in the Blanks, Collage, Course Presentation, Dialog Cards, Documentation Tool, Drag and Drop, Drag Text, Guess the Answer, Table, Text, Iframe Embedder, Image, Image Hotspots, Find the Hotspot, Interactive Video, Link, Mark the Words, Memory Game, Multiple Choice, Question Set, Single Choice Set, Summary, Timeline, True/False Question, Twitter User Feed, Video.

Image Sequencing did not make the cut. But is it possible? My answer (as often) is “I dunno” (which implies “I’m going to look it up”).

And again the H5P forums came through. You can insert content into the column via the Iframe Embedder.

Not being clever enough to make a demo for the Image Sequencer, I downloaded the planet sizing one from H5P.org and imported it into my Pressbooks test site. Now here is a nifty trick. Your H5P is sitting in the H5P content library. How can you get a sharable link?

Get a copy of the embed code:

The URL for this item is inside the src="..." part of this HTML mumbo jumbo. Try it out!

So I make a test column now, add an iframe embedder content type, and enter this URL. It. Should. Work.

Nope.

I see a big empty space with the words “Content unavailable” in it.

I am determined though, so I try a different tactic. I return to the demo of the Image Sequencer on H5P.org, look at the embed code, and find this URL in the src=”” tags https://h5p.org/h5p/embed/107824

Now see what I get with my Column using this URL in the IFrame Embedder.

Well it works now (well it does seem to jump to the embed?)! But this is only to show that it works as I heed the warnings that relying on H5P.org to publish content is not reliable.

I did post a bug report and the ever vigilant Oliver Tacke responded that it’s a bug because of the way WordPress URLs user ampersand characters… and that it was submitted as a change request.

As he notes, even if it works, this may not be reliable, and other comments suggest this might create some kind of H5P inception to have an H5P content type embedded in another.

I would consider this one a high risk, and maybe a better option is to nicely ask in the H5P feature requests to add Image Sequencer to the column tool.

Update: A Back Door for the Back Door

The issue here is that because the IFrame Embedded cannot work with URLs from WordPress, the H5P content for the Image Sequencer would need to live elsewhere. The only way I got it to work above was via H5P.org, and as it states everywhere, that is not a reliable option. The site is not meant to be used or production web sites.

But here is another approach, but it requires you have a reliable place to put a single HTML file, like a web server that you can upload files to.

So I still have the .hp5 file I had downloaded for the Image Sequencer. I use the Lumi desktop H5P editor to open this file. Now, I use the File -> Export option to save my H5P as a All-in-One-HTML file:

I saved it as a file named planets-sequence.html (it is 891k so not too large). I need a reliable internet server I can put this file. It cannot be added to the Pressbooks Media library (not an allowable file type). But since I am a web geek and have my own domain, I uploaded to my own web site at https://cogdogblog.com/stuff/planets-sequence.html where you can see it includes all the working parts of the H5P content.

Now, back in my H5P Column content type, I can use that web address in the iFrame Embedder tool. You can see it as the second sequence example in my test Column.

This would only be viable on a production pressbooks if the HTML file was uploaded to a reliable web address. The risk factor is still high.

Take the Back Door or Not?

I offer these less as solutions and more as an example of how H5P is an open and also not singular platform (plus that if you look for answers and submit suggestions in the H5P forums you might get both).

But also I’d like to suggest to not always be limited or think the dead end is reached. Almost always in technology there is a back, side, or even a hidden front door. You just should look (or ask).

I love looking for the irregular doors.

---

Image Credit: Geograph.org.uk photo “Sign at the Green Dragon” by  Basher Eyre shared under a Creative Commons CC BY license, modified by Alan Levine to change the text to something H5P appropriate, plus add the H5P/PB kitchen logo inside the door.