Technology Spotlight: H5P

tl;dr - H5P lets you create awesome content for your online classroom

H5P at a glance

H5P is an amazing open source HTML5 eLearning authoring tool.  Wait, did I lose you already?  All this web code is all so confusing, and you know what?  My degree was in psychology, not computers.  So let's make this simple.  If you would like to have some interesting and engaging interactions in your online classroom without having to worry about all that computer stuff then you should check out h5p.org.  It does the code stuff for you so that you can just focus on the content.  

You can create a free account and then start building interactions, games, presentations, flashcards, and many more awesome things.  They have a whole webpage that is a treasure trove full of examples and templates for you to explore: https://h5p.org/content-types-and-applications  To get you started, here is an example of an interactive video:

How can I use H5P in my class?

Your H5P interactions can be built and then placed within content pages in Canvas.  So any place where you have a Ruch Content Editor, such as a content page, a quiz question, a course announcement, etc., you can incorporate an H5P interaction.  So, for example, if you have a module overview page that you want to add some interesting content to, you can place a picture and put hotspots on it.  As students scroll over or click on certain areas of the picture, the content will interact with them.  Perhaps a definition will pop up or a video will play.  See the example on the right.

I could also create an interactive timeline or a memory game. I can organize a collage of images or embed a course presentation with interactive slides.  One of the interactions that I like is a sequential visual tool that allows the user to transition from one picture to the next.  It's an interaction called Agamotto (likely a nod to Dr Strange). You can explore the example below: 

Here is what I like best about H5P

A screenshot of an accordion menu that I was creating in H5P

A screenshot of an accordion menu that I was creating in H5P

For starters, H5P is open source and free.  People who are smart with web design and coding contribute to this platform and they make it incredibly easy for non-coders to use.  Everything is simple and fairly well explained.  They have installation guides to walk you through, and building out the content is easy.  Once you're ready to put it into your Canvas course, it's as simple as copy and paste.  This platform is great if you want to explore interactivity in your online classroom.  They have good documentation and an active community to support you.

Here is what I dislike about H5P

Do you happen to know a little about HTML?  If so then you might find this platform a little stifling.  What you gain in simplicity and ease, you sacrifice in customization and freedom.  This tool is really for a beginner audience.  Even so, you do have to know how to copy embed code and paste it into the HTML editor on your Canvas page.    That's a good amount of exploring and you may need to reach out to your instructional designer for help with that.  They have very good documentation for the Moodle LMS platform, and I wish Canvas support was more specific.

My recommendations

I say, go sign up for your free account and just begin exploring the examples and templates that they provide.  You can duplicate one of their examples and modify it, or if you have a good vision of what you want to create then start from scratch.  Start small and try to add to your collection over time.  There is a community available for you as well as a forum, if you want to reach out to other users.  This is a low-stakes high-reward platform, and I say: Go explore!

Written by Dr. Sean Nufer, Director of Ed Tech for TCS Education System.