H5P

H5P integration
Project state	In development
Tracker issue	https://tracker.moodle.org/browse/MDL-66382
Discussion	H5P forum
Assignee	Moodle HQ

Moodle 3.8

Introduction

This project is intended to provide for Moodle one of the best open-source solutions to allow teachers to easily use engaging content in their activities. Integrating H5P in Moodle is a challenge and an opportunity to take Moodle to another level. Since there are different approaches, in this document we will explain the approach that we believe is most suitable for Moodle 3.8 given the complex context. Likewise, we will detail the set of practices and processes that we have followed and the feedback collected from the different stakeholders to reach a proposal that we believe will satisfy most of Moodle users.

We are sure that enhancements can be done in the future based on the progress and higher maturity levels achieved working in this release.

Purpose

The purpose of this document is to describe the best solution to integrate H5P in Moodle 3.8 and explain how to implement it that provides the greatest benefits for most Moodle users. To define which is the best H5P integration solution in Moodle we have done the following tasks:

• We have met the people of H5P.
• We have held three meetings with stakeholders outside Moodle.
• We have worked with UX on user histories, user journey maps and discovery sprint.
• We have thoroughly studied the external plugin of H5P in Moodle.
• We have had several internal meetings to know the opinions of integrators and MoodleCloud.
• We have validated the different options with external and internal stakeholders.
• We have made estimates of the different possible technical solutions.

With all this work we have defined the following MVP:

1. Have a new Moodle filter that allows interpreting and embedding an external URL with H5P content from H5P.org and H5P.com. And with the possibility of opening the range of domains.
2. Have a new button in Atto that facilitates the inclusion of H5P content through a URL or the upload of an H5P package.
3. Have an internal player in Moodle that displays the H5P content and that improves the performance of the current plugin in the visualization.

This solution allows for H5P content to be added to any activity or resource.

On the other hand, it facilitates the work of the teachers allowing more intuitively to add H5P content to their activities without the need to create a specific activity for it.

Scope

The current MVP is covering:

• add H5P content directly from the Atto interface
• add H5P content everywhere as non-gradable content
• be able to download H5P content
• be able to access H5P content offline using the Moodle app
• be warned if the H5P file is too big
• restrict file size when uploading H5P content

On the other hand, we believe that for now, we should not create a new H5P activity in Moodle 3.8 for the following reasons:

• The integration of the H5P activity with editor decreases the range of Moodle users that benefit from it since it does not allow the use of H5P content anywhere and limits it to the specific use of the activity.
• There is a serious security problem regarding the qualifications that we cannot solve from Moodle, so we would have an activity with unreliable claims.
• The technical complexity regarding the integration of the H5P editor is high and cannot be assumed in a single release.
• The integration team tells us that integrating the H5P editor into Moodle requires a great adaptation effort to be accepted by the iTeam and MoodleCloud. That effort can be almost 75% of the development time. Given, that in that case, we'll be always behind "original" editors.

References

• General Devpad - Kick off
• Devpad end-user meeting 29-JUL-2019
• Devpad end-user meeting 30-JUL-2019

Design Specification Requirements

Overall technical design

H5P makes it easy for everyone to create, share and reuse interactive content. So instead of using it as an activity for assessing, it can be also used for displaying information, self-evaluation or informal learning.

This is the approach to get that in Moodle:

• Create a new filter to transform H5P URLs/files automatically.
• Create an Atto button for adding H5P URLs/files, similar to the existing media one.
• Create a Player to render the H5P content.

Design - Technical detail

Player / renderer library

Rendering h5p files requires a page that has at least the general h5p library: https://github.com/h5p/h5p-php-library

Each h5p file contains all further content libraries required for it to display and the json_config containing the package configuration. When rendering a h5p package no further communication with Moodle is required.

The minimum requirement for a simple renderer are

1. Implement H5PFrameworkInterface (h5p-php-library)
2. A view page to render the content and load h5p JS
3. Unit / Behat tests

In future the renderer could be improved to reduce disk space usage from h5p packages storing shared libraries within the package only once.

The requirements for a smarter renderer are

1. Create a basic skeleton to store h5p content types
2. Implement H5PFileStorage (only the part of upload files with Core API) no using submodule editor.
3. Implement H5PFrameworkInterface
4. View
5. Embed
6. Privacy provider
7. Unit/Behat test
8. Add appropriate events

Filter

1. Create a new filter
   1. Create a basic skeleton.
   2. Settings.
      1. Allow using more domains (not only H5P.org .com)
      2. Allow using URL with .h5p extension
   3. Prepare filter to convert URL’s into a player - Just, preparer the filter to understand H5P URL.
      1. URL like https://h5p.org/h5p/embed/566372
      2. URL with the extension of .h5p - See point 2.
2. Use Player/renders (see Player/renderer: library)
3. Privacy - No user data - TRIVIAL

Atto plugin

1. Create a new H5P plugin for Atto.
   1. Create a basic skeleton.
      1. JS Tabs Pane
      2. Create a TAB pane for Embed URL H5P. -
      3. Create a TAB pane for Upload a new content from .h5p package. -
      4. Create callbacks. - (adding a new tag HTML or data attribute to mobile and to edit from Atto)
2. Create templates/icon/styles for JS tabs.
3. Privacy - No user data - TRIVIAL

3.8 H5P integration

• Add H5P content through an Atto editor button (add H5P everywhere Atto can be used)
• Filter to automatically convert H5P URLs to embed code
• H5P renderer / player

Please see: Prototype for H5P Atto button

3.9 H5P integration

• H5P activity type
• Improve the user experience

The following prototypes are still under discussion:

• Prototype for H5P Content creator
• Prototype for H5P Administration
• Prototype for H5P Course activity (Version A)
• Prototype for H5P Course activity (Version B)