Showing results for 
Show  only  | Search instead for 
Did you mean: 

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

Community Champion
9 7 1,358

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:

Community Coach
Community Coach

Oh my goodness  @GideonWilliams , this blog oozes so much gorgeousness. Loads of cool ideas and so much thought has gone into it all. Thanks so much for the share. 

Community Champion

Ha! Those are very kind words. Took a while, hope it works... I do like the Badges and H5P is also such a great tool..

Community Coach
Community Coach

Wow,  @GideonWilliams  this is an awesome share!

Not only is this great design work, but it will be so helpful to our members who are just getting started, especially our K12 folks. Although the design features are just as appropriate to HE. I am also very happy to see that you used HTML5!

Way too cool!

Thanks you,


Community Champion

You are too kind Kelley, many thanks.

Community Contributor

Nice job on the reference materials.  I like the countdown clock. I am looking at ways to add it to our courses.  

Community Participant


You've shown us a brilliant example of great designing to engage and collaborate in Canvas. I love how you developed Missions and used badges to track personal learning path! ( reminds me Breakout EDU) Thank you for sharing.

I will try to do something like this  for my students. Looks like a lot of work, but I really like it. May you share the examples  of the students' hangouts ? I'm not a geat designer and do not know coding, but I will try my best.

I was triying to use badges last year, but for some reasons is doesn't work (on the "Complete Module" part).

Community Champion

Happy to do a skype or something to go through it. Not quite sure what you mean about sharing  the hangouts? I am no coder - just a good copier and editor :O)