Lagging Text in Speed Grader Comments

[PM55]

Please can someone advise?

There is a 25 to 30 second lag from my typing to text appearing in the Comment boxes on Speed Grader.

This is making marking impossible!

Nothing else is running slow on my laptop.  Have used Chrome and Int Exp.

Windows 10

Thanks in advance.

[james_whalley]

Hello @PM55,

Somebody may have a better answer, but it is my understanding that the SpeedGrader can sometimes be slowed when there are a large number of users engaging with it at the same time. Is this something that was occurring during a single instance for you or is it a recurring issue?

Regards,

James

[PM55]

Thanks James.  There are a number of markers but nobody else is having the problem 😞

[james_whalley · Accepted solution]

@PM55 If this issue persists, I would recommend updating your browser to the most recent version and rebooting your machine. I know that Canvas can be slower for me in general when I have had my Chrome open for a bit.

If the above does not resolve your issue, you may need to reach out to your institution's Canvas support group so they can elevate the issue to Instructure's support team.

Regards,

James

[DrJoshRodriguez]

I don't know if this was part of your problem, but I was having some very irritating lag in SpeedGrader. I narrowed the problem down to just SpeedGrader, since typing was working everywhere else. Then I noticed a significant increase in lag in a longer rubric. I suspect that the page has some sort of auto-saving for every keystroke. I don't know that for sure. But I wrote a little TamperMonkey script that I used to work around the issue. I got into  TamperMonkey actually from another Canvas user that added rubric imports via a custom script. The link above is for the Chrome app store. It lets you add custom buttons and functionality to a web page. 

In my case, I added a little floating text box that was independent of the rest of the page. It avoided the lagging (probably the auto-saving from the rubric boxes). The box is moveable and floats over the regular page. When you're done typing your comment, you click Done, which copies your text, clears the text out of the box so it's ready to go again, and minimizes the box to get it out of your way. When you want to write in it again, you hit the Max button to make it big again. And you can always auto-size the box manually as well.

In the TamperMonkey Dashboard, you click plus to create a new script. Then paste this in. Under @match, you will have to substitute your own institution's base URL. This triggers the script to run when access Speeed Grader specifically. The script just creates the new floating textbox. You can disable the script in the TamperMonkey extension when you don't want it to appear.

// ==UserScript==
// @Name Movable Floating Textarea for Canvas Speed Grader
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Try to alleviate input lag by providing a movable input box
// @author Josh Rodriguez
// @match https://INSTITUTION_BASE_URL/courses/*/gradebook/speed_grader*
// @grant none
// ==/UserScript==

(function() {
'use strict';

// Create the floating box
const floatingBox = document.createElement("div");
floatingBox.style.position = "fixed";
floatingBox.style.top = "50px";
floatingBox.style.leftt = "50px";
floatingBox.style.zIndex = "1000";
floatingBox.style.backgroundColor = "white";
floatingBox.style.border = "1px solid black";
floatingBox.style.padding = "10px";
floatingBox.style.cursor = "move"; // Cursor indicates that this is movable

// Create the textarea
const textarea = document.createElement("textarea");
textarea.style.width = "30px";
textarea.style.height = "10px";
floatingBox.appendChild(textarea);

const buttonArea = document.createElement("div");
floatingBox.appendChild(buttonArea);

// Create the copy button
const copyButton = document.createElement("button");
copyButton.textContent = "Done";
copyButton.onclick = function() {
textarea.select();
document.execCommand("copy");
textarea.value = "";
textarea.style.width = "30px";
textarea.style.height = "10px";
minimizeButton.textContent = "Max";
};

buttonArea.appendChild(copyButton);

const minimizeButton = document.createElement("button");
minimizeButton.textContent = "Max";
minimizeButton.onclick = function(){
if(minimizeButton.textContent === "Min"){
textarea.style.width = "30px";
textarea.style.height = "10px";
minimizeButton.textContent = "Max";
} else {
textarea.style.width = "1000px";
textarea.style.height = "100px";
minimizeButton.textContent = "Min";
textarea.focus();
}

}
buttonArea.appendChild(minimizeButton);

// Add the floating box to the body
document.body.appendChild(floatingBox);

// Drag functionality
floatingBox.addEventListener('mousedown', function(e) {
if (e.target !== textarea){
e.preventDefault();
var offsetX = e.clientX - floatingBox.getBoundingClientRect().left;
var offsetY = e.clientY - floatingBox.getBoundingClientRect().top;

function mouseMoveHandler(e) {
floatingBox.style.left = (e.clientX - offsetX) + 'px';
floatingBox.style.top = (e.clientY - offsetY) + 'px';
floatingBox.style.right = ""; // Clear the right property
}

function mouseUpHandler() {
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
}

document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);

}
});

})();