CSS to hide the totals columns in Grades

[a_craik]

Hi guys

I'm struggling to identify how to hide these columns (or just the content) using custom CSS:

I think it should be as 'simple' as:

# 1. the Total column {
display: none;
}

# 2. the Groups columns {
display: none;
}

As you can see, it's the bits in red that I'm failing at! I've been inspecting the code of the Grades screen but after some trial and error I'm ready to ask for some help please!

Cheers

Adam

[dlyons]

Are you trying to hide the assignment group and total columns/content from the instructor or from the students? If you want to hide it from the students there is a check box in the Course Settings > more options > "Hide totals in student grades summary" that hides the group and course totals when students view their grades (and the columns still appear as normal for the instructor.)

If you're trying to hide it from instructors may I ask why you want to do that?

[a_craik]

Hi  @dlyons ‌, 

We already have it set to hide from students via the course settings - it's the instructor side that I'm trying to tackle atm.

It would take quite a bit of explaining to outline our particular paradigm, but in a nutshell the calculated totals in any of our courses will never accurately represent the final course grades for every student (even if assessments have been grouped and weighted in the setup). The SIS is the only place that will show the correctly calculated and ratified total grades for every course, which takes things like late penalties and reassessments into account. Students access their grades via a SIS portal - the only course-level grades they can see are the final ones in the SIS.

The problem is that staff are never going to see correctly calculated course grades in Canvas and there's no "Hide Totals in Grades (for Instructors)" option, hence the intended CSS approach. Is this something you can help me figure out?

Cheers

Adam

[James]

I just ran this jQuery command for testing purposes and it hid the columns in question.

$('div[id*="assignment_group"]').hide();
$('div[id*="total_grade"]').hide();
$('div.assignment-group-cell').hide();
$('div.total-cell').hide();‍‍‍‍

The problem is that it leaves the space for the columns, so the solution is not complete.

You may also need to be more specific in the selectors.

Now that I had it working as jQuery, I decided to play around with the CSS rules directly. The .hide() method is a jQuery thing, not CSS.

I did note that display: none; only hides the cells in the table, not the headers, but visibility: hidden; hides both.

Here it is as CSS:

div[id*="assignment_group"], 
div[id*="total_grade"], 
div.assignment-group-cell, 
div.total-cell { visibility: hidden;}‍‍‍‍

Generally, though, I would prefer an education approach over a trying to hide thing approach, it's lower maintenance.

[a_craik]

Hi  @James 

Thank you so much for this - have just tried the CSS and it does exactly what I was looking for. I couldn't identify these divs in the code... but then I'm only a code tweaker (so am truly humbled by your skills!!).

We've had Canvas for a year now, which is just one aspect of a comprehensive concurrent programme of change at my institution. I'm in complete agreement with the general preference for an education approach - this particular action will hopefully only be to offer staff a temporary solution until our new SIS & SIS/Canvas integration is launched.

Merry Christmas!

Adam

[a_craik]

Hi again  @James 

Just wanted to update on this - after a little testing with the custom CSS applied I found an unexpected side affect had occurred elsewhere. The div "assignment_group" is apparently also used in the Assignments page, so setting this to hidden also served to hide all of the assignments in that page too! I've been learning CSS as I go, and this is the solution I've come up with (just added the 1st line for any others reading this):

a[href^="https://MyInstructureTestInstallation.com/courses/*/gradebook"]
div[id*="assignment_group"], 
div[id*="total_grade"], 
div.assignment-group-cell, 
div.total-cell { visibility: hidden;}‍‍‍‍‍‍‍‍‍‍

This seems to successfully target just the Grades screen, leaving the Assignments screen intact. I'll keep testing before I conclude this is a robust solution to present to staff, any feedback from the community is welcome!

Cheers

Adam

[James · Accepted solution]

 @a_craik ,

Thanks for coming back and sharing. This is exactly what I was talking about when I wrote

You may also need to be more specific in the selectors.

I just didn't know where it might pop up and I didn't do extensive testing at the time, so I'm glad you did.

Now that you know you need to limit it to the gradebook page, I would recommend that you use the gradebook class that appears on the body element of that page instead of checking the href to make sure it's on the gradebook page. Either one of these two should work

body.gradebook div[id*="assignment_group"]
.gradebook div[id*="assignment_group"]‍‍

It wouldn't hurt to throw a .gradebook in front of all of them to make sure you don't find something later on and establish the purpose.

.gradebook div[id*="assignment_group"], 
.gradebook div[id*="total_grade"], 
.gradebook div.assignment-group-cell, 
.gradebook div.total-cell { visibility: hidden;}‍‍‍‍‍‍‍‍