Interactive online learning (Education)

Interactive online learning (Education)

Megan Clune from Curriculum and Pedagogy in the Faculty of Education and Social Work used H5P to facilitate online interaction of students in Edcurric 108: Mathematics and Statistics Education 1, Edcurric 708: Making a difference—Science and Edcurric 760: Making a difference—Mathematics. You will find this useful if you are interested in blended learning, teaching remotely and extending the online interaction of students.

Image 1. Screenshot of the 360 Classroom used in 100 Level Mathematics Course

H5P is an abbreviation for ‘HTML5 Package’ which uses the HTML5 programming language to create interactive online content. There are a range of tools available with H5P including video imagery, dialogue cards, branching scenarios and interactive books for example.


This case study involved Bachelor of Education students taking an undergraduate course in mathematics and Masters of Education and Honours students taking postgraduate courses in mathematics and science. The project aimed to assist with a broad range of courses in order to integrate more on-line engagement for students across the board. Due to Covid some of the courses that were initially involved deferred and will rejoin in Semester One 2021.

The need to extend the on-line interaction of students has always been there for Megan. During her CLeaR Fellowship she established badging on Canvas (the University of Auckland’s learning management system) to help students engage with readings. Megan then saw an opportunity to use H5P to extend student engagement across a wider range of content including tasks they were expected to do online. Previously there was no way of ensuring that they were doing this, using H5P was a way to give them accountability in terms of their own learning. Using the analytics behind H5P the lecturers could see which students were engaging and to what degree, who needed to be contacted early on rather than later on when assessments started to come through. The information was much more fine-grained than what could be gathered in Canvas where there is information broadly at the modules level. It tracks when students have entered a module but they may have merely clicked on a page. In contrast, H5P content that sits within a page can track which tasks have actually been engaged with, by whom and to what degree.

Design: challenges and process

The project team received direction from the Digital Learning Team in 2019. They were helpful in explaining the bigger picture and what the tool H5P was capable of and what could be implemented quickly within the courses. Lecturers took it from there. The project involved integrating H5P into designing content that supported existing course content. Initially a team was set up of five lecturers and there was some professional development training at the beginning of 2020. A few of the teachers set up the tool for Semester One 2020, though some withdrew due to the impact of Covid-19. The lecturers who had begun to use H5P in the first semester actually increased their use of the tool with the move to remote learning and teaching in lock-down. Megan continued to touch base with team members throughout the year in order to keep trialling and tweaking the tool and to assist with professional development.

It takes a lot of time to develop each of the activities and H5P is not perfect.There are glitches, sometimes you’ll save something and then when you test the activity it’s not how you thought it was so it takes a lot of testing, trialing and debugging. You need to be prepared for that, but the tool is getting better all the time, they are constantly improving things on the other end. Creating tasks and content cannot be done at the last minute and things need to be done in baby steps. We used videos, 360 degree and static images. Students could explore an actual classroom using extended imagery at a time when they were unable to physically visit them. Another exercise involved a hands-on crime scene which was no longer possible so one was created using H5P. All of this was newly-created content, not content taken from textbooks.  A range of content was created for each purpose such as Drag-and-Drop activities whereby students had to build lesson plans or demonstrate recall of knowledge. Universal Design for Learning (UDL) was taken into consideration when designing tasks. That is something the team is still looking at because on some computers there are difficulties with H5P and we have identified that there may be difficulties for visually impaired learners. That is something the project team are working on.

H5P was also used for informal assessments but overall it was used to make sure students were engaging with course content. One example of using H5P as part of an assessment involved a video with overlays, pop-ups etc so that the video itself informed the assessment. Students had to watch the video in order to complete the assessment task.

Image 2. Crime Scene imaged used in a Post-Graduate Science Course

Implementation and evaluation

Modules were kept locked on Canvas and as they came up each week during the semester the lecturers added content with the tool as they went along. A certain amount of tasks were ready to go at the start of the year but as the year progressed more and more content was added.

What worked well?

The majority of on-line tasks worked really well and the feedback from students was positive. The tool was good at giving students a context which they could pin theory on, especially for first year students who were unable to get out into classrooms. H5P was helpful for bringing a practical element to online learning, which is always a challenge, for example moving a very hands-on science course to an online space. This project offered one way of doing that, so in 2021 the science and mathematics postgraduate courses will now be offered as hybrid. 

What would be done differently?

A lot more can be done with H5P but it requires additional skills and knowledge. Reflecting on her own experience, Megan expressed a desire to increase her own personal knowledge of the tool and how it might be used more widely, more broadly, with more meaning and more variety for the students because similar formats such as video, drop and drops and hot spot imagery were used quite frequently. It would be great to explore some of the other content types available. More professional development was needed so that team members could be upskilled in use of H5P. Without further training usage can be limited.

Further Resources:

Presentation at UoA Learning Design Community of Interest – Designing for Learning with H5P