You guessed right, I have a new H5P content type for you to have fun with: Idea Board Exercise. Or should I say 4 content types?
The project SDG Campus of the Hamburg University of Technology had the idea of using H5P for some virtual pinboard exercises – in Germany, the boards that are often used in onsite settings are called “Metaplan”-Wand, named after the metaplan method that was invented (and trademarked) by a business consultancy. If you need a general idea: have paper cards, write on them, pin them to a board and move them around as needed. Like here:
That’s not Idea Board Exercise, though, but just an instance of Idea Board. A single board that can run on its own. You can prepare cards if you want to (even using a plain text mode if you prefer), define what students are allowed to do, and then they can add and modify cards on their own. The state will be saved using H5P’s resume feature, yes. That’s not active here, however. So when you refresh the page, your edits are lost and you have to start from the beginning.
The development required some trickery for working around some limitations of H5P and some extra effort to reimplement things that H5P in theory has, but that are either tailored to usage in the editor or not accessible enough. And some things that you may notice, e.g. the slightly odd button/tooltip behavior (I know!), are a buggy part of H5P core which is not yet shipped in its latest version in all of the plugins. But I don’t want to bore you with technical details.
You can chain multiple Idea Boards together as subcontent in Idea Board Exercise. That content type enables you to add a task description to each board and to also define requirements that students need to meet before they can go to the next board. If you want to award scores for completing a board, you can. And finally, you can optionally also have a final page that can hold H5P Column content.
But I said four content types, correct. The cards that you create or that students create make use of EditableText and EditableMedium. The former allows you to add an editable text field, the latter allows students to add an image, an audio file or a video to the content. Note though that H5P does not offer a way to store user files on the server, so EditableMedium can only use direct URLs to media files hosted somewhere else. Running these two small content types standalone was not in focus of the project, so that option has not been fully tested. And maybe I’ll even remove it in the future.
Want to use it already?
The content types are done, kind of. There have been a couple of change requests after the testing phase, and more may trickle in. But feel free to play with them already.
The H5P core team will be asked to review the content type, and when they find time, they should release it on the H5P Hub.
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 enabled platform. 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, if you want to check it before installing or if you want to build the libraries yourself:
- https://github.com/otacke/h5p-editable-text
- https://github.com/otacke/h5p-editable-medium
- https://github.com/otacke/h5p-idea-board
- https://github.com/otacke/h5p-editor-idea-board
- https://github.com/otacke/h5p-editor-textual-input-idea-board
- https://github.com/otacke/h5p-idea-board-exercise
- https://github.com/otacke/h5p-editor-idea-board-exercise-board
Is it available in my language?
In theory: yes! If it’s missing, you can fill in the gaps yourself.
Any future plans for that content type?
I know you want to share your ideas. Please keep in mind though, that I was merely the contractor! I do not have the intention to develop it further in my spare time beyond fixing hidden bugs or general maintenance. But if you want to sponsor new features: Reach out!
Hey Oliver. Great stuff with this one. I noticed when I embedded a video on one page it also copied it into the next page. Just a small bug maybe! I have a question about all these 7 library repos. They must be private because I can’t access any on our Github account. But that wasn’t my question. How do they work together? So do you pack them as a group of related libraries after development to get the final .h5p? Just curious. I think I need to hire you to give me a 101 session on H5P development !
Oh, my bad. Will set the repositories to public in just a sec.
The two “Editable” content types encapsulate the editing features for text and images/audios/videos. The latter use the link workaround, because H5P does not allow files to be uploaded by the user.
“Idea Board” is the content type that gives you a single board. It uses the other two content types as subcontent within the cards, so in the editor you inherit H5P’s copy&paste feature. For the view, I essentially reinterpreted some parts of H5P core in the content type, so you can handle semantics.json to present the form there as well. If you wanted to add new fields, for instance, you can simply add them to semantics and they will just work in both the editor and the view. Also, “Idea Board” holds the code for the top toolbar, the submenu of the cards (again a reinterpretation what the Drag’n’Bar library does for editor widgets in CoursePresentation or Interactive Video.
The editor widget of “Idea Board” simply gives in the visual editor instead of a form.
And the “Textual Input” editor widget is how H5P offers text fields to be converted into content parameters, so you can create a couple of cards via a text input field quickly.
The rest is the view and the editor for “Idea Board Exercise” with the logic to chain multiple idea boards. You would not have had to split “Idea Board” and “Idea Board Exercise”, but this way you can copy and paste boards in the editor easily (as Course Presentation could copy and paste slides if it had a “Slide” subcontent). Also, if you really only want one single board, you save some resources if you use “Idea Board” instead of “Idea Board Exercise”.
The forms in the view resemble
Thanks Oliver…lot of interconnected relationships here. So from my understanding, the editable-text and editable-medium are foundational components embedded within idea board cards
Each content type has its corresponding editor widget
The separation between single board (idea-board) and multiple boards (idea-board-exercise) allows for:
> Efficient resource usage when only one board is needed
> Easy copy/paste functionality between boards in exercises
> Clean separation of concerns
EditableText and EditableMedium are central elements to the cards, yes. Those two do not have a visual editor though, the normal form bases editor is sufficient.