5.8: H5P

H5P is a free and open-source content collaboration framework based on JavaScript. H5P is an abbreviation for HTML5 and aims to make it easy for everyone to create, share and reuse interactive HTML5 content.

The H5P infrastructure on the LibreTexts is part of the greater ADAPT online assessment system that includes other online assessment technologies like WeBWorK and IMathAS (technology behind MyOpenMath). 

The WebWork component is functioning independently of the greater QUERY system (e.g., https://webwork.libretexts.org/webwork2) and is available to campuses currently. Existing courses that use the system operate with the online assessment as summative (with grade/gradebook). However, the H5P system on the LibreTexts provides only formative assessments, i.e., ungraded exercises. The plan is for this to switch to summative by summer of 2020.

Spanish H5P depot

Nancy Ballesteros (College of the Canyons), Alejandro Lee (Santa Monica College), and Cristina Moon (Chabot) built a Spanish H5P database for their intermediate/advanced Spanish text: https://human.libretexts.org/Bookshelves/Visualizations_and_Simulations/H5P_Library/Intermediate%2F%2FAdvanced_Spanish_H5P_Library

Video \(\PageIndex{1}\): As part of the LibreTexts presentations for OpenEd Week 2020, Nancy Ballesteros (College of the Canyons), Alejandro Lee (Santa Monica College), and Cristina Moon (Chabot) share their experiences using the LibreTexts platform to build an intermediate Spanish language text with an accompanied H5P interactive assessment library.

Account Needed

To create and store H5P problems, you will need a dedicated account (contact [e-mail] to request one); LibreTexts instructor or developer accounts are unable create or upload H5P problems. However, all users can insert existing H5P problems into their pages.

Adding Problems

Once an account is constructed, you can log into the H5P server (currently a WordPress server) at https://h5p.libretexts.org/wp-login.php. After logging in, click on the "H5P Content" at the bottom of the left side bar (see below).

Figure \(\PageIndex{2}\): Select H5P Content. Do not edit anything else.

You can click on "All H5P Content" to pursue the existing exercises or you can click on "Add New" to add a new exercise.

Figure \(\PageIndex{3}\): Adding new H5P exercise.

There are a range of different exercise types that you can select from and you can review the H5P server (https://h5p.org/ and https://h5p.org/content-types-and-applications) for examples of them. Many other sites on the internet also provide similar examples.

Once a problem is created, it is assigned a ID # (Figure \(\PageIndex{4}\)).

Figure \(\PageIndex{4}\): Existing assessments on the H5P server

Adding to a LibreTexts Page

Problems are added to any LibreTexts page based off of the ID# only. For example, Cristina Moon's exercise ID#127 is embedded in a page on the Humanities library: https://human.libretexts.org/Bookshelves/Visualizations_and_Simulations/H5P_Library/Intermediate%2F%2FAdvanced_Spanish_H5P_Library/Pluscuamperfecto_del_indicativo_actividad_3%3A_fill_in_the_blanks (Figure \(\PageIndex{5}\)).

Figure \(\PageIndex{5}\): H5P assessment that is embedded in a LibreTexts page in viewing mode

The underlying code that embedded this is simple one line code.

Figure \(\PageIndex{6}\): H5P assessment that is embedded in a LibreTexts page in edit mode

This code is available on all LibreTexts libraries via the "Templates" option under the "Elements" menu (Figure \(\PageIndex{7}\)).

Figure \(\PageIndex{7}\): H5P Embedding code is available via the Template menu.

After inserting the code, all you need to do is manually edit the code to the ID of the exercise you desire (e.g., add your ID# in lieu of "127" in Figure \(\PageIndex{6}\)).

Perusing the QUERY Gallery

under construction