Introducing Canvas to Junior Schools - Page Design, Badging, Portfolios and H5P

Community Champion
9 7 2,131

On Wednesday we have our second annual Canvas Day for our Year 6 Junior school students. It is an event that introduces the students to Canvas and prepares them (in part) for more extensive use the following year in the Senior school. See here for my blogpost from the previous year How we introduced Canvas to our Junior schools

Here is a video of the Home page. I found a countdown timer that embeds via iFrame!

This video is currently being processed. Please try again in a few minutes.
(view in My Videos)

In order to get my head around badges and conditional activities in Modules, I created a series of Mission Modules for the students. Each module has different criteria for completion and all have to be done in sequence:

I used some Prerequisites too which mean that students can see the Modules but cannot yet open them - its a nice feature..

The modules are tied to Badgr badges. Next year we plan to invest in the Badgr Learning Pathway feature Badgr: Badges, Badge Stacking and Pathways......  to reward students' digital skills and recognise their attributes above and beyond school lessons, so this is a gentle introduction to it.

I created the badges in Word!! and developed them with some simple graphics editing in Pixlr:

Badges are awarded for Module completion with the criteria added for each task.

A much greater challenge this year was to design pages that were easy to read on students' iPads. I drew extensively on the ideas shared in the Canvas HTML Tricks and Tips course to try to create more engaging pages eg buttons and text boxes:

One of the biggest and most time consuming task was to create pages that looked good on the iPad. We use Surface Pros in the Senior school and the design of the pages looks very different when on an iPad (I did not bother with the Canvas App as it would only have confused matters further).

Here is an example of what I mean:

FIRFOX in Windows

iPad in Safari (with Navigation menu)

Other little foibles for those working with iPads include having to double click on the Next/Previous buttons!

We are going to try our hand at creating an ePortfolio with information based on the day and some preparation for the day. Students will submit the link to the ePortfolio as an assignment which will be peer assessed via a rubric. Ambitious!

I've created a series of handouts that guides the students through the work and we have plenty of support at hand.

The one bit I am most pleased with is the embedded use of H5Ps interactive video (H5P - Free Interactive Content Creation with HTML5 if you are interested). 

The main task that students do as a team is a Quiz. I wanted to stagger the entry to the quiz and create a bit of tension. I took a 60 second promotional video that the school used and added Crossroads feature onto the Interactive video. This allows you to place MC questions at different parts of the timeline. You can below then move students to different locations (ie backwards) depending on their answers.

I created 5 observation based questions throughout the timeline (see the blue circles)

Example of a question with choices at 8 seconds into video:

What happens if students choose a wrong answer - go back to start!

The Interactive feature also includes a Summary set of questions which reviews your understanding of what you watched. I repeated the questions and then altered the scoring chart at the end.

If students scored 5/5 they got a message with the Access Code to the main Canvas quiz.

The scoring range is below. I've blanked out the code in case any students read my blog!

I foolishly designed the main quiz with not checking if the Access Code worked with iPads - it does not!! I then recreated the quiz back in the old Quiz feature - it does..

Some things I changed/learned when making the pages:

  • I created tables using % rather than fixed widths - hoping it would impact less on iPad
  • I altered the banner headings for each page to 100% width - again hoping it would impact less on iPads
  • Where possible I encouraged the use of hiding the Navigation Menu to increase screen acreage
  • Very few designers seem to test on iPad and Safari
  • You need a test buddy to try things out and report back! Thanks so much Liz Jones. Wouldn't have caught the H5P issue with Go To target otherwise (H5P interactive videos seem to lag about 1s behind Windows based)


Just going through the course and updating the quiz scores as it was a team task to make sure students are given Badges for their performance. The Badgr individual Learning Path looks particularly impressive:

It has also been nice to see so many badges earned from the Leaderboard too: