Month: June 2018

Posted on

Styling & Layout in Instructure Canvas

Your first stop for any questions re: styling components and layout should be Canvas’s Style Guide

Styling

Table

Give your tables a Bootstrap feel with, striped rows, hover highlight, etc (see CANVA101 course for full description)

Header row, striped rows and, in second picture, showing hover effect on Week 1
<table class="ic-Table ic-Table--hover-row ic-Table--striped" style="border-collapse: collapse; width: 100%;">
    <thead>
        <tr>
            <th style="text-align: center;">Week</th>
            <th style="text-align: center;">Tasks</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align: center;">1</td>
            <td>Week 1 tasks</td>
        </tr>
        <tr>
            <td style="text-align: center;">2</td>
            <td>Week 2 tasks</td>
        </tr>
    </tbody>
</table>
Icons for links

Canvas icons can be shown on the left of any link (see Pauleds guide for full list of icons)

Add a huge range of Canvas icons to links
<a class="icon-twitter" href="https://twitter.com/allotmentor">Follow me on twitter</a>

Layout

While Canvas appears to provide parts of Bootstrap 3, JQuery UI and Flexbox Grid, not everything is available within an individual page.

Grid

When setting out grids, instead of:

<div class="row">

, use, 

<div class="grid-row">

Further details on Canvas’s implementation of Flexbox Grid

Responsive, centred YouTube embed

Sadly, Canvas doesn’t seem to have included the Bootstrap styles for this, so I use the CSS upload to add the standard Bootsrtap responsive embed styles.

HTML

<div class="grid-row center-xs">
    <div class="col-xs-12 col-md-9 col-lg-6">
        <div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/DFthTUAAMRI?rel=0&amp;showinfo=0" width="300" height="150"></iframe></div>
    </div>
</div>

(Note that the width and height attributes are inserted automatically by Canvas but are ignored)

CSS

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive-4by3 {
  padding-bottom: 75%;
}
Posted on

Towards a Modules navigation menu in Instructure Canvas

It feels as if navigation in Canvas is a bit of an afterthought.

If you navigate to a page via Modules, the breadcrumb shows ‘Pages > Pagename’ rather than ‘Modulename > Pagename’. No one wants to see the list of Pages displayed if you click ‘Pages’ but hiding the link from students will mean they see an error message every time they click on it.

Given that the breadcrumb effectively doesn’t help, that leaves the ‘Next’ and ‘Previous’ buttons – fine if you are working through linear materials in an online course but much less relevant in blended learning – and clicking on ‘Modules’ to go back to the list of modules.

So, I thought to myself, why can’t we have a menu system that shows a manageable view of the ‘Modules’ page on every page?

Right-hand menu in Canvas
Right-hand menu in Canvas

The menu allows you to both see where you are within the course (current page highlighted) and to quickly look for and navigate to other parts of the course without having to go back to Modules. The names of the modules are not links, rather clicking them opens and closes the list of module items (pages, quizzes, etc) within.

BIG CAVEAT: I haven’t yet tested this fully and its reliance on the presence of variables in ENV and/or the naming of div classes and ids means that it is liable to break as Instructure pushes updates to Canvas. ie USE AT YOUR OWN RISK

Smaller Caveat: Given the lack on the ENV variable in the Canvas student app, this code will not work in that

Quick explanation

Code is below, with plenty of commenting but some high-level explanation:

  1. The key to this is pulling data from the api about the course you are in – see this previous post on getting a token and calling the API from JS.
  2. In this case we are calling: https://yourinstitution.instructure.com/api/v1/courses/yourCourseId/modules?include=items&student_id=yourStudentId . The student_id (and in fact the whole call to the self api) aren’t strictly necessary as yet but, eventually, should allow me to pull in data about completion of each section which I could also display on the menu)
  3. We don’t want the menu to appear on every page – in some places it doesn’t make sense (e.g Modules) and in others it doesn’t look right. The two arrays dontShowMenuOnTheseElementIds and dontShowMenuOnTheseElementClasses allow you to specify elements to look for in the page which, if present, will prevent the menu from being shown.
  4. In other pages, Canvas inserts a div#right-side-wrapper. I’m not yet sure what should appear here so for the moment, append the menu to that div in pages listed in the array putMenuInRightSideOnTheseElementIds (dealt with in lines 119-146)
  5. On line 150, I add an event listener to divMenuWrapper which handles the showing and hiding (and changing the little arrow) of items within a module when the module name is clicked.
  6. Lines 230-274 are about recognising where we are within a module so that the active item can be highlighted in the menu. If you you are happy to limit the menu to situations in which you are navigating from Modules (see #1 in Other thoughts below) then you could do away with everything except the if statement on line 263.

Other thoughts

  1. If you are happy to only show the menu when you are navigating through a Module (ie have arrived at a page either from the Modules page or by clicking Next and Previous buttons), add ‘&& moduleItemId’ to the if statement on line 41.
  2. If you want to limit the menu to appearing only on a test course, insert the ID of that course into the if statement on line 41 as ‘&& courseId==yourCourseId‘
  3. Haven’t yet tried indenting the module items to reflect indenting on the Modules page but the data do seem to be there in the return from https://yourinstitution.instructure.com/api/v1/courses/yourCourseId/modules?include=items&student_id=yourStudentId as item.indent.

Do get in touch if it needs any further explanation and share any improvements – the live code is on GitHub.

The JS (note all Plain JS):

The CSS: