Making Speedgrader Speedier

jperkins
Instructure
Instructure
1
1129

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.

281069_pastedImage_3.png

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

281070_pastedImage_4.png

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>'
                $('.assignmentDetails').after(html);
            }
        }
    });
}

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>'
    $('.assignmentDetails').after(html);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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
ProfessorBeyrer
Community Coach
Community Coach

Brilliant! This also helps deal with a caching problem where the to-do list might not be updated when navigating back to the course home page after completing grading an assignment.

A question I have is how this script can be added to Greasemonkey/Tampermonkey for those of us who work where global JavaScript is not easily edited. Can our awesome Canvas Developers‌ group help?