cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Community Advocate
Community Advocate

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!

 

50 Replies
Highlighted
Surveyor

Gideon.Williams@britishschool.nl‌ update: I started playing around with h5p about week ago & I am in love! I think my favorites are Column, Course Presentation and Interactive Video. I especially like that I can put a variety of things in the Column interactive.  The reports generated at h5p.com are pretty robust, if not particularly user friendly.  My only disappointment so far is that free text response questions (available in the interactive video) are only grade-able via the reports which is...not straightforward and requires way too many clicks (unless I'm missing something?)

Anyway, thanks for originally sharing this resource - it's going to make my life so much easier!

0 Kudos
Highlighted

Thats kind of you for commenting, thanks. Do share your ideas here... Ive not updated this post for a while so should really add to it.

Highlighted

I really like your EM spectrum sort activity! I'll be playing with HP5 this summer & I can't wait! Thanks for your posts - very informative!

0 Kudos
Highlighted

I saw the tweets from H5P earlier today:

331748_pastedImage_2.png

331741_pastedImage_1.png

We now have the integration feature which we pay for which is not affected by this. 

I guess it make sound financial sense from them. It just goes to show that by far the most effective way of presenting the information is by embedding and creating interactions on the page.

0 Kudos
Highlighted
Community Member

ALERT!  The embed feature for H5P.org has been disabled as of 12/4/2019!  They did not send any notification, we just noticed it in our courses.  If you have been using this, you'll need to go through and fix the broken iframes.  We've been changing the h5p.org/h5p/embed/###### source in the iframe and changing it to an href in <a> tags like this h5p.org/node/###### as a temporary solution.  I think ultimately, though, we may be through with H5P.

Highlighted
Community Advocate
Community Advocate

If you are using H5P.com and integrating H5P quizzes in Canvas then please consider voting for this idea - https://community.canvaslms.com/ideas/15510-h5p-integration-student-generated-quizzes-and-canvas-dis... 

Highlighted
Community Advocate
Community Advocate

When working with student designed Drag and Drop H5P interactives I often use this template in Word.

331439_pastedImage_1.png

Students can then use the Snipping Tool to save as png images and upload to the background. I get them to visit the image in their Documents folder to check on the actual size and then adjust it rather than stick with the default one eg

331440_pastedImage_2.png

Always easy to forget room for the labels!

0 Kudos
Highlighted
Community Advocate
Community Advocate

H5P integration allows straightforward embedding in Canvas pages. Drag and drop labels example from one of our Biology teachers. Printscreen of a Canvas page:

331411_gasexchange.png

0 Kudos
Highlighted
Community Advocate
Community Advocate

H5P Updates

Word Search Interactive

322017_pastedImage_1.png

Very similar to most. The user interface if fine if a little different to most Word Search style games  (you click on the first letter and hold down the mouse. A green band appears which then increases in length when you move to other letters and remains highlighted if you get the correct answer)

What you can do

  • You can choose what range of letters you want in your grid (the default is a-z)
  • You can choose to have the answer list or not.
  • You can also choose how close to each other where the hidden words are.
  • You can also choose to show where the answer are too.
  • You can select the orientation of the answers (by default it orientates them in all directions eg diagonal bottom to top, horizontal left to right etc)
  • Embed the quiz in a Canvas page or provide a link to it


What you cannot do

  • Does not do special characters so limited for language use.
  • You cannot have numbers or spaces - the grid is 14 x 14 letter
  • You size of the grid is fixed. 


Example

Canvas Features | H5P 

Overall Thoughts

Nice simple activity, concerned a little at the size of it although there is some javascript code available to allow it to resize on the page. Would like to have option of limiting grid size. Having special characters would have positive impact in MFL classes. I have tried this on a touch screen device (Surface Pro) and works really nicely (press down on first letter and move finger to last letter)

0 Kudos
Highlighted
Community Advocate
Community Advocate

Long while since I added to this post. Some updates that were particularly interesting to me:

H5P Updates

Branching Scenario Quiz (Beta)

A quiz with multiple scenarios (branches) depending on the answer you choose. Often used for simulations. You can choose to create video responses but also available are: Course presentation, images, text, Image hotspot, video and interactive video. There is a good Help Guide to explain how it works. This video example is awesome - 

http://insights.nursekillam.com/innovation/h5p-awesomeness/

Student Author Permissions (via Canvas Integration)

Allow students to create H5P activities and interactions on your LTI. Students are able to use all parts of the authoring tool available for regular authors. A student author is not allowed to see reports, add collaborators or access organization folders. Students can only make the content they create available for others via LTI and not publish it themselves

0 Kudos