Skip to main content
Chemistry LibreTexts

11.7: H5P

  • Page ID
    483767
  • \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)

    ( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\id}{\mathrm{id}}\)

    \( \newcommand{\Span}{\mathrm{span}}\)

    \( \newcommand{\kernel}{\mathrm{null}\,}\)

    \( \newcommand{\range}{\mathrm{range}\,}\)

    \( \newcommand{\RealPart}{\mathrm{Re}}\)

    \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)

    \( \newcommand{\Argument}{\mathrm{Arg}}\)

    \( \newcommand{\norm}[1]{\| #1 \|}\)

    \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)

    \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)

    \( \newcommand{\vectorA}[1]{\vec{#1}}      % arrow\)

    \( \newcommand{\vectorAt}[1]{\vec{\text{#1}}}      % arrow\)

    \( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vectorC}[1]{\textbf{#1}} \)

    \( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)

    \( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)

    \( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)

    \( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)

    \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)

    \(\newcommand{\avec}{\mathbf a}\) \(\newcommand{\bvec}{\mathbf b}\) \(\newcommand{\cvec}{\mathbf c}\) \(\newcommand{\dvec}{\mathbf d}\) \(\newcommand{\dtil}{\widetilde{\mathbf d}}\) \(\newcommand{\evec}{\mathbf e}\) \(\newcommand{\fvec}{\mathbf f}\) \(\newcommand{\nvec}{\mathbf n}\) \(\newcommand{\pvec}{\mathbf p}\) \(\newcommand{\qvec}{\mathbf q}\) \(\newcommand{\svec}{\mathbf s}\) \(\newcommand{\tvec}{\mathbf t}\) \(\newcommand{\uvec}{\mathbf u}\) \(\newcommand{\vvec}{\mathbf v}\) \(\newcommand{\wvec}{\mathbf w}\) \(\newcommand{\xvec}{\mathbf x}\) \(\newcommand{\yvec}{\mathbf y}\) \(\newcommand{\zvec}{\mathbf z}\) \(\newcommand{\rvec}{\mathbf r}\) \(\newcommand{\mvec}{\mathbf m}\) \(\newcommand{\zerovec}{\mathbf 0}\) \(\newcommand{\onevec}{\mathbf 1}\) \(\newcommand{\real}{\mathbb R}\) \(\newcommand{\twovec}[2]{\left[\begin{array}{r}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\ctwovec}[2]{\left[\begin{array}{c}#1 \\ #2 \end{array}\right]}\) \(\newcommand{\threevec}[3]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\cthreevec}[3]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \end{array}\right]}\) \(\newcommand{\fourvec}[4]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\cfourvec}[4]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \end{array}\right]}\) \(\newcommand{\fivevec}[5]{\left[\begin{array}{r}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\cfivevec}[5]{\left[\begin{array}{c}#1 \\ #2 \\ #3 \\ #4 \\ #5 \\ \end{array}\right]}\) \(\newcommand{\mattwo}[4]{\left[\begin{array}{rr}#1 \amp #2 \\ #3 \amp #4 \\ \end{array}\right]}\) \(\newcommand{\laspan}[1]{\text{Span}\{#1\}}\) \(\newcommand{\bcal}{\cal B}\) \(\newcommand{\ccal}{\cal C}\) \(\newcommand{\scal}{\cal S}\) \(\newcommand{\wcal}{\cal W}\) \(\newcommand{\ecal}{\cal E}\) \(\newcommand{\coords}[2]{\left\{#1\right\}_{#2}}\) \(\newcommand{\gray}[1]{\color{gray}{#1}}\) \(\newcommand{\lgray}[1]{\color{lightgray}{#1}}\) \(\newcommand{\rank}{\operatorname{rank}}\) \(\newcommand{\row}{\text{Row}}\) \(\newcommand{\col}{\text{Col}}\) \(\renewcommand{\row}{\text{Row}}\) \(\newcommand{\nul}{\text{Nul}}\) \(\newcommand{\var}{\text{Var}}\) \(\newcommand{\corr}{\text{corr}}\) \(\newcommand{\len}[1]{\left|#1\right|}\) \(\newcommand{\bbar}{\overline{\bvec}}\) \(\newcommand{\bhat}{\widehat{\bvec}}\) \(\newcommand{\bperp}{\bvec^\perp}\) \(\newcommand{\xhat}{\widehat{\xvec}}\) \(\newcommand{\vhat}{\widehat{\vvec}}\) \(\newcommand{\uhat}{\widehat{\uvec}}\) \(\newcommand{\what}{\widehat{\wvec}}\) \(\newcommand{\Sighat}{\widehat{\Sigma}}\) \(\newcommand{\lt}{<}\) \(\newcommand{\gt}{>}\) \(\newcommand{\amp}{&}\) \(\definecolor{fillinmathshade}{gray}{0.9}\)

    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 info@libretexts.org 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).

    clipboard_e2a8a97c12651e5ebc7a462e5931aefa1.png
    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.

    clipboard_e005efffbbdb4f2c803e082b2df70a13f.png
    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}\)).

    clipboard_e8eb24052bfc76beb1c05a7eff3ee9f8f.png
    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}\)).

    clipboard_efa1a642de782eb48f0233a4577853c51.png
    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.

    clipboard_edb1c26381781608a31aafe5ad61d9e71.png
    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}\)).

    clipboard_e2f69d1d35dd47a21b8449dfb414b53cd.png
    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


    This page titled 11.7: H5P is shared under a CC BY 1.3 license and was authored, remixed, and/or curated by Delmar Larsen.

    • Was this article helpful?