A dashboard view of Modules in Canvas

Updated version: A dashboard view of Modules in Canvas v2

Canvas’s Modules page is a great way to show students both what is available to them and their progress through those materials. However, I’m concerned that:

  • it may be overwhelming to see everything in your course on a single page
  • it present a very linear view of a course – this may be appropriate in some circumstances but is certainly not appropriate in many HE courses.

The typical solution to this appears to be to create a course home Page where you can wrap/organise your content as you see fit. Two great guides to this are:

However, this approach has two disadvantages:

  • I’ve already spent time and energy organising, titling and indenting my content – why should I have to create a page of links pointing to that content?
  • The Modules page gives you great feedback on progress through your course – which content you have ‘completed’, what’s next, etc. A links-based home page is going to hide all this from you.

So, what we need is some way of making the Modules page more navigable. There are plenty of requests for this on Canvas’s Community pages and it would indeed be more sensible for Instructure to tackle this themeselves. However, if you’d like something that will work in the shorter term and are happy to add your own js/css, you might find the approach below interesting.

Autogenerating a Modules ‘Dashboard’

With some fairly simple JQuery, a custom stylesheet and a module naming convention it’s relatively simple to autogenerate a ‘dashboard’ of Canvas-style cards which gives students an overview of, and an easy way to navigate to your modules. ‘Top’ buttons on every Module give a quick way back to the dashboard no matter how many modules your site contains.

The JS:

Note that this assumed that Modules are named:

Module x. My module description

The code splits the Module name, based on the characters specified by the ‘delimiter’. So, in this case, my title will be ‘Module x’ and the sub-title will be ‘My module description’. You will need to chnage this caharacter if you want to split on say ‘:’.

and the CSS:

You’ll see that this css is very largely the same as the Canvas Dashboard styles but I have renamed them ‘ou-‘ so that we can make sure they are available on the Modules page and so that we can alter them as necessary.

Hope that’s useful to someone. It’s a work in progress e.g thinking about pulling in Module progress indicator(s), number of items in module, etc. Do get in touch is you spot any problems.

Bootstrap image header with title and coloured bar

It’s not rocket-science but, in case anyone else is looking how to do this, based on this post: http://forums.asp.net/t/2067649.aspx?bootstrap+thumbnail+image+with+text+inside+and+green+big+line+on+the+bottom



<div class="row">
 <div class="col-md-6">
  <div class="forum-image header-image">
   <div class="h3 heading-text">FORUM</div>
   <div class="heading-border"></div>
  <div class="content-container"></div>
 <div class="col-md-6">
  <div class="calendar-image header-image">
   <div class="h3 heading-text">CALENDAR</div>
   <div class="heading-border"></div>
  <div class="content-container"></div>


 position: relative;
 height: 150px;
 background-position: center;
 background-size: cover;
 position: absolute;
 bottom: 10px;
 width: 100%;
 padding: 10px;
 margin: 0px !important;
 opacity: 0.8;
 color: #373737;
 background-color: #d8d8d8;
 position: absolute;
 bottom: 0px;
 width: 100%;
 height: 10px;
 min-height: 200px;
 margin-bottom: 15px;
 border: 1px solid #cccccc;
 padding: 10px;
 background-image: url(../img/calendar.jpg);
div.calendar-image div.heading-border{
 background-color: #00147a;
 background-image: url(../img/students_chatting.jpg);
div.forum-image div.heading-border{
 background-color: #be0f35;


Calendar image by Dafne Cholet under Creative Commons Attribution 2.0 Generic

Forum image by Knight Foundation under Creative Commons Attribution-ShareAlike 2.0 Generic

Google Maps Autocomplete in Bootstrap Modal

I’ve just spent a while struggling to get a Google Maps API v3 Places Autocomplete search text box working in a Bootstrap JS Modal. It seemed as though the autocomplete wasn’t working at all, which I initially thought meant that I had messed up my JQuery selectors. However, it turns out that it the autocomplete was working (I could use the down arrow to toggle through the results), but the results were being shown behind the modal box. The z-index of the modal box is 1040 by default, whereas that of the .pac-container div that shows the autocomplete results is 1000 (defined inline).

Therefore, the solution (easy when you know how) is to change the z-index of the .pac-container div to greater than 1040, so that it appears on top of the modal. Since the z-index of .pac-container is defined inline, it is necessary to use !important to override this inline style with from an internal/external stylesheet:

div.pac-container {
   z-index: 1050 !important;