Adding & Enhancing H5P Activities

Why do we need to enhance H5P activities?

  • H5P are interactive in browser (with internet) only
  • Screenreaders may be unable to use H5P or have issues
  • Print/PDF/Offline users can’t access H5P
  • Students can’t easily print/save H5P activities

… with a little planning & some HTML code, we can improve the user experience in each of these situations!

Video Demonstration

Watch Enhanced H5P: Pressbooks on Screencast-o-Matic (9mins)

Video source: “Enhanced H5P: Pressbooks” by Jen Booth is licensed under CC BY-NC.

Process to Add & Enhance H5P activities in Pressbooks

Steps, timestamp in video explanation, Pressbooks editor required and related code snippet/sample
Step
 Description Time stamp
 Editor Code snippet/Sample text
1 Insert the H5P activity (short code) 2:58 Visual code snippet, h5p id equals 150 (quotes around the number), square brackets to enable Pressbookss short code
2 Wrap the H5P in div tag 3:45 Text <div class=”h5p”>
code snippet, h5p id equals 150 (quotes around the number), square brackets to enable Pressbookss short code
</div>
3 Add the text version (paste as text if from Word/Office) 4:24 Visual
4 Add the answer in a footnote 5:20 Visual pressbooks shortcode for footnotes, square brackets around the word footnote, answer and closing tag with square brackets
5 Attribution statements 5:40 Visual
6 Wrap text version & answers in Summary/Details tags 6:00 Text <details><summary>
</summary></details>
7 Wrap H5P & text version in exercises box if desired 7:35 Visual
8 Save & preview in your browser 7:40 Browser

The Finished Product

High School vs. Post secondary Assignments (Text version)

High School vs. Post secondary Assignments (Text version)

Determine whether each statement reflects high school or post-secondary environments.

  1. Reading assignments are moderately long. Teachers may set aside some class time for reading and reviewing the material in depth.
  2. Reviewing for exams is primarily your responsibility.
  3. Your grade is determined by your performance on a wide variety of assessments, including minor and major assignments. Not all assessments are writing based.
  4. Writing assignments include personal writing and creative writing in addition to expository writing.
  5. Depending on the course, you may be asked to master new forms of writing and follow standards within a particular professional field.
  6. Teachers often go out of their way to identify and try to help students who are performing poorly on exams, missing classes, not turning in assignments, or just struggling with the course. Often teachers will give students many “second chances.”

Check your answers:[1]

Activity source: “Table 1.1 Replacement” by Brenna Clarke Gray based on the content from “Chapter 1. Post-secondary Reading & Writing” In Writing for Success – 1st Canadian H5P Edition by Tara Harkoff & [author removed], licensed under CC BY-NC-SA 4.0. / Table content adapted into an activity.

Troubleshooting

Ordered lists in footnote(s) taking up too much space

If your activity has a list of questions organized into an ordered list, then your footnoted answers should also be in an ordered list to ensure a better experience for screenreaders. Within the footnote, you can make your ordered list show up in columns to avoid a page-long footnote.

In the HTML for your ordered list, add a class:

<ol class="threecolumn">

You can apply this to ordered lists (ol) or unordered lists (ul) and can specify 2 columns or three. Example:

Part 1 –

  1. Gym
  2. We
  3. Student
  4. Maya, Tia
  5. Driver
  6. Anita
  7. People
  8. You
  9. Soundtrack
  10. His

Chapter endnotes/footnotes: Ordered lists in PDF export alignment issues

This is due to poorly formed HTML. Content will look fine in the web book. In PDF, you get something like this:

screenshot showing misaligned footnotes with ordered lists
Screenshot of PDF alignment issues in Verb Tenses for English for Academic Purposes by Sari Martin & Virginia McHardy, CC BY NC SA.

To correct:

  1. Go to the affected pages in Pressbooks
  2. Switch to text view and CTRL+F to find instances of footnote on the page
  3. Check that the /footnote closing tag is placed AFTER the closing </ol> tag
  4. Check the whole page – each occurrence of the improperly nested footnote tag causes more misalignment on the PDF page.
  5. Re-export the file and check that the alignment has been corrected.
Screenshot showing proper [/footnote] HTML placement to correct alignment issues from Verb Tenses for English for Academic Purposes OER.

 

Details tag is “open” or expanded instead of closed

Check the HTML/Text view of the page in Pressbooks. Pressbooks occasionally (and seemingly sporadically) rewrites this code. Look for the word “open” added into the details tag, remove it, save and preview to check. As you’re finalizing your OER content, you may want to use Pressbooks Find/Replace tool to correct this throughout the book.

Problematic Code Snippets:

<details open>
<details open=”open”>*Remove open or open=”open” depending on what you see. Save and preview to make sure the change worked*

Check Tagging for Accuracy

  • Check summary/details tagging and function as you preview the finished page
  • After completing your work in the book:
    • Export a new version of the PDF (print) copy of the text
    • Review the PDF to ensure that text versions of activities display, but the interactive element placeholder has been removed
      • Use CTRL+F to open the search box in the PDF being viewed in your browser
      • Search the document for instances of: An interactive H5P element
      • Review the instances and correct in Pressbooks by using proper <div class=”h5p”> tagging

Resources

Attribution & References

Except where otherwise noted, “Adding & Enhancing H5P Activities” in Pressbooks by Jen Booth is licensed under CC BY-NC 4.0.

Media Attributions

  1. 1. High school, 2. Post-secondary, 3. High school, 4. High school, 5. Post-secondary, 6. High school ↵

License

Icon for the Creative Commons Attribution-NonCommercial 4.0 International License

GC Library OER Design Studio - Training - Work-in-Progress Copyright © by Jen Booth is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License, except where otherwise noted.

Share This Book