bootstrap – MSDLT Blog

December 1, 2017August 3, 2018

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.

April 11, 2016April 11, 2016

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

Html:

<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>
  <div class="content-container"></div>
 </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>
  <div class="content-container"></div>
 </div>
</div>

Css:

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

Acknowledgements

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