H5P: A Tool for Creating Interactive Course Content

Article written by ASC Office of Distance Education Instructional Designer, Jessica Henderson

H5P allows for the creation of a variety of content types, from 360-degree virtual tours to interactive videos to branching scenarios and more, that can be integrated with Carmen and Scarlet courses, as well as department and unit websites to meet a range of needs. Content created using H5P can simulate scientific and research labs in a virtual space, immerse students in cultural settings abroad through virtual reality tours, bookmark and highlight individual takes and techniques included in a film or video sequence, and develop decision-making skills by providing a set of challenges and possible decisions that guide students along various pathways. 

Features and Available Integrations

In December 2021 the College of Arts and Sciences, along with several other colleges and units across the university, purchased licenses to H5P, an open-source e-authoring tool that allows for the creation of a variety of interactive content types that can accommodate a range of needs. With the addition of H5P – an abbreviation of HTML5 Package – ASC can provide educational resources in the form of interactive videos, course presentations, books, branching scenarios, virtual tours, dialog cards, and a range of quiz question types, among others. Each of these content types provides instructors with an opportunity to build course content that reflects Universal Design for Learning principles, including enhancing student engagement, incorporating multiple means of representation, action, and expression, providing authentic materials and experiences, and much more.

As part of ASC’s acquirement of H5P, any content created using the tool can be integrated within both Carmen and Scarlet courses, meaning that any content incorporated as an assignment can be connected to and assessed using the Carmen gradebook and content can be viewed directly within the Carmen and Scarlet course pages. In addition, H5P content can also be integrated with Drupal and used on department and unit websites to provide additional means for recruitment, outreach, and public engagement efforts.

Creating Content

Since all colleges and units at Ohio State must create content following standard operating procedures and agreements with the ADA Coordinator's Office, H5P has already been evaluated for both security and digital accessibility. As a result, the production of H5P content will generally be authored by each college and unit’s instructional design/e-learning team. For the College of Arts and Sciences, all H5P content must be created in collaboration with and maintained by the ASC Office of Distance Education. Any instructor, department, or unit within ASC that wishes to create interactive content utilizing H5P, can request a consultation with one of ODE’s instructional designers who will work with you to design and produce content that meets your objectives and goals. You can also contact ascode@osu.edu if you have additional questions or would like to learn more about the tool and the process of creating and integrating course content.

The section below provides hands-on examples created by ODE using H5P’s large resource content types (Virtual Tours, Branching Scenarios, Interactive Course Presentations, Interactive Books, and Interactive Videos). Within each are additional examples of a variety of smaller content types and tasks such as interactive videos, practice dialog cards, audio recordings, images, exportable text areas, and several quiz questions. We invite you to explore and interact with each sample to gain a better understanding of the functionality and features available within H5P and to use these examples to envision how this tool might address some of your own course and department needs.

H5P Examples

 

Virtual Tours 

The virtual tour content type in H5P provides a way to create virtual spaces that can simulate and immerse the user within real world settings. These tours are created by joining several scenes together. Each scene contains a required background image, which can be either a 360 degree image or a standard 2D image. In addition to the background image, each scene can include text, video, other static images, audio recordings, and/or quiz questions that allow the user to gather information and apply their knowledge through multiple means of representation and action.  

To get a sense for what the virtual tour content type looks like, see the brief examples linked below. The first example uses 360 degree images to identify Italian vocabulary terms related to the home. The second employs static images to create a sort of historical walking tour of cities in Italy. The third example uses the virtual tour to add a gameful learning component for a course that explores the topic of quests. The fourth example connects several 360 degree images from the African and African American Studies Community Extension Center on OSU's campus to create a virtual tour of the space and some of its resources.

Branching Scenarios 

The branching scenario content type emphasizes decision-making and problem-solving skills. This type of interactivity is often used to simulate processes or real-world situations, presenting learners with a set of challenges and consequences. As students make decisions, they receive immediate feedback and are directed along different pathways based on those decisions. Because feedback is instantaneous, students can reflect upon the choices that they made, assess what went wrong, and work to adjust their approach when facing additional challenges or new scenarios. Much like the virtual tour described above, branching scenarios can include a variety of formats to present information and assess students, such as text, images, videos, interactive videos, and even course presentations which are described in more detail below. 

The example below utilizes the Branching Scenario content type to guide students through an activity around the global water crisis. Students take on the role of a character from the region and have to make decisions about how they will access and use their water throughout the day before finally being asked to reflect on their experience and identify the factors that have created a water crisis in that particular region. 

Interactive Course Presentations 

The Interactive Course Presentation content type functions similarly to a PowerPoint presentation in that it concentrates content on a single slide that can be connected to a number of other content-laden slides. Like PowerPoint or other slide presentation formats, slides can include text, images, shapes, links, videos, and audio, but the content creator has the option to display each of these aforementioned components using the standard display setting or as a button. The addition of the button option allows for a wealth of content to be included on a single slide without being visually overwhelming and disengaging. Perhaps the most significant difference from standard slide presentations is the ability to add interactive components to each slide, such as a variety of quiz question types, exportable text areas, interactive videos created in H5P, and visual buttons that can direct students to any other slide within the presentation. 

Take a look at the examples below to get a sense for what an Interactive Course Presentation can do. The first example is a step-by-step guide for how to locate and use the Scientific Citation Index for research purposes. The second example is a single slide that turns an artwork into an interactive viewing experience using individual close-up images and a text information box (though this could also incorporate video, audio, or any other component described above). 

Interactive Videos 

With the Interactive Video content type instructors can transition standard video lectures into an active learning activity. They can stand on their own or they can exist within larger interactive course presentations and interactive books. Within an Interactive Video, text boxes, labels, images, tables, and links can be layered over the video at specific points on the timeline, allowing students to actively click the interactions in order to explore key concepts and additional information. A variety of quiz questions can be added at various instances to check for comprehension of important concepts or audio/visual techniques. In addition, various navigational cues such as bookmarks and crossroads can be included to help guide students to specific sections of the video. These types of features are useful if students need to or want to return to concepts or discussions within the video that they may not have fully understood upon first viewing the material. Or these navigational components could be used to add an element of student autonomy, allowing learners to jump to the topics that they most wish to explore and in whichever order they wish to explore them.  

The examples linked below provide a brief demonstration of how interactive videos might be used to enhance course content. The first example uses an interactive video to teach basic ballet techniques to beginning dance students. The second example employs an interactive video to provide introductory film students with additional identification practice of key film terminology. 

Interactive Books 

The Interactive Book content type includes much of the same functionality as the course presentations described above, with the primary difference being the overall visual format. Content within the interactive book is displayed in a vertical format and is read similarly to what one might find on a website. Users can scroll up and down to access additional information on a page and they can navigate to different chapters and key sections of a chapter using the menu feature. This content type works well for activities, labs, or lessons that may need to be divided or chunked into multiple segments or topics, each containing a large amount of information and/or interactive content. Within each page or chapter of the book, the creator can add text, links, images, image galleries, audio, interactive videos, dropdown menus, various quiz question types, and even Interactive Course Presentations that contain multiple slides. 

To see the Interactive Book in action you can interact with the example below. This example provides a self-paced introduction to key film terminology and a multi-step guide to conducting a formal scene analysis in an introductory GE film class.  

If you are planning to use this tool, please include the following statement in your Carmen course and syllabus:

"This course uses H5P for interactive course content, should you experience difficulties with these accessible materials or have additional questions, please contact the College of Arts and Office of Distance Education at ascode@osu.edu.”