Embedding a GitHub gist in Instructure Canvas

I needed to have syntax highlighted code embedded in Canvas. While there are a couple of LTI tools that purport to allow embedding of code, LTI tools receive data about users which mean that using those hosted by third parties comes with issues around vetting of the tool provider for compliance with GDPR, University regulations, etc.

So, I thought, why not just embed GitHub gists directly? Because GitHub is a widely used source code repository, our coders will know how to use it and our students should know how to use it. You can also reuse existing gists/make code from your course available more widely.

The embedding is achieved by Blair Vanderhoof’s gist-embed . This is a JS library which requires JQuery. Kenneth Larson’s post in the Canvas Community on Mobile Javascript Development provided the solutions to both:

  1. Making sure that JQuery was available for gist-embed (both on the Web and in the Student app) and
  2. Giving us a way to upload the gist-embed JS into Canvas.

The JS

The code, as a gist of course :), is below:

You will need access to the Sub-account of the course you wish to use this in – then you simply use the normal Theme editing tools to upload this JS to both the JavaScript file and Mobile app JavaScript file boxes.

The HTML (in a Canvas Page)

Use a <p> tag or similar to embed the gist – the suggested <code> tag from  Blair Vanderhoof’s gist-embed instructions is stripped out by Canvas when you go to Edit it:

One thing to note is that, if you have long lines in your code, it may be easier for those using the Student app if you leave leave the footer in the embedded code so that they can click to see it in GitHub.

The end result

The fine print

Please do heed Canvas’s warning:

  • Custom CSS and Javascript might cause accessibility issues or conflicts with future Canvas updates. Before implementing custom CSS or Javascript, please refer to our documentation

  • CAVEAT: while you can create and embed ‘secret’ gists, they work with a private url which means that, while they should be difficult to discover, they are visible to anyone with the URL. So don’t use this with code which is top secret!

Angular Reactive Form Custom Validator for ORCID (plus Laravel rule)

Since I struggled a bit with putting this together, thought it might be useful to document it.

ORCID provides a handy guide to the Structure of the ORCID Identifier which includes a little function that calculates the 16th ‘checksum’ character of every ORCID id. This is a great way to check that a user hasn’t mis-typed/mis-copied their ORCID id into a form.

Our Angular validator for reactive forms is shown below:

All this really does is wrap that check digit generator from the ORCID website. To use this in a reactive form, the relevant bits of code are shown below:

If anyone can write me a bit of regex to check that the rest of the URL, after https://orcid.org/ is xxxx-xxxx-xxxx-xxxx, I’d be very grateful!

Finally, in the html (note am using Angular Material here), check for errors on the orcid FormControl (available like this  because of line 20 above) and display the approprioate <mat-error>.

…and if you’re saving your ORCID ID in a Laravel api backend as I am, the same checksum validation as a Laravel Rule:

…and in the update method of my UserController, the validation rules look like:

Note: the ignore clause on the unique rule would not be required in the store method as this user’s id and ORCID id would not be expected to already exist

Any suggestions for improvements gratefully received.

 

 

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:

Working with the Canvas API in plain JS – Pt 1

With the Canvas app not supporting JQuery (unlike the web application, which does), it make sense to write all custom JS in plain Javascript so it works across both platforms. This makes sending requests to the api harder than it would be in JQuery – apparently, JQuery $ajax request already has the necessary credentials attached.

With some help from various wonderful people on the Canvas Developers forum, the code below will query the Canvas API as the logged in user and log to the console(!).

var csrfToken = getCsrfToken();
console.log('crsfToken', csrfToken);
fetch('/api/v1/conversations/unread_count',{
          method: 'GET',
          credentials: 'include',
          headers: {
               "Accept": "application/json",
               "X-CSRF-Token": csrfToken
          }
     })
     .then(status)
     .then(json)
     .then(function(data) {
          console.log(data);
     })
     .catch(function(error) {
          console.log('Request failed', error);
     }
);

/*
 * Function which returns csrf_token from cookie see: https://community.canvaslms.com/thread/22500-mobile-javascript-development
 */
function getCsrfToken() {
     var csrfRegex = new RegExp('^_csrf_token=(.*)$');
     var csrf;
     var cookies = document.cookie.split(';');
     for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i].trim(); var match = csrfRegex.exec(cookie); if (match) { csrf = decodeURIComponent(match[1]); break; } } return csrf; } /* * Function which returns a promise (and error if rejected) if response status is OK */ function status(response) { if (response.status >= 200 && response.status < 300) {
          return Promise.resolve(response)
     } else {
          return Promise.reject(new Error(response.statusText))
     }
}
/*
 * Function which returns json from response
 */
function json(response) {
     return response.json()
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Some things to note:

  • I’m using the fetch() method as I like working with promises – fingers crossed that it’ll work in the app!
  • using James Jones csrf extracting function to populate the X-CSRF-Token header;
  • using “Accept”: “application/json” to tell Canvas that we want json and it then doesn’t include the while(1) stuff (try it without to see what I mean)
  • using credentials: ‘include’ to tell fetch() to include the Cookie in the request as this is what Canvas seems to expect

The next step is to do something useful with the api – the first goal is to add next and previous buttons to pages linked to in the mobile app (currently you will only see these if you launch into a page through the app-specific Modules page).

Remote Debugging Samsung Galaxy 7 Edge with Chrome

If you’re confused as to why something which is working well on your Canvas site, isn’t working on the Student App, Google Chrome gives you a great way to find out what’s going wrong with its Remote Debugging Android Devices

Annoyingly, it’s not quite as easy as one would hope on a Galaxy S7 Edge or, by the sounds of it, any Samsung device, on Windows 10 anyway.

Extra steps required above what’s on the page above, for me anyway, were:

  1. Enabling USB Debugging. On A Galaxy S7, to turn developer mode on, you have to go to About phone | Software info then tap Build number 7 times(!?). You can then access the Developer options (at bottom of Settings) to switch on USB Debugging.
  2. On Windows 10, to even get the Device to be recognised, you need to:

If you have a Mac available, you don’t seem to need to bother with Step 2 above – it just works!

 

Progress bar in Instructure Canvas

WARNING: Note that themes allow you to upload .css and .js files for both the web and app versions of your Canvas site BUT the app does not provide JQuery so you’ll need a plain JS version of your code for the app…or pull in JQuery.

The Bootstrap progress bar doesn’t appear to be available within pages. Instead, use the JQueryUI progress bar (for the web version of Canvas anyway):

I have styled this in one of our courses as follows.

HTML

<div class="ui-progressbar ui-widget ui-widget-content ou-ProgressBar module_6" style="width: 100%; height: 15px;" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="19">
    <div class="ui-progressbar-value ui-widget-header ui-corner-left ou-ProgressBarBar" style="width: 19%;"></div>
</div>

CSS

.ou-ProgressBar {
 height: 15px;
 margin-bottom: 3em;
}

.ou-ProgressBar.module_6 .ou-ProgressBarBar {
 border: 1px solid #640D14;
 background-image: linear-gradient(to bottom, #640D14, #640D14) !important;
}

TL;DR

In fact, I actually use JS to insert the HTML above based upon a div like this:

HTML

<div id="module_6" class="ou-insert-progress-bar">19</div>

JS

if($('div.ou-insert-progress-bar').length){
    $('div.ou-insert-progress-bar').each( function(index) {
        //get data from insert-progress-bar div
        var value = $(this).text();
        var className = $(this).attr('id');
        //UC first letter
        var viewName = className.toLowerCase().replace(/\b[a-z]/g, function(letter) {
            return letter.toUpperCase();
        });
        viewName = viewName.replace(/_/g, ' ');
        //create progress bar and title
        $(this).after(''+
            '<h4 class="ou-space-before-progress-bar">Current position in ' + viewName + ':</h4>' +
            '<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all ou-ProgressBar ' + className + '" style="width: 100%; height: 15px;" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="'+ value +'">' +
                ' <div class="ui-progressbar-value ui-widget-header ui-corner-left ou-ProgressBarBar" style="width: '+ value +'%;"></div>' +
            '</div>' +
            '');
    });
}
//End by deleting div.insert-progress-bars
$('div.ou-insert-progress-bar').remove();

Far TL;DR

If you also want this to appear in the app (where neither JQuery nor JQuery UI are available), you’ll need to use the plain JS version of the above and update the styles:

JS

//From: https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib
function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

/* Trying plain JS so that it works in the app as well */
function domReady () {
	//get all elements with classname ou-insert-progress-bar
	var progressBarPlaceholders = document.getElementsByClassName('ou-insert-progress-bar');
	Array.prototype.forEach.call(progressBarPlaceholders, function(progressBarPlaceholder) {
		var value = progressBarPlaceholder.innerHTML;
		var className = progressBarPlaceholder.id;
		//UC first letter
		var viewName = className.toLowerCase().replace(/\b[a-z]/g, function(letter) {
			return letter.toUpperCase();
		});
		//replace underscore with space
		viewName = viewName.replace(/_/g, ' ');
		//create our new element
		var progressBarContainer = document.createElement("div");
                progressBarContainer.innerHTML = ''+
                    '<h4 class="ou-space-before-progress-bar">Current position in ' + viewName + ':</h4>' +
                    '<div class="ou-ProgressBar ' + className + '" style="width: 100%; height: 15px;" role="progressbar" aria-valuemax="100" aria-valuemin="0" aria-valuenow="'+ value +'">' +
                    ' <div class="ou-ProgressBarBar" style="width: '+ value +'%;"></div>' +
                    '</div>';
                //insert it after the placeholder using the function insertAfter
                insertAfter(progressBarContainer, progressBarPlaceholder);
                //now delete the placeholder
                progressBarPlaceholder.parentNode.removeChild(progressBarPlaceholder);
       });
}
//Function to work out when the DOM is ready: https://stackoverflow.com/questions/1795089/how-can-i-detect-dom-ready-and-add-a-class-without-jquery/1795167#1795167
// Mozilla, Opera, Webkit 
if ( document.addEventListener ) {
	document.addEventListener( "DOMContentLoaded", function(){
		document.removeEventListener( "DOMContentLoaded", arguments.callee, false);
		domReady();
	}, false );
// If IE event model is used
} else if ( document.attachEvent ) {
	// ensure firing before onload
	document.attachEvent("onreadystatechange", function(){
		if ( document.readyState === "complete" ) {
			document.detachEvent( "onreadystatechange", arguments.callee );
			domReady();
		}
	});
}

CSS

.ou-ProgressBar {
  height: 15px;
  margin-bottom: 3em;
  width: 100%;
  border-radius: 3px;
  border: 1px solid #aaa;
  background: #fff;
  overflow: hidden;
}

.ou-ProgressBarBar {
  height: 100%;
}

.ou-ProgressBar.welcome .ou-ProgressBarBar {
  border: 1px solid #D89E17;
  background-image: linear-gradient(to bottom, #D89E17, #D89E17) !important;
}

Materilize CSS: Change Tab text and indicator colour using only HTML and colour classes

When using the excellent Materialize CSS framework, it isn’t immediately obvious how to to change both text and indicator/underline colour of Tabs using only HTML and the Materialize colour classes (i.e. no changes to CSS).

To change the text color, just add the text-colour classes to the <a> tags, e.g.:

<a class="indigo-text text-darken-4" href="#test1">Test 1</a>

To change the indicator/underline colour, you can insert this before the </ul>:

<div class="indicator indigo darken-4" style="z-index: 1;"></div>

To wrap this up as a complete, 2-tab, example:

<div class="row">
  <div class="col s12">
    <ul class="tabs">
      <li class="tab col s6">
        <a class="active indigo-text text-darken-4" href="#test1">Test 1</a>
      </li>
      <li class="tab col s6">
        <a class="indigo-text text-darken-4" href="#test2">Test 2</a>   
      </li>
      <div class="indicator indigo darken-4" style="z-index: 1;">
      </div>
    </ul>
  </div>
  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>
</div>

CakePHP 3: Access a method from one Behavior (or the Table class) in another Behavior

Please note that this post refers to CakePHP 3.

Short answer is, as long as you have added both Behaviors in the Table class, you can call a method from one Behavior in another as follows:

class SecondBehavior extends Behavior {
    public function secondBehaviorMethod() {
        return $this->_table->firstBehaviorMethod();
    }
}

I couldn’t find anything about this in the docs, so initially I hoped/presumed that, as long as I had added both Behaviors to my Table class, it was simply a case of calling the method as I would in a Table, so:

In MyTable.php:

public function initialize(array $config) {
    ...
    $this->addBehavior('FirstBehavior');
    $this->addBehavior('SecondBehavior');
}

In FirstBehavior.php:

class FirstBehavior extends Behavior {
    public function firstBehaviorMethod() {
        return "done";
    }
}

In SecondBehavior.php:

class SecondBehavior extends Behavior {
    public function secondBehaviourMethod() {
        return $this->firstBehaviorMethod();  //Gives "Call to undefined method" error
    }
}

However, this just results in a “Call to undefined method” error. However, Behaviors have the $_table property (see the Behavior API) that allows you to access other methods of the current Table. Therefore, just adding _table to the call to firstBehaviorMethod ($this->_table->firstBehaviorMethod()) fixes the issue. As well as accessing methods from other added Behaviors, you can also use find ($this->_table->find(…)), etc.

Self-test questions in Moodle

In an earlier post I outlined plans for migration of MedLearn to Moodle. The technical work is now done except for editor plugins. The migration is well underway.

The tricky bit was getting the self test questions to work. The purpose of self test questions is to enliven content and enhance learning. They are not intended to be an assessment, although it may be useful to record the answers.

The Quiz activity provides the best range of question types but it also forces questions into an assessment with a very specific workflow (start attempt; answer questions; finish; submit; review). We wanted a much looser workflow which did not present questions as a quiz. The answer (suggested by Tim Hunt) was to embed a preview question in an iFrame. We chose the Book module for the content into which the questions were embedded.

Students log in to our VLE (Sakai). They then launch an LTI tool which automatically provisions them in Moodle. They are assigned an adapted set of permissions to avoid the issues highlighted by Tim Hunt in this post. The LTI provider plugin does all the provisioning, including the assignment of the role with the permissions.

Questions are inserted into the book content using Generico filter and Atto plugin. I’ve defined a template which just takes the question number and applies the correct iFrame. A Javascript frame resize script triggers on load (and on change) so that the question appears seamlessly in the content. The plugin also has an Atto editor plugin to simplify editing.

I have modified the preview PHP so that the title and config have been stripped off, leaving just bare question with answer box and ‘check’ button. The preview PHP still accepts the querystring configuration so I passed &correctness=0&marks=0&markdp=0&feedback=1&generalfeedback=1&rightanswer=1&history=0 to it in the Generico template.

The script tag to load the JavaScript resize code is in AdditionalHTML config.

We’ve also made the content more mobile friendly using Bas Brand’s Bootstrap  3 theme and more semantically relevant HTML5 tags such as <figure>, <cite>, <dfn> and <dl>. We are about to start authoring Atto plugins to support these tags. JQuery is used to for image swaps, replacing the mouseovers and flash which aren’t mobile friendly.

The only missing feature which would be really nice to have is a way of browsing the questions from the question bank for insertion. It’s currently a little clunky to find the question ID for use in the Generico Atto plugin.

My thanks go to Tim Hunt, Juan Leyva (LTI Provider) and Justin Hunt (Generico) for making the tools which underpin this integration.

Migrating MedLearn to Moodle

Medical Sciences Division hosts its teaching material in a system called MedLearn. The pages are mixed with 2D and 3D images, video, interactive content and self test questions.

For 10 years we’ve used Magnolia CMS. It was a good, simple system. In the last 4 years they’ve released 5.x.x which requires significant effort to migrate. We tried to find an upgrade path but couldn’t without spending more than our budget. Staying on the 4.x.x branch was fine until a recent Java security changed stopped us from publishing new pages. We have decided to migrate.

There are plenty of CMS and VLEs to choose from but they need to be maintainable and free. We chose Moodle because it’s free, extensible and fits with our technology strategy. We were particularly happy with the variety of questions available through the Question Bank.

Moodle doesn’t really support our mix of teaching materials with self test question. The Book module provides a good structure for the teaching material; the Quiz Activity provides assessment. We wanted to mix these together. Lesson tool was discounted because the questions are too restrictive, the authoring is confusing and the questions are on separate pages

We think that we’ve found the solution with the Generico filter plugin and its accompanying Atto plugin. The filter will write in an iFrame showing a preview of the question. In due course we may change it to call Javascript which writes preview content into the page. All that’s missing is a method of browsing the Question Bank.