Making Speedgrader Speedier

6 1 1,041

I recently had the opportunity to teach in Canvas again for the first time in a little while, and I noticed that my behavior when grading was to always navigate to my instructor to-do-list to launch Speedgrader. However, I had navigate back to the home page to view the to-do-list every time I finished grading all submissions for an assignment. This caused me a lot of frustration as I knew that the to do list was accessible via the API. So I wrote a little bit of code that I have found to be indispensable now to me as an instructor.

The following code attaches a little button in Speedgrader to navigate to the next item on the todo list for teachers in the course. If you do not have a to do list on the home page (ie: Admins) you will not see this new button.


And when a teacher has no other assignments in their to do list they get a nice thumbs up indicating this is the last assignment that needs grading. However, the teacher will still need to complete any submissions on that assignment to actually be done grading. Smiley Happy


Hope your teacher's find it useful!

var currentURL = window.location.href;
if (currentURL.indexOf('/gradebook/speed_grader?') > -1) {
    var courseID = currentURL.match(/\/courses\/(\d+)/g);
    var myRegexp = /(?:^|assignment_id)=(\d*?)(?:\D|$)/g;
    var doRegexp = myRegexp.exec(currentURL);
    var assignment_id = doRegexp[1];
    // console.log(assignment_id)
    $.get('/api/v1'+ courseID +'/todo?per_page=100', function (response) {
        if (response.length > 0){
            selectNextUrl = parseData(response, assignment_id)
            if(selectNextUrl != false){
                addToUI = insertHTML(selectNextUrl['html_url'])
            } else {
                html = '<div><a id="speed_grader_gradebook_link" class="Button Button--icon-action gradebookActions__Button gradebook-icon-link" title="All done! No more assignments to grade."><i class="icon-like" aria-hidden="true"></i><span class="screenreader-only" aria-hidden="true">All done! No more assignments to grade</span></a></div>'

var parseData= function(response,id) {
    // console.log(response)
    for (var i = 0; i < response.length; i++) {
        assignment_id = response[i]['assignment']['id'];
        if (String(assignment_id) !== id){
            return response[i]
    return false
var insertHTML = function(html_url){
    html = '<div><a href="'+ html_url +'" id="speed_grader_gradebook_link" class="Button Button--icon-action gradebookActions__Button gradebook-icon-link" title="Next Assignment that Needs Grading"><i class="icon-arrow-open-right" aria-hidden="true"></i><span class="screenreader-only" aria-hidden="true">Navigate to Next ToDo Assignment</span></a></div>'

If you need help knowing where to add the code in Canvas, see this guide: How do I upload custom JavaScript and CSS files to an account?

1 Comment