Making Speedgrader Speedier

jperkins

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.

Hope your teacher's find it useful!

<SPAN class="keyword token">var</SPAN> currentURL <SPAN class="operator token">=</SPAN> window<SPAN class="punctuation token">.</SPAN>location<SPAN class="punctuation token">.</SPAN>href<SPAN class="punctuation token">;</SPAN><BR /><SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>currentURL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">indexOf</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/gradebook/speed_grader?'</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">></SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="keyword token">var</SPAN> courseID <SPAN class="operator token">=</SPAN> currentURL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">match</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/\/courses\/(\d+)/g</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="keyword token">var</SPAN> myRegexp <SPAN class="operator token">=</SPAN> <SPAN class="regex token">/(?:^|assignment_id)=(\d*?)(?:\D|$)/g</SPAN><SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="keyword token">var</SPAN> doRegexp <SPAN class="operator token">=</SPAN> myRegexp<SPAN class="punctuation token">.</SPAN><SPAN class="token function">exec</SPAN><SPAN class="punctuation token">(</SPAN>currentURL<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="keyword token">var</SPAN> assignment_id <SPAN class="operator token">=</SPAN> doRegexp<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN><BR />    <SPAN class="comment token">// console.log(assignment_id)</SPAN><BR />    $<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">get</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'/api/v1'</SPAN><SPAN class="operator token">+</SPAN> courseID <SPAN class="operator token">+</SPAN><SPAN class="string token">'/todo?per_page=100'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN><BR />            selectNextUrl <SPAN class="operator token">=</SPAN> <SPAN class="token function">parseData</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">,</SPAN> assignment_id<SPAN class="punctuation token">)</SPAN><BR />            <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>selectNextUrl <SPAN class="operator token">!=</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN><BR />                addToUI <SPAN class="operator token">=</SPAN> <SPAN class="token function">insertHTML</SPAN><SPAN class="punctuation token">(</SPAN>selectNextUrl<SPAN class="punctuation token">[</SPAN><SPAN class="string token">'html_url'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><BR />            <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN><BR />                html <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<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>'</SPAN><BR />                <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.assignmentDetails'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">after</SPAN><SPAN class="punctuation token">(</SPAN>html<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR />            <SPAN class="punctuation token">}</SPAN><BR />        <SPAN class="punctuation token">}</SPAN><BR />    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><BR /><SPAN class="keyword token">var</SPAN> parseData<SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">,</SPAN>id<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />    <SPAN class="comment token">// console.log(response)</SPAN><BR />    <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> response<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN><BR />        assignment_id <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">'assignment'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">'id'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN><BR />        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="token function">String</SPAN><SPAN class="punctuation token">(</SPAN>assignment_id<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">!==</SPAN> id<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN><BR />            <SPAN class="keyword token">return</SPAN> response<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN><BR />        <SPAN class="punctuation token">}</SPAN><BR />    <SPAN class="punctuation token">}</SPAN><BR />    <SPAN class="keyword token">return</SPAN> <SPAN class="keyword token">false</SPAN><BR /><SPAN class="punctuation token">}</SPAN><BR /><SPAN class="keyword token">var</SPAN> insertHTML <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>html_url<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN><BR />    html <SPAN class="operator token">=</SPAN> <SPAN class="string token">'<div><a href="'</SPAN><SPAN class="operator token">+</SPAN> html_url <SPAN class="operator token">+</SPAN><SPAN class="string token">'" 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>'</SPAN><BR />    <SPAN class="token function">$</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.assignmentDetails'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">after</SPAN><SPAN class="punctuation token">(</SPAN>html<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><BR /><SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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?‌

Greg

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?