Sorting Rubrics Made Easy

[James]

Quick Install

1. Make sure a user script manager such as Tampermonkey is installed and enabled.
2. Install the sort-rubric.users.js file

More information is available on my Sort a Rubric Canvancement page.

Update: October 24, 2019

With the October 23, 2019, deployment, Canvas changed the way that jQuery is loaded so that it will be available for your custom global JavaScript and you won't have to worry about it. However, all of the scripts now have async loading, which is a good thing, but it means that the script manager was injecting this script before jQuery was loaded and it failing.

I took the time to update the script and improve the coding. It was one of the early ones I wrote before I knew much about what I was doing.

Note that the blog post below refers to Greasemonkey. Tampermonkey is now the recommended userscript manager. Also do not use the source code in the original blog post -- it will no longer work.

Update: May 3, 2016

Why the Update?

The original blog post (below) talks about copying and pasting into GreaseMonkey. This was one of my earliest attempts with user scripts and I've since learned how to make them really, really easy to install, but the documentation was in the comments to this blog post and people were missing it and still trying to follow the original instructions.

I didn't want to lose the blog post, because it explains what happens and has videos that show it in action, but most people want a plug-n-play, drag-n-drop, or click-n-go solution, and that's what you get through the quick install. Please use the Quick Install and read the instructions and comments below if you care to know what it's doing or run into trouble.

Original Blog Post: August 25, 2015

Synopsis

The ability to sort (drag and drop) rows of a rubric can be made transparent so that it automatically runs on the Rubric editing page. The techniques shown here open up a whole world of solutions to "I wish Canvas would ..."

Introduction

On August 16, I wrote a blog post illustrating how you could inject two lines of JavaScript into a page sort the criteria in a rubric: How to Reorder Rubric Criteria

Since then, I've learned more and found a new technique that blows the first way out of the water. It allows for automatic injection of the JavaScript based on the URL, so it only loads on the Rubric page on your site. But then it automatically runs, you don't need to do anything other than enable it. It works with the Javascript already included on every Canvas page. it downloads the libraries you include when you save the script so that loading them is almost instantaneous.

This is so much easier than the first blog that I'm almost tempted to pull the first one down, except some people have linked to it and it illustrates some of the technical details that this one omits. So if you want to understand more about what it's doing, go read that.

Let's begin with a 55 second video demonstration of what to expect. Notice that when I get to the Rubric editing page from Outcomes > Manage Rubrics that the rubric was automatically sortable once it loaded. That's the beauty of this over last week's method, you don't need to do anything special once it's set up, it just automatically allows you to drag and drop rubric rows.

Instructions

The key to doing this is Greasemonkey, which is a FireFox add-on. For Chrome users, there is Tampermonkey. I haven't tested Tampermonkey myself, but the principles are the same.

Here is a video that shows everything needed to accomplish the rubric editing demonstration above. It begins with the installation of the Greasemonkey, shows how to include javascript libraries, and explains what the code does.

Greasemonkey User Script

This is all about User Scripts. User scripts are scripts that the user creates that runs on the page. Last week, I was talking about bookmarklets that someone could click on to run on the page after they clicked the Edit Rubric button. This is automatic - you don't need to do anything other than enable the script. It's also a lot easier to create than a bookmarklet.

// ==UserScript==
// @name        Canvas Rubric Sort
// @namespace   https://people.richland.edu/james
// @description Injects the RowSorter.js jQuery library into Rubric Pages on Canvas
// @include     https://richland.instructure.com/courses/*/rubrics/*
// @include     https://richland.test.instructure.com/courses/*/rubrics/*
// @include     https://richland.beta.instructure.com/courses/*/rubrics/*
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @require     https://cdn.rawgit.com/borayazilim/rowsorter/master/jquery.rowsorter.min.js
// @version     1
// @grant       none
// ==/UserScript==
waitForKeyElements('.rubric_container.rubric.editing', attachRowSorter);
function attachRowSorter() {
  $('.rubric_table').rowSorter();
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

That is the complete code. Let's take a look at what each line does.

1. Define this as a Greasemonkey user script
2. The name of the script
3. A URL or URI to identify the author in case two or more authors have the same program name
4. A brief description of what the script does
5. Run this script on pages matching the main Canvas instance for your site. The main page for editing rubrics is /courses/*/rubrics/*, where * is a wildcard
6. Run it on the test site as well - optional
7. Run it on the beta site too - optional
8. Inject the waitForKeyElements javascript library. This will make sure that the rubric is done loading before you can sort it.
9. Inject the RowSorter javascript library. rawgit.com allows you to link to any GitHub hosted file, so you don't have to install your own version like I wrote last week.
10. The version of the code - this is up to you to maintain (or ignore)
11. The grant statement gives special permissions, none are needed
12. End the header
13. The rubric_container and rubric classes are already present. The "editing" one gets added when you click Edit Rubric, so wait for that class to be added to the table, then call the attachRowSorter function.
14. This function is called after the "editing" class is added by the user clicking on the Edit Rubric button.
15. Add the rowSorter() method to the rubric_table.
16. End the function

Every time you make changes and save the code, it will automatically get the javascript libraries on the @require lines so that it's hosted locally and doesn't have to be downloaded when you run the script.

The only changes that you need to make to this script are lines 6-8, where you define where your Canvas instance is loaded.

Using Greasemonkey

Greasemonkey is relatively easy to use. As long as it is enabled, it will check the pages for a match against the @include lines in the header. If you want to disable Greasemonkey, go the monkey and click on Enabled to disable it.

There are a couple of ways to edit a script. If you are on the page where the script would be executed, the name of the script will appear the bottom of the menu. Just right click your mouse on the name and it will load it for editing. The second way is to go to Greasemonkey > Manage User Scripts and then right click your mouse on the script you want to edit.

Notes

• When you drag and drop rows, make sure you grab the description (left) or the points (right). Do not try to drag one of the items in the middle, the formatting goes crazy and you can't do anything. If you do that, reload the page and edit again and don't drag in the middle.
• If you want to disable the drag & drop editing, then go to the Greasemonkey on the menu and disable it.
• Greasemonkey scripts run after the page is loaded, so you have access to jQuery.
• Greasemonkey is synced with Firefox so it will follow you from machine to machine if you have sync setup.

No Global Javascript Access? No Problem!

In case you haven't realized the ramifications of this, it allows you to add your own JavaScript to Canvas like you had access to the global JavaScript page.

That means that regular users can add their own features, even if the administrator's won't put make the changes globally.

You should, of course, not use it for features that you want your students to see because they won't be able to see it -- it's local to your machine. However, it is useful for development and for teachers. For instance, want to add the ability to sort tables by clicking at the top of a column -- you can do that.

Want to automatically create a rubric based on an Excel spreadsheet -- well, that's going to take some work. But let your imagination run wild.