Playing with .html in Canvas

I recently attended a CanvasCon event in Dallas and had a chance to learn some new tricks for maximizing my use of my district’s learning management system, Canvas by Instructure. I have been using Canvas for three years now, and the folks at Instructure are constantly adding to and improving the product. I teach a computer applications course to 9th graders and my course is built exclusively around Canvas.

Canvas, which is free, by the way, to teachers is a very robust industry leader that allows me to build a strong, blended learning experience for my students. I’m certain that there are some differences between the free version and the version that my district pays for, but it is worth every penny invested. When I need it to be completely online, it functions extremely well in that capacity, too, allowing me to meet the needs of homebound and absent students very nicely.

Back to CanvasCon, though, and something really cool that I learned howh5p-logo-box to use at that event. In a session sponsored and led by a crew of consultants from our Education Service Center Region 11 from Fort Worth, I learned about a third-party tool called (See the #canvaschicks on Twitter.)

According to the H5P website, users can “create interactive content by adding the H5P plugin to yourWordPress, Moodle or Drupal site, or you can create content directly on and embed it on your website.” Add Canvas to that list.

Using the plug-in to create interactive elements has allowed me to experiment with elements that improve the functionality and the visibility of my lessons in Canvas. I have been able to create and embed via .html these types of content in my Canvas lessons:

  • Accordion vertically stacked content
  • Image juxtaposition files that allow amazing comparison/contrast activities
  • Collages and Hotspots that allow for the identification of key images within a series
  • Embedded video-based quizzes
  • and more

I was even able to backdoor the installation of an audio file in my Weebly portfolio site,   (a feature not normally allowed in the free version) by creating the audio file in H5P and then embedding it into an .html box inside of Weebly. The result was exactly what I wanted.

Now,  this post is obviously not a full-blown training event, but I am working on a demo video that will explain this a little better for visual learners like me. Or, you can just go to, create a free account and play around with the toys in the toolbox. You’ll be amazed!

Try out the Image Juxtaposition function by clicking the photo below. You will be taken to a module in Canvas in which you can use the vertical slide to move the image from 100% color to various degrees of black and white.

Grand Carousel1


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s