Best practice
H5P is a very open standard. This is positive for flexibility. Most content may be produced as H5P. But this also allows for bad code, security weaknesses and code that may be difficult to reuse. Therefore, the best practices listed below should be followed to get the most from H5P.
Reusability
Think reusability when creating a library. H5P support dependencies between libraries, so the same small quiz-library may be used in various larger packages or libraries.
Library updates
H5P support library updates. This enables all content using a common library to be updated at once. This must be accounted for when writing new libraries. A library should be as general as possible. The content format should be well planned so there are no changes to the required content data when a library is updated. Note: It is possible to change the content structure in new minor or major versions of a library.Multiple versions of a library may exist at the same time, only patch level updates will be automatically installed.
Independence
An H5P should not interact directly with the containing website. It shall only affect elements within its own generated DOM tree. Elements shall also only be injected within the target defined on initialization. This is to avoid dependencies to a specific platform or web page.
Namespace conflicts
Prefix objects, global functions, etc with h5p to minimize the chance of namespace conflicts with the rest of the web page. Remember that there may also be multiple H5P objects inserted on a page, so plan ahead to avoid conflicts.
jQuery
H5P supplies its own copy of jQuery as H5P.jQuery. Use this rather than assuming $ is defined.
Responsiveness
Content should be responsive and adapt to various screen sizes.
Universal design
Content should be WCAG 2.1 AA compliant.
Valid code
- All generated HTML should validate.
- All CSS should validate (some browser specific non-standard CSS may at times be required)
- Best practices for javascript, html, etc. should of course also be followed when writing an H5P.
- Follow the H5P coding style by verifying your code using eslint, and the config found here
Comments
papi Jo
Sun, 01/05/2020 - 23:39
Permalink
Wrong URL
"Content should be WCAG 2.0 AA compliant" has an outdatedURL.
Correct URL should be: https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0
BV52
Mon, 01/06/2020 - 19:51
Permalink
Hi Papi Jo,Thank you for
Hi Papi Jo,
Thank you for pointing this out. I created a request to update the link.
-BV