Remove the "calculate grade based only on graded assignments" option

[RoniMargalit]

Hi! We do not run a traditionally graded course -- we run a professional education course. We'd like to remove the check box that is automatically checked that says "calculate based only on graded assignments." We'd like the grades tab always show their progress on all assignments so that there's no confusion about the course requirements. Is this possible?

Similarly -- can we remove the blue dot "what if" option? It is not relevant for our learners and is so confusing for them.

[jerry_nguyen · Accepted solution]

@RoniMargalit 

There is no setting to turn off that option permanently. However, if you are an Admin, you can upload a custom Javascript (JS) to "click" (to un-tick) that checkbox when the "Marks" page is loaded

$(window).on("load", function(){ //Load the script when the page is "loaded"
if (window.location.href.match('/grades')) { //only run this script on Grades or Marks page
$("#only_consider_graded_assignments").click() //Click the checkbox
// $("#only_consider_graded_assignments_wrapper").css("display", "none"); // remove '//' before this line if you want to remove the checkbox from the page
}
})

Similarly for the "What If", you can upload a custom cascading style sheets (CSS) to disable mouse events (E.g. click on the score to activate what-if) 

td.assignment_score {
    pointer-events: none;
}

Please note, that these scripts will only work on the browser version of Canvas (E.g. not Canvas Student app), and students can always disable custom JS/CSS from being loaded. 

[jerry_nguyen · Accepted solution]

@RoniMargalit 

There is no setting to turn off that option permanently. However, if you are an Admin, you can upload a custom Javascript (JS) to "click" (to un-tick) that checkbox when the "Marks" page is loaded

$(window).on("load", function(){ //Load the script when the page is "loaded"
if (window.location.href.match('/grades')) { //only run this script on Grades or Marks page
$("#only_consider_graded_assignments").click() //Click the checkbox
// $("#only_consider_graded_assignments_wrapper").css("display", "none"); // remove '//' before this line if you want to remove the checkbox from the page
}
})

Similarly for the "What If", you can upload a custom cascading style sheets (CSS) to disable mouse events (E.g. click on the score to activate what-if) 

td.assignment_score {
    pointer-events: none;
}

Please note, that these scripts will only work on the browser version of Canvas (E.g. not Canvas Student app), and students can always disable custom JS/CSS from being loaded. 

[canvas_admin]

@jerry_nguyen  The first set of code was working up until this weekend and now I notice this morning that the code is no longer working. Do you have any thoughts as to what change Canvas may have made over the weekend to cause this code no longer to work?

[chriscas · Accepted solution]

Hi @canvas_admin,

I would assume that Instructure's upgrades of the jQuery library are the culprit.  I ran that code through a converter to vanilla javascript and got this as a result.  You can try this vanilla code to see if it works as intended (a bit more error handling would probably be good, but I just cobbled this together quickly):

function click_grades_checkbox() {
if (window.location.href.match('/grades')) { 
document.getElementById("only_consider_graded_assignments").click()
}};

if (document.readyState === 'complete' || (document.readyState !== 'loading' && !document.documentElement.doScroll)) {
	click_grades_checkbox();
} else {
	document.addEventListener('DOMContentLoaded', click_grades_checkbox);
}

-Chris

[canvas_admin]

Thanks for this @chriscas 

When I preview it in the Theme Editor, it works, but once I apply the theme, it doesn't seem to be working. I'm not sure why that is. Any insight you can offer would be appreciated.

[chriscas]

I have a feeling you might be running into a theme caching issue that's been bugging the heck out of me for months.  What I find is that when you apply a new theme, it may take a couple hours before the new js/css files are actually used.  If it's still not working after a few hours, post back here and myself or someone else might be able to offer more suggestions.

-Chris

[canvas_admin]

@chriscas, that must have been it as it is working now. I wasn't aware of that issue so I'll make note of it now. Thank you!

BTW, can you link to the converter you used? I have a feeling that will come in handy in the future.

[chriscas]

@Hi @canvas_admin,

I used Online Jquery to Javascript Converter - WorkVersatile, which converted your second and third lines, but didn't get the first line quite right.  I fixed that by looking at some of my own scripts which I switched from jQuery to vanilla JS quite a few years ago and subbing in the appropriate parts (creating the function and the bottom lines to call the function at the appropriate time).

-Chris

[JamesSekcienski]

In my own experience, I have found that uploading the same files again and applying the theme a second time will usually force the new files to load.

I also usually add versioning metadata as part of the file name so that if I use the Developer Tools to inspect the files that are being loaded I can confirm if the new file is loading or still the old one.

[chriscas]

Good callout.  I always include a date and version number on my files (like "theme_file_2024-04-15-001.js") for exactly that reason.  I didn't know about the second time trick though, I'll need to keep that in mind next time I need to make a change!

-Chris

[canvas_admin]

Before I do a deep dive, I wanted to see if anybody suddenly found this checkbox defaulted back to being ticked on? I just noticed it today but I guess Canvas could have changed something recently. However, I want to see if others are experiencing it or if it is just me.

@chriscas ? @jerry_nguyen ?

[chriscas]

Hi @canvas_admin,

I don't have this deployed to our instance at all, so I can't quite fully test the code.  The single line to chick the checkbox still works in browser debug mode though.  I'd suspect one of two things are happening on your end.  First, if you have a lot of JavaScript, something else may be erroring out and stopping execution of the java script file before it gets to the point where this specific code is.  Second, perhaps Instructure changes some of the grade page to load dynamically, which could mean the checkbox is not available when the code runs.  If that is the case, you'd probably need to modify the JavaScript to use a MutationObserver to watch for the element to be created then run the click code.  Even after years of trying, I still struggle to code MutationObservers (I understand the concept, but the actual coding just isn't compatible with my brain apparently).

I'm hoping this might give you a few things to look at in hopes of finding a fix.

-Chris

[canvas_admin]

Thanks for this @chriscas !  I was able to deploy some new code to get it to work and I'm leaving it here for others who might be able to use it.

$(document).ready(function() {
    function uncheckCheckbox() {
        let checkbox = $('#only_consider_graded_assignments');
        if (checkbox.length) {
            checkbox.prop('checked', false);
        }
    }

    // Run immediately on page load
    uncheckCheckbox();

    // Use setInterval to check every 500ms in case of AJAX loading
    let interval = setInterval(() => {
        if ($('#only_consider_graded_assignments').length) {
            uncheckCheckbox();
            clearInterval(interval); // Stop checking once checkbox is found and unchecked
        }
    }, 500);
});