Collect and display student Outcome score averages in Canvas LMS

studentOutcomes.user.js

// ==UserScript==
// @name         Student LMG Viewer
// @namespace    https://gist.github.com/bennettscience/cf6a0ec2526844aa672bd3850dee85ee
// @description  Show calculated Outcome socres for students in Canvas
// @author       Brian Bennett
// @match        https://*.instructure.com/courses/*/grades/*
// ==/UserScript==

(function() {
    'use strict';

    // Hack a parser into the page
    let parser = document.createElement('a');
    parser.href = window.location.href;

    // Extract the Course and User ID
    let course = parser.pathname.split('/')[2];
    let user = parser.pathname.split('/')[4];

    // Add a tab to the Student Gradebook
    let tab = $('<li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="outcome-rollups" aria-labelledby="ui-id-3" aria-selected="false"><a href="#outcome-rollups" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-3">Outcome Scores</a></li>');

    // Add the tab to the end of the list
    $("#navpills").append(tab);

    // Make a new panel for Outcome rollups
    let rollupPanel = $('<div id="outcome-rollups" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="true" aria-expanded="false" style="display: none;"></div>');

    // Make a new table for the outcome rows
    let table = $('<table id="outcome-summary-table" class=" ic-Table ic-Table--hover-row"></table>');
    $('<thead><th scope="col">Standard</th><th scope="col">Description</th><th scope="col">Average Score</th></thead>').appendTo(table);

    // Add the table to the panel
    table.appendTo(rollupPanel);

    function getOutcomes() {

        let tr;

        // Update your base
        const base = 'https://*.instructure.com/api/v1';

        $.ajax({
            type: "GET",
            url: `${base}/courses/${course}/outcome_rollups?user_ids[]=${user}`,
            success: function(response) {

                // Check the length of the array and append a helpful message
                if(response['rollups'][0]['scores'].length > 0) {

                    response['rollups'][0]['scores'].forEach(function(el) {
                        console.log(el.links.outcome);
                        $.ajax({
                            type: 'GET',
                            url: `${base}/outcomes/${el.links.outcome}`,
                            success: function(outcome) {
                                var title = outcome.title;
                                var desc = outcome.description;
                                tr = $(`<tr><td>${title}</td><td>${desc}</td><td style="font-weight:800">${el.score}</td>`);
                                tr.appendTo(table);
                            }
                        });
                    })
                } else {
                    tr = $(`<tr><td></td><td>No scored Outcomes found in this course.</td><td></td>`);
                }
            }
        })
    }

    // Add the panel after the Outcomes panel
    $("#outcomes").after(rollupPanel);

    $(document).ready(function() {
        getOutcomes();
    });
})();