UserScript development help request

[kebbott]

Hi Devs - I've just started exploring the wonderful world of UserScripts (via Tampermonkey) to pull data from Canvas in a more meaningful and practical way for our small group of academic teaching staff.

There has been a request from one academics who would like to be able to view, for a specific assignment, a summary list of all students and each of their submissions to see how many re-submissions each has done as we have a limit on how many attempts a student can make (feedback-resubmission loop).

I'm wondering if anyone has already developed something similar, or may be able to help guide me in the right direction to create this..?

I have a working API URL that gives me all the data I need, but I want to be able to present this is a more usable way for the academics. My JS skills aren't up to much, although I've been able to modify some of the great scripts out there to start working toward what I want to achive - at the moment, however, it's just pulling single points of data, rather than from the muliple data points required.

An example of what I've created so far with the 'Access Submissions Data' pop-up window where I'd ideally like this information to display. Also included is a 'Grading Summary' widget for a quick view of how many students still need to complete the assignment.

[stuart_ryan]

Hi  @kebbott ,

I will admit I have never delved into the joy of Tampermonkey (well... yet). Do you have an example of the script you have thus far (sanitised of any of the confidential information) so that we could have more of a look for you.

It is always handy to have this as a basis to start, having your existing code to play with.

Look forward to hearing from you!

Stuart

[kebbott]

Thanks  @stuart_ryan  - I've added these to dropbox, hopefully they work!

They're still pretty rough, and was not sure about sharing them too freely as they are heavily adapted from the work of others, in particular http://www.dartmouth.edu/~breid/userscripts/

• Dropbox - Canvas-Submissions_Summary.js - adds a button in 'Related items', data pops up in overlay window; this is where I would like to pull multiple pieces of data into a table, grouped by student, so it's possible to see full submission history at a glance
• Dropbox - Canvas-Grading_Status.js - adds the grading summary data below 'Related items' (although, it would be nice to tidy this up with a text replace on 'null' to read 'not submitted', and to ensure they always appear in the same order)

[stuart_ryan]

Hi  @kebbott ,

Thank you for that, I think sharing is ok as long as you always give attribution (which you have). 

Having the examples will certainly help others to see what you are doing (and hopefully be able to contribute). I will have a look, but admit this is not my forte, so hopefully with the scripts someone else may jump in with some suggestions for you!

Cheers,
Stuart

[Boekenoogen]

I just started to look at the .js files you shared and they are great! I can't wait to see what else we can do with the data!

[kebbott]

Glad they're useful  @jrboek ! For me, the most useful change I made was getting the additional ID from the URL, so the API data can be retrieved at a more granular level, in this case, specific to an assignment.

With the submissions summary script, I can extend the API URL to include submission history and user data (for readable names), but I'm not sure how to specify this data call as it sits at a nested level (if that makes sense?). I'm also not sure how to get multiple pieces of data for each student, for example, to populate a table such as:

Student	Status	No. of attempts	Current Grade	Submissions
[name]	[workflow_state]	[attempt]	[grade] [graded_at] [grader_id]	For each [submission_history]; Attempt [attempt]: [submitted_at] - <a [url]>[display_name]</a> [entered_grade]
John Doe	Graded	2	Incomplete 14 May 2018 at 14:28 Jane Doe	Attempt 1: 10 May 2018 at 16:33 - My Assignment_v1.docx Incomplete Attempt 2: 12 May 2018 at 11:08 - My Assignment_v2.docx Complete

Is this something you'd be familiar with building? Any thoughts on how it could be extended in this way?

I'm tempted to keep trying by trial and error - it's just a bit slow when there aren't enough hours in the day (although fun, and good experience!).

[Boekenoogen]

 @kebbott  One of my staff members is really good with .js and we have been learning more about API same way as you (trial and error). We have made some progress on some products using the Google Sheets and some of the API and .js provided by other community members. I will see what my guy can do and try to get back with you. 

[chadscott]

 @kebbott ‌ I'm taking a crack at your questions - first the easier of the two: 

For the Canvas Grading Status script add the following bits -

// Get grades data
function grades_retrieved(){
var grades_count_1 = {}; // count for each type of grade
$.each(grades_results, function(index, file){ //count the number of each type of grade & change null value to "no submission"
if (file.grade === null) {
file.grade = "No Submission";
}
if (file.grade in grades_count_1){
grades_count_1[file.grade]++;
} else {
grades_count_1[file.grade] = 1;
}

});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

if (file.grade === null) {
file.grade = "No Submission";
}

This will check each grade in the object and change it from null to "no submission". You can change that to whatever you like.

var grades_report = '<h2>Grading Summary</h2><table style="width:80%; border: 1px solid black; border-collapse: collapse;">';//added table formatting
        grades_report += '<tr style="text-align: left; border: 1px solid black; border-collapse: collapse;"><th><b>Count</b></th><th><b>Grade</b></th></tr>';//add table header
        $.each(grades_count_1, function(type,count){
                grades_report += '<tr><td>' + count + ' </td><td> '+ type +'</td></tr>';
        });
        grades_report += "</table>";
        display_report_grades(grades_report);
    }‍‍‍‍‍‍‍‍

Here, I added a Header Row before the iteration through the array, because the 'type' output will change based on the grading scheme as well as added basic table formatting including making the table width 80%. If you want full borders, add the style=.... to the data <tr> and <td> tags.

Here's a screenshot of the working script:

I'll take a look at the other script and see what I can come up with!

Cheers,

Chad

[kebbott]

 @chadscott  - Wow, that's awesome! :smileygrin: Thank you so much for that, it's really helped clean up the presentation of it!

I've now added the script to a GitHub repo and updated it with your additions (and some style adjustments);

• https://github.com/kebbott/SwinCanvas/tree/master/grading-summary

I look forward to seeing what else you can come up with for the other one..!