This document will show how to move the current course to the top of the "Find a Rubric" dialog and optionally sort and filter the information to make it easier to find rubrics.
The before list on the left has 30 items in a mostly random order. The after list on the right has all courses that ended more than 180 days ago removed as well as some other features enabled to help clean up the list. The list on the right will also show the full name of the course when you hover over a course name.
Quick Installation
Here are the quick install steps. It has been tested with Firefox, Chrome, and Safari.
- Install a browser add-on: Greasemonkey for Firefox or Tampermonkey for Chrome/Safari
- Install the Find Rubric Sorter user script.
The Problem
When adding a rubric to an assignment, discussion, or quiz, the current course is often buried in a list of courses rather than being listed first. And if your institution reuses the short name for courses, there is no easy way to tell which term the course goes with.
This image is the default list of courses that Canvas gives me when I click on Find a Rubric from an assignment in my MATH 230 course.
There is a MATH 230 that is shown at the bottom, but that may or may not be the current version of MATH 230. If I scroll down, I see that there is another one. They both say MATH 230 and both have 1 rubric in them. Which one is the current one?
It turns out that the correct course wasn't either one of those. If you scroll down a little further, you find the desired MATH 230.
The MATH 230 course I was in, which was also the active one this semester, when I clicked on Find a Rubric was 17th in my list of 30 courses. Other people have it worse than I do.
Since the course short name (course code) is used by Canvas in the rubric list and our institution doesn't use the term name in the short name, there's no way to tell which course is the current one. Even if I go into each one, I might have used the rubrics with the same names in the course the last time I taught it, so there still may be no way to tell even by the list of rubrics that shows up in the second panel.
Okay, saying that there is no way is a bit too strong. You can bring up the browser's Developer Tools and inspect the element. Once you have the element pulled up, you can expand the anchor tag inside the list element and then find the span with a class of context_code. It has a code like course_178711. The course is the context and the other context is account. The number that follows is the Canvas course ID, 178711. You compare that with the URL in the location bar, which in this case shows 2054972. The mismatch lets you know that you don't have the right course.
You then repeat this process with every possible candidate from the leftmost column until you find a match and then you know you have the current course.
Technically, a better expression of the difficult is that there is no easy, reasonable, user-friendly, non-technical way to determine which course is the right one.
The Solution
@tyler_mckell asked a question that turned into a feature request: https://community.canvaslms.com/ideas/8535-finding-rubrics . His request was to move the current course to the top of the rubric list. @kona sent me a message asking if we could do something about this and after a quick look, I wrote back that it seemed doable, but that things with Canvas are never easy, so not to hold me to that.
The result is a user script that will attach itself to assignment, discussion, and quiz pages and wait for the user to click the Add Rubric button, followed by the Find a Rubric search tool. Here are some features of that script. These features are all optional and configurable except for the first one.
- It moves the current course, if present, to the top of the context list (the leftmost panel). This is the only feature that is not optional or configurable.
- Look up the course information for a user and if the course is in the rubric list, add the term to the information line beneath the course code and add the full name of the course to the title attribute so that when you hover over the name you can see the full course name.
- Perform a multiple key sort on the information. In the picture above, the current course comes first, and then the primary key is the context (course or account) so that all the account level rubrics are at the bottom. The secondary key is the name of the course, so you'll see that all MATH 113 courses are grouped together. The tertiary key is the term, so that the courses are listed with the newest at the top.
- There are some predefined sorts included, but you can also specify your own custom sort order including the keys and whether to sort in ascending or descending order.
- Hide any courses that have been over for more than a set number of days. The image above hides all courses older than 360 days.
- Hide any courses that are not in your course list. This may help get rid of courses you don't have access to anymore. I noticed that we had some that I couldn't find anywhere in our system (not even on the provisioning report with include deleted objects checked).
- Hide courses that belong to terms without an end date specified. For us, this was the Default Term that contained sandboxes, peer course reviews, and pretty much anything that wasn't an actual course that I had taught.
- Hide any account level rubrics and show only course level rubrics.
- When adding the term information to a course, you can put it in front of the rubric count, behind the rubric count, or completely replace the rubric count with the term name. To me, knowing the term is much more valuable than knowing there are 3 rubrics. The separator defaults to a vertical line, but you can specify a different separator if you want.
Installation
The installation steps here are similar to other user scripts.
- Install a browser add-on: Greasemonkey for Firefox or Tampermonkey for Chrome/Safari
- Install the Find Rubric Sorter user script.
Customization
If you want to perform customization, you will need to edit the source code.
- For Greasemonkey, click on the Greasemonkey icon and choose Manage user scripts. Then find the script from the list, click the right mouse button, and choose Edit. After making changes, click Save, and then close the window.
- For Tampermonkey, click the Tampermonkey icon and choose Dashboard. Find the script in the list and click the left mouse button on it. When you are done, click the Save button and then close the tab.
Custom Domain
If your Canvas instance is hosted at *.instructure.com, then it should run with the installation instructions above. However, if you have a custom domain for your Canvas instance like canvas.institution.edu, then you will need to modify the // @include line on line 5 of the source code to match your institution.
This is a regular expression, with the exception that you don't need to escape the forward slashes.
/^https://.*\.instructure\.com/courses/[0-9]+/(assignments|quizzes|discussion_topics)/[0-9]+[?]?/The part you will be interested in modifying is the hostname, which is currently the .*\.instructure\.com portion. Since this is a regular expression, the dots in the domain name need escaped with a backslash.
As an example, canvas(\.beta|\.test)?\.institution\.edu would matches canvas.institution.edu, canvas.beta.institution.edu, and canvas.test.institution.edu.
The use of regular expressions is slightly more complicated, but I only wanted the script to run on the pages that had the option of finding a rubric and using the normal wildcard matching would include any page under assignments, discussion_topics, or quizzes.
The first block of code is to check the location and make sure it's not trying to run on the wrong page, so it shouldn't hurt too much to use the regular wildcard system, except that it makes a needless check, which might slow the browser down just a little.
Feature Configuration
There is a config variable towards the top of the source code with some explanation of what the variables do.
- sortOrder can be given as a number, in which case it chooses a predefined sort order, as an array of key fields with an optional + or - at the end to override the default sort order for that key. This can be complicated if you let it, so see the next section for the predefined sorts and more explanation about what can be used.
- courseLookup tells whether or not to look up additional information about the course. Without this, you won't be able to use anything date related and the titles of the courses won't be available as a mouseover tooltip either.
- addTerm tells the script to add the name of the term to information displayed. The following other items are related to this:
- removeCount says to remove the rubric count completely and replace it with the term name.
- prependTerm determines whether the term name should go in front or behind the rubric count (unless you've told it to removeCount)
- separator specifies the characters that should go between the term name and the rubric count.
- hideDays says to hide courses from the list that ended more than this many days ago. For example, to hide courses that ended more than a year ago, set hideDays to 365. Set it to a negative number to ignore the end date and show all courses. You must also enable the courseLookup to get the course dates. This is based off the course end date and not the term end date.
- hideUnknown says to hide courses that weren't found in your course list.
- hideAccounts says to hide all account level rubrics
- hideNeverending says to hide courses with terms that do not have an end-date set. I could have told it to hide courses in the "Default Term", determining the "Default Term" is language specific and this opens up more courses. If your school doesn't put end dates on any of the terms, then I don't recommend using this.
Here is the config file as it comes and with all of the comment stripped out.
var config = {
'sortOrder' : 1,
'courseLookup' : true,
'addTerm' : true,
'removeCount' : false,
'prependTerm' : true,
'hideDays' : -1,
'hideUnknown' : false,
'hideAccounts' : false,
'hideNeverending' : false,
'separator' : ' | '
};Sorting the list
There are also a couple of items that follow immediately after this in the code.
var sortableKeys = {
'name' : 's+',
'title' : 's+',
'context' : 's-',
'courseEnd' : 'd-',
'courseStart' : 'd-',
'termName' : 's-',
'termStart' : 'd-',
'termEnd' : 'd-',
'term' : ':termEnd'
};
var predefinedSorts = {
1 : [ 'context', 'name', 'term' ],
2 : [ 'context', 'term', 'name' ],
3 : [ 'context+', 'name', 'term' ],
};The sortableKeys object listing the keys that you can specify in your custom sort, including whether they are a (s)tring (and the localeCompare should be used when sorting) or a (d)ate. The second character is a + or - and indicates the default sort order of ascending for + or descending for -. The "term" is an alias for "termEnd". Capitalization is important when specifying a custom sort order. Any of these can be followed by a + or - in the custom sort order specification to change the default order. If you don't specify a + or - at the end, it will use the default sort for that key.
- name is the short course name or course code
- title is the full course name, which is only available when you have the courseLookup feature enabled.
- context is either 'course' or 'account'. The default is to sort in descending order, so that courses come first and accounts come at the bottom. Include 'context+' in your sort order if you want the account level rubrics listed first.
- courseEnd and courseStart are the end and start date and times for the course.
- termName is the name of the term
- termEnd is the end date for the term. This is what is sorted on if you specify term in the sort order. This is currently role-based, so it's when you last had access to the course, not when the term actually ended.
- termStart is the start date for the term. If your institution allows you to access the course starting whenever, then this will come through as null and will be useless for sorting purposes.
There are also some predefined sorts. You may specify one of these by putting a number in the config.sortOrder property.
- Place the courses rubrics at the top and the account rubrics at the bottom. Then sort by name in ascending order and when the names are the same, then sort by term in descending order.
- Place the courses rubrics at the top and the account rubrics at the bottom. Then sort by the term end date in descending name order so that the newest courses are at the top and the oldest are the bottom. Within each term, sort the names in ascending order.
- Place the account rubrics at the top and the course rubrics at the bottom. Then sort by name in ascending order and finally, if duplicate names exist, by the term.
Quizzes and Discussions
The Find a Rubric search tool is not the same for Quizzes and Discussions as it is for assignments.
For assignments, there is a table with scrollbars for when there are more items that can be displayed in the dialog box. Dragging the dialog box taller doesn't necessarily give you much more space as there is a maximum height that you can have for the table.
For Quizzes and Discussions, that table still exists, but the scrollbars do not. This means that if you have a large number of contexts (courses and accounts) and select a context with few items, that you may not be able to see them without having to use the single scrollbar on the far right.
Here is an image showing the portion my Find a Rubric tool for a quiz from my sandbox. Even though there are 10 rubrics, there are 30 contexts, and I had to scroll down some to get any of the rurbrics in the middle column to show. If you have a really long rubric on the right side, it will also make you have to scroll to see the list of contexts or the list of rubrics for that context.
The good news is that you can drag the dialog box larger and actually make full use of all of the real estate that you have on your screen. The other good news is that the script works for quizzes and discussions so you can filter some of your values out, although having lots of rubrics within a context or having large rubrics will still make it cumbersome.
Technical Challenges
Never say things are easy when trying to develop an add-on for Canvas. There are always technical hurdles that must be overcome. I develop with Firefox and then once it's working there, I move over to Chrome and Safari and validate that it still works. Most of the time, it works across browsers without modification, but this time it didn't. Although sometimes it would and other times it wouldn't. That kind of sporadic behavior suggested a timing issue and so I had to add another mutation observer to the code.
Rather than continuing to write this document, I may write a blog about the technical challenges encountered here. If I do, I'll be sure to link it from here.
