cancel
Showing results for 
Search instead for 
Did you mean: 
GideonWilliams
Community Champion

H5P - Free Interactive Content Creation with HTML5

As an ex-Moodle user I still keep in touch with developments on the 'other' platform. I recently stumbled across a post in my Twitter stream that looked intriguing:

interactive1.GIF

I am always very interested in interactive content. I am very conscious that in today's digital world we increasingly need more hooks and catches to engage our students (and staff) with digital learning and despite the best efforts of many VLEs, the look, feel and layout of activities is not something most young people come rushing to use. This is why (IMHO) the best three features in Canvas are:

  • the HTML Editor to embed external resources from other sites eg Padlet and OneDrive ( a godsend for PowerPoint integration - see below)
  • the LTI integration tool for sites such as YouTube and Quizlet (although I wish there was more rigour/checking/information in the AppCenter)
  • the ReDirect tool which can push most external websites to your Canvas page eg Kahoot or Quizizz (although not sure why it must be https:)

I often get very frustrated with interactive content as either it is pre-designed and not quite right for the job and/or is beyond my rather very limited programming knowledge when I try to replicate it. Interactive content creation sites are few and far to be found.

I visited the above site slightly jealous as I assumed that the content was only suitable for Moodle. My mood did not improve when I tested out the range of resources and just how amazing they were - try them for yourself at Examples and Downloads | H5P

There are now 38 interactive resources in all grouped in 4 categories:

interactive2.GIF

A sample of them below include:

interactive3.GIF

interactive4.GIF

My mood lightened when I realised the following:

  • the resource is FREE and well supported
  • there is also an impressive roadmap with features added every month
  • the resources are HTML5 so will work on a range of different platforms
  • you can embed them in Canvas using iframes

There are plans to develop an LTI for this which could mean something similar for Canvas? Wouldn't it be awesome if the site could be given some support to do this? Vote for the Idea here - https://community.canvaslms.com/ideas/8844-h5p 

My first attempts at embedding content were not great mainly as there is some javascript included which allows the resources to be resized for different devices/screens. The example you see has had that script taken out. Twitter then came to my rescue, well the amazing Carli Tegtmeier, who found this guide to adding the activities to Canvas, complete with instructions for resizing (still beyond me but I know someone who can help). These can be found here - Using H5P with Canvas by Instructure | H5P

Today I have attempted to create my first resource and it has been rather successful.  The great news is that for the interactions I have tried, NO PROGRAMMING experience is needed whatsoever. There is a really simple wizard to guide you through. The site has a few size issues (on my SurfacePro and Google) which I might try to find out more about. Pretty much I just had a play and by trail and error found out what worked and what did not:

Would be interested to hear from anyone who has tried this out and more than happy to post examples of interactions here.. 

Here is a picture of the Accordion style design (which you can also do in Canvas). interactive13.GIF

I have updated the Accordion Feature on H5P and included a list of ten of the tools with worked examples - click the image link below:

273039_Capture.PNG

UPDATES

Please read through the Replies to see UPDATES to H5P. I have added in more examples as more features are added to their site!

 

51 Replies
GideonWilliams
Community Champion

Here is a link to the Accordion style design (which you can do in Canvas). interactive13.GIF

By each drop down you will find an example of three different interactive features which are AMAZING!

Click here to try it out (UPDATED Mar 2018)

GideonWilliams
Community Champion

How often have you tried to find a Drag and Drop Quiz generator?

Here is one that I made with the site - Family Guy Drag and Drop

375px-Family_Guy_Logo.svg.png

Its not perfect and a few features need to be sorted but as far as I know there are no other free sites that let you do this...

clong
Community Champion

Great find Gideon. I really like the timeline tool they have.

Not tried that yet but how smooth is it? The drag and drop is not publically available yet but is not that difficult to work through.

Just need someone much cleverer than me to sort out the javascript links so the resources resize then next stop could be reporting back to the gradebook if LTI developments carry on.

Its a great community supported and driven resource and one that needs to be promoted especially being HTML5 based...

Stefanie
Community Team
Community Team

 @GideonWilliams , this is an awesome resource, and I'm looking forward to playing around with it. I've shared your writeup with the Instructional Designers​ group, as they will love this! Smiley Happy

Thanks Stefanie

Be great if someone could produce an example of it embedded in a course with the javascript features for resizing too (perhaps with a nice easy step by step guide for the rest of us Smiley Wink

GideonWilliams
Community Champion

H5P is not alone!

To be fair, Edueto (listed as an LTI on Canvas) and discussed on Larry Ferlazzo's blog (link to it - scroll down a bit)

It has a range of tools including PicTag which does drag and drop labelling:

edueto.GIF

Whilst I have used it as a standalone feature, I have really struggled to get it working through the LTI - see Edueto LTI Problems

Its a real shame as it has a lot of potential and anything that can be 'embedded' on the same platform is a winner for me...

UPDATE MAR 2018: Edueto no longer available or supported

mlattke
Instructure
Instructure

 @GideonWilliams ​, I'm so excited to see other Canvas users using H5P!  I discovered them about a year ago and talked to the developers about the possibility of an LTI for Canvas.  The tool has grown a tremendous amount in a year.  The best part as you mentioned is that it is a community driven open project!  So it isn't one of those things that starts out free, gets you hooked, and then turns into a paid service.  I tested the embedding in Canvas initially and helped them with the guide for using it in Canvas.  BUT, my dream is for them to make an LTI integration for Canvas.  You can see it is #8 on their roadmap (Roadmap | H5P ), but interest drives development, so Canvas Community members, message them and let them know you use Canvas and support an LTI integration, if you want to see it happen!  You can tweet them (@H5PTechnology) | Twitter) or shoot them a message (Contact | H5P).  We don't have onsite developers in our district, but if anyone does, I think a little help their way with the LTI part would make a big difference.

Yay for interactive content!!!

Thanks for your support and promotion and encouragement and enthusiasm and excitement. The more we share outside of Canvas the greater the chance of future developments. Really pleased to see my 'local' university is helping them with a project too.