canvas-score-highlighter

(function() {
    'use strict';
    let myScore =  document.body.querySelectorAll(
        '.student_assignment.assignment_graded.editable .assignment_score .score_holder .grade'
    );

    let maxScore = document.body.querySelectorAll(
        '.student_assignment.assignment_graded.editable .possible.points_possible'
    );

    let len = myScore.length

    if (maxScore.length === len) {
        let str1, str2;
        let num1, num2;
        let delta;

        for (let i = 0; i < len; ++i) {
            str1 = myScore[i].innerText.trim().match(/\d+$/);
            str2 = maxScore[i].innerText.trim().match(/\d+$/);
            str1 = str1 !== null ? str1[0] : '';
            str2 = str2 !== null ? str2[0] : '';
            num1 = Number(str1);
            num2 = Number(str2);

            if (num2 !== 0){
                delta = (num2 - num1) / num2;
            } else {
                delta = 0;
            }

            if (num1 < num2) {
                let color = `hsl(${60 - delta*60},100%,90%)`;
                seekParent(myScore[i], 3).style.backgroundColor = color;
            } else if (num1 === num2) {
                let color = `hsl(120,100%,90%)`;
                seekParent(myScore[i], 3).style.backgroundColor = color;
            } else {
                let color = `hsl(220,100%,90%)`;
                seekParent(myScore[i], 3).style.backgroundColor = color;
            }
        }
    } else {
        console.warn('The scores do not match');
    }

    function seekParent(src, level) {
        if (level <= 0) return src;

        for (var i = 0; i < level; ++i) {
            if (src != null) {
                src = src.parentElement;
            } else {
                return null;
            }
        }

        return src;
    }
}());