Skip to main content
Mathematics LibreTexts

Adding H5P Problems to LibreTexts

  • Page ID
    73245
  • \( \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}\)

    Adding interactive problems/activities using H5P, WeBWorK, MyOpenMath or straight from the LibreStudio (H5P), Query, or Adapt can make your LibreTexts more interactive and provide immediate feedback to students on their understanding.  Note that Adapt is a full online homework system that will allow you to grade student work, either completed in the Adapt interface or right in your LibreTexts.  But this tutorial is focused on how to use these problems in a formative, non-graded way.

    In this tutorial, we will cover how to add formative (concept check) H5P activities to your pages.  First we'll cover how you can review the available H5P elements in the LibreStudio library, although there are not many math problems there yet.  Then, although it is beyond the scope of this tutorial, we will briefly discuss how you can locate and import H5P activities you find elsewhere or even create your own H5P elements to add to the library!

    Note that there are not yet any math H5P activities/problems in Query, although this is one place you'll find available WeBWorK problems.  In fact, since we have LibreStudio, we will not need to use Query for H5P activities.

    Also note that this page is an expanded version of Section 5.7 in the Construction Guide that is focused on the LibreTexts Math library.

    Browsing H5P Activities in LibreStudio

    You can browse existing H5P content on LibreStudio and insert selected H5P activities into your LibreTexts pages without logging in.

    Go to: https://studio.libretexts.org. You can use the filters shown on the left to narrow the search.  If you select Mathematics, you will find at least two problems.  Clicking on the title of a problem, you will see a column of attributes.  In order to insert an H5P activity into a LibreTexts page, we will need the H5P ID number shown at the bottom of this list.  See the figure below.

    H5P ID in LibreStudio.png
    Figure \(\PageIndex{1}\): The attributes of an H5P activity in LibreStudio

     

    Inserting an H5P Activity into a LibreTexts Page

    The H5P template lets authors embed the H5P activity into a page (page > elements > template).

    H5P Template.png
    Figure \(\PageIndex{2}\): Selecting the template: Template:QueryH5P

    Once the template is added to the page, all you have to do is change the ID number of the activity here to the one you located in the previous step (in the place of 5 in below template).

    Inserting H5P Problem.png
    Figure \(\PageIndex{3}\): Adjusting the ID number to correspond to the problem you desire.

     

    Logging in to LibreStudio

    In order to import or create new H5P activities on LibreStudio, you will need to log in using a user account.  If you do not yet have an account, you can register for one here: https://studio.libretexts.org/user/register using this LibreStudio registration code: "LibreFest2021"

    We are in the process of tying all components of the LibreVerse together into one central authentication, but for now individual accounts are needed.

     

    Importing H5P Activities into LibreStudio

    Many H5P activities have been created for math on other H5P servers around the world.  A Google search for H5P and Math will bring up a number of places to search.  If you find an H5P activity you'd like to use or modify, most have a Reuse link to download it to your computer.  You can then import the activity into LibreStudio by clicking on the New H5P button and then selecting the Upload option instead of Create Content.  See Figures \(\PageIndex{4}\) and \(\PageIndex{5}\) below.

    New H5P button.png
    Figure \(\PageIndex{4}\): Click on the New H5P button to the left of the Author Menu.

     

    LibreStudio H5P Create Content.png
    Figure \(\PageIndex{5}\): Clicking on the Upload option will display this dialog.

    You can then use the Upload a file button to upload the H5P activity you saved to your computer from another location on the web.  Note that you have a few options for what action items and information the H5P activity will display.  If you import activities created by others, please be sure to give the authors proper credit.

    Once you've imported an activity, you can either insert it into your LibreText as described above or you can modify it before doing so.

    To modify an H5P activity you have either created or imported, use the Author menu to go to your Author Dashboard.  Then locate the H5P activity you'd like to modify and click on the Edit this resource button near the right side of the activity object.

     

    Creating New H5P Activities in LibreStudio

    In the likely event you cannot find a problem that does exactly what you have in mind, you can create your own H5P activities right in LibreStudio!

    See the H5P project site (https://h5p.org/) for full instructions on this process, and look at example problems there, in LibreStudio, sand elsewhere to get ideas.

    You will use the New H5P button in Figure \(\PageIndex{4}\ above and then follow the instructions on the H5P site to create a new activity using the Create Content option, as shown in Figure \(\PageIndex{6}\.

    LibreStudio H5P Create Content.png
    Figure \(\PageIndex{6}\): Use this dialog to create a new H5P activity.

     

    Example H5P Activities

    1.  A Divergence problem from Calculus 3 (by Paul Seeburger).

    Query \(\PageIndex{1}\)

    2.  A group of algebra problems presented as one H5P activity (by Bob Belford).

    Query \(\PageIndex{1}\)


    This page titled Adding H5P Problems to LibreTexts is shared under a CC BY-SA license and was authored, remixed, and/or curated by Paul Seeburger.

    • Was this article helpful?