Raw Source Toggle Dropdown

• Minified Source

ebotaiam.cat / Moodle grades graph

// ==UserScript==
// @name         Moodle grades graph
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  It generate a graphs with grades statistics. 
// @author       ebota@iam.cat
// @match        https://*/moodle/mod/assign/view.php?id=*&action=grading
// @match        https://*/moodle/mod/assign/view.php?action=grading&id=*
// @grant        none
// @require http://code.jquery.com/jquery-latest.js
// @require https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js
// ==/UserScript==



/*
* Graph library from: https://github.com/chartjs/Chart.js
  Bar graph: http://www.chartjs.org/docs/#bar-chart-introduction
*/


var grades=[]; //each students grade
var stats=[0,0,0,0,0,0,0,0,0,0]; //How many students have won each grade?

function doWork() {
    //we "webscrap" to get students grade
    //Now it only works with grades 0-100 or %
    $('.c5').each(function( index, value ) {

        var tmpHTML=$(this).html();
        var brPos=tmpHTML.lastIndexOf(">");
        tmpHTML=tmpHTML.substr(brPos+1,tmpHTML.length);
        tmpHTML=tmpHTML.replace(" "," ").replace(" "," ");
        tmpHTML=tmpHTML.replace("%","/100"); //Only applies when using % grades (rubrics...)
        //console.log("HTML: "+tmpHTML);

        tmpText=tmpHTML;
        //var tmpText=$(this).text().replace("%","/100");
        tmpMark=tmpText.replace("Qualificació","").split("/")[0];
        tmpMark=tmpMark.replace(",",".");
        if ( $.isNumeric(tmpMark) ) {
            grades.push(tmpMark);
        }
    });

    //Iterate over grades to update stats
    jQuery.each(grades, (index, value) => {
        if (value == 100) value=99;
        var pos=parseInt(value/10);
        stats[pos]++;
    });

    console.log("Grades; "+grades);
    console.log("Stats; "+stats);

    //Inserting an html canvas just before the header. We'll use it to draw the graph
    //The easy solutions of canvas float: right leave the page clear enough to use it without problems
    $('h2').before('<canvas id="studentsStats" width="400" height="200" style="float:right"></canvas>');
    var ctx = $("#studentsStats");
    var myDataset = {
        labels: ["<1", "<2", "<3", "<4", "<5", "<6", "<7","<8","<9","<=10"],
        datasets: [
            {
                label: "Students",
                backgroundColor: "rgba(75,192,192,0.4)",
                //data: [stats[0],stats[1],stats[2] ,stats[3],stats[4],stats[5],stats[6],stats[7],stats[8],stats[9]],
                data:stats,
            }
        ]
    };

    var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: myDataset,
        options: {
            title: {
                display: true,
                text: grades.length+" students"
            },
            legend: {
                display:false
            },
            animation: {
                duration:500
            },
            responsive: false //otherwise it expands horitzontal to full screen
        }

    });
}

$(document).ready(function() {
    console.log("Ready!");
});


(function() {
    'use strict';    
    doWork();    
})();