Observer grade view sorting.

jsimon3
Community Participant

Along the same lines as this complaint https://community.canvaslms.com/ideas/2512-parental-observation-in-canvas-complicated-with-three-chi... Our parents had a hard time discerning grades at a quick glance...

I created a script to to at least clean up and organize the students grades on the observer view.

330848_pastedImage_1.png

if you were to click view grades all of the grades would be jumbled up all the kids would be intertwined and if there was a course that was ungraded(like a counselor course or club) it would show up as well. so the script gets rid of the ungraded courses and alphabetizes the rest of the courses.

330849_pastedImage_11.png

function sortGradesObservers() {
const checkIfNull = async selector => {
while (document.querySelector(selector) === null) {
await new Promise(resolve => requestAnimationFrame(resolve));
}
return document.querySelector(selector);
};

checkIfNull("table.course_details.observer_grades").then(() => {
if (
ENV.current_user_roles.includes("observer") &&
window.location.pathname.includes("/grades")
) {
let table, tRows;
table = document.querySelector("table.course_details.observer_grades");
tRows = document.querySelectorAll(
"table.course_details.observer_grades > tbody > tr"
);
const filterRows = async () => {
tRows.forEach(one => {
if (
!one.innerHTML.includes("select") &&
one.querySelector(".percent").innerText.includes("no grade")
) {
one.style.display = "none";
}
});
};
filterRows().then(() => {
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

// do the work...
const daThing = th => {
const table = document.querySelector("#content > table.course_details.observer_grades");
Array.from(tRows)
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr) );
}
daThing(document.querySelectorAll('td')[0]);
});
}
});
}

Done:

improved sorting 5 times faster
also took into account if a student had a grade last semester but does not have a grade this semester (especially this point of time in which now some of the courses cannot be graded and are marked as enrichment)