h5p container for serlo content
The Serlo Editor is currently tightly coupled to serlo.org. Content created on serlo.org can only be shown there and there is no way to download, store or edit content besides our website.
- Serlo Content can be created directly in your LMS.
- You can share content between different websites.
- You can download content to your computer.
h5p is a platform for html5 files to allow easy creation and reuse of interactive content. Content is stored in a .h5p file. This file contains all dependencies to display the content (content itself, images, scripts, css ...). You can upload the file to any h5p host and display and edit it there. Some hosts include:
- Drupal (official plugin)
- Moodle (official plugin)
- Some other LMS (canbas, blackboard, ...)
- Lumi Cloud (inofficial nodejs host)
- Lumi Desktop (inofficial electron app)
The Serlo Editor is a react app that compiles to html 5. If we can show and edit our state with react, then it's technically possible to also run the complete editor. This demo will do exactly this.
https://github.com/serlo/h5p-serlo-poc is a repo that defines a library to display a json state with react. The implementation contains some simple rich text elements like bold text.
https://github.com/serlo/h5p-editor-serlo-poc is a repo that defines an editing widget that is build with react. In it's current form it simply shows a textarea.
For this demo, we will use Lumi Desktop. You can install the electron app from https://app.lumi.education/#download.
h5p has a safety feature: every library has to be installed by the administrator first before it can be used. To do this, download this file:
https://github.com/serlo/h5p-serlo-poc/blob/main/serlo-poc.h5p
Open Lumi and go to the settings:
Then, open h5p libraries:
Upload and install libraries:
And it should show this screen:
Go to h5p editor and click "creat new h5p". Choose "Serlo H5P" as content type:
Add a title and insert this json state:
[{"type":"text","text":"Das ist "}, {"type":"text","text":"spannend!", "strong": true}]
Now you can see the rendered content:
h5p contains an extensive set of information for developing content types: https://h5p.org/developers
Overall file structure: https://h5p.org/specification
Allowed file extensions: https://h5p.org/allowed-file-extensions
JSON can be stored as semantic "text" (if encoded as base64 we can avoid html escapes): https://h5p.org/semantics
Content upgrades can be handled by a upgrade-script: https://h5p.org/documentation/developers/content-upgrade
Bigger example of an upgrade script: https://github.com/h5p/h5p-interactive-video/blob/master/upgrades.js