Author: Oliver

Posted on

Show what you can do: With H5P.Portfolio!

Phew. This post is not going to be easy to write. Let’s start with the simple part.

There is a project called ePort.nrw. Three German universities are part of this project: Universität zu Köln, Universität Duisburg-Essen and Ruhr-Universität Bochum. The goal is to develop a digital portfolio solution for teacher education. That’s where I come into play. And H5P.

There already is a well known software called Mahara that is open source. Some love it, others not so much. I am in neither of those groups by the way. I have only glanced at it once and I don’t have an opinion here. The pedagogical expertise is at the ePort.nrw project and they wanted an H5P solution. Who am I to argue with that!? There were some wishes that I could not fulfill (yet?). That is because H5P’s architecture doesn’t allow some things. Anyway, here’s what we have come up with so far. You’ll not be able to see everything here however. Most of the effort was put into the editor.

That looks very much like Interactive Book, doesn’t it? In fact, its code was re-used. But it was re-written pretty much and we removed all the scoring features. And you will notice some differences, too.

Just to make sure this clear: This is not “Interactive Book Plus”. This content type has a totally different purpose, namely to allow students to create portfolios for themselves that they can share with others. That means that students are supposed to create the H5P content, not to consume it.

The differences to Interactive Book:

  • In the menu to the left, you can spot that there’s an extra level. You can have sub-chapters. And sub-sub-chapters. And you could even have more levels, but we restricted that to three for now.
  • You can see a hotspot navigation on top of some chapters. As an author, you can decide whether you want to have one. For each chapter, you can decide whether it should be accessible via a hotspot. And for each chapter, you can decide whether you want it to display the hotspot navigation. That should allow some nice visual extra navigation for a portfolio if you are more talented than I am 🙂
  • The chapters use so called placeholders to include sub-content. Those placeholders can have different layouts. They allow you to have two H5P contents next to each other, for instance.

And then there is the editor.

The common editor approach of H5P is form based. That’s often convenient. The editor of Portfolio offers a more graphical user interface instead. That allows you to easier grasp what your content will look like. To make that even easier, Portfolio features a preview mode like Branching Scenario. You will also notice an export button. You can use it to select chapters and export them to images, a PDF document or an MS Word document. The contents will be images though. Deconstructing H5P content and putting that into a text document in a decent way would be a project on its own.

On the left-hand side, you can see all your chapters. You can move them around by dragging and dropping. Or you can use the keyboard if you prefer. A popup menu allows to perform some more actions. You can delete a chapter, change its hierarchy level, etc.

Your content covers the largest amount of the editor. You can add as many placeholders as you like. Each placeholder can take up to three different sub-contents. We would have loved to put all H5P content types in there, but some don’t work well as sub-content. Someone would need to change their code.

For your sub-contents, you can choose from four different layouts. You can change the layout at any time. Also, you can change the order of the sub-contents by dragging them around or using the keyboard.

For each sub-content, you can choose to hide it. It will then get displayed with a lock in the editor. Portfolio will still store it, but not display it to visitors. Given that a portfolio may grow over time, this allows you to have some unfinished work in you content. A visitor will not yet be able to see it though.

Status quo

The content type currently is in a beta test state. You can plan as much as you want, you often still learn from actual users. It’s well possible that the content type may still change. And we hope there are no bugs hidden somewhere 🙂 Those would be fixed when found, of course.

Update July 2023: The content type has been in practical use and first improvements based on feedback have been implemented, e.g. being able to resize a placeholder’s width, being able to have one more level of chapters and some usability and accessibility improvements. You’ll find them as of version 0.7 that is now available.

Update August 2023: Some bugs were fixed, and one can now set the vertical alignment of content within a placeholder row, header and footer background colors, etc. The latest version is 0.9.6 now (or later if I sneak in more :-)).

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.