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
Step |
Description | Time stamp |
Editor | Code snippet/Sample text |
---|---|---|---|---|
1 | Insert the H5P activity (short code) | 2:58 | Visual | |
2 | Wrap the H5P in div tag | 3:45 | Text | <div class=”h5p”> </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 | |
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.
- Reading assignments are moderately long. Teachers may set aside some class time for reading and reviewing the material in depth.
- Reviewing for exams is primarily your responsibility.
- Your grade is determined by your performance on a wide variety of assessments, including minor and major assignments. Not all assessments are writing based.
- Writing assignments include personal writing and creative writing in addition to expository writing.
- Depending on the course, you may be asked to master new forms of writing and follow standards within a particular professional field.
- 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 –
- Gym
- We
- Student
- Maya, Tia
- Driver
- Anita
- People
- You
- Soundtrack
- 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:
To correct:
- Go to the affected pages in Pressbooks
- Switch to text view and CTRL+F to find instances of footnote on the page
- Check that the /footnote closing tag is placed AFTER the closing </ol> tag
- Check the whole page – each occurrence of the improperly nested footnote tag causes more misalignment on the PDF page.
- Re-export the file and check that the alignment has been corrected.
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.
<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
- Code view of complete Enhanced H5P source code [PNG]
- Add footnotes or chapter endnotes in Pressbooks
- Explanation of Summary/Details tagging
- Clippings – Firefox Plugin – download/install if desired
- Create End of Page Attribution Statements
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
- H5P code snippet © Jen Booth is licensed under a CC BY (Attribution) license
- Footnote code snippet sample © Jen Booth is licensed under a CC BY (Attribution) license
- Footnote Alignment Issues © Sari Martin & Virginia McHardy adapted by Jen Booth is licensed under a CC BY-NC-SA (Attribution NonCommercial ShareAlike) license
- properfootnotetagging © Sari Martin & Virginia McHardy adapted by Jen Booth is licensed under a CC BY-NC-SA (Attribution NonCommercial ShareAlike) license
- 1. High school, 2. Post-secondary, 3. High school, 4. High school, 5. Post-secondary, 6. High school ↵