Skip to content

announce remaining time for test at certain times #3092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Alex-Jordan wants to merge 1 commit into from
+29 −3
Closed

announce remaining time for test at certain times #3092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 28 additions & 3 deletions htdocs/js/GatewayQuiz/gateway.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

// Gateway timer
const timerDiv = document.getElementById('gwTimer'); // The timer div element
const timerAnnounceDiv = document.getElementById('gwTimerAnnounce'); // Hidden live region for time announcements
let actuallySubmit = false; // This needs to be set to true to allow an actual submission.
// The 'Grade Test' submit button.
const submitAnswers =
Expand Down Expand Up @@ -58,8 +59,30 @@
bsToast.show();
};

// Only announce the remaining time via the hidden live region at these checkpoints (seconds remaining).
// Announcing every second would be overwhelming, so this only fires at the last few seconds (when the test is
// about to auto-submit) and at a handful of longer-interval checkpoints on the way down from 30 minutes.
const shouldAnnounceRemainingTime = (t) =>
(t >= 1 && t <= 5) ||
t === 15 ||
t === 30 ||
t === 60 ||
t === 300 ||
t === 900 ||
Comment on lines +67 to +71

@drgrice1 drgrice1 Jul 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have frequently seen Claude miss many obvious things. This is one of them (unless this is your code). When I was not hearing any of the announcements, the first thing that I checked was that the text in the visually hidden div was actually changing, and I saw that it was not until it got down to 5 seconds or less. The === comparisons are not going to work. The remainingTime is not an integer. This is because the server time that is received in the updateTimeDelta method is not an integer (it is the submitTime for the request which is set using Time::HiRes). So the comparison t === 15 is highly unlikely to actually be true. So you will probably need to use something like (t >= 15 && t <= 16) instead. Either that or I suppose we could round the entire timeDelta value on line 168 instead of only the client time obtained from Date().getTime() / 1000, and then the === comparisons will work. I don't think that the sub second precision is needed.

Note that even when the div content is being set, the content is not announced (at least with Gnome Orca).

(t >= 1800 && t % 1800 === 0);

// Update the hidden live region with the current remaining time, either because it just hit one of the
// checkpoints above, or because force is true (used to always announce the initial remaining time on page load).
const announceRemainingTime = (remainingTime, force = false) => {
if (!timerAnnounceDiv || (!force && !shouldAnnounceRemainingTime(remainingTime))) return;
timerAnnounceDiv.textContent =
remainingTime >= 0
? `${remainingTimeString}${formatTime(remainingTime)}`
: `${remainingTimeString}00:00:00`;
};

// Update the timer
const updateTimer = () => {
const updateTimer = (forceAnnounce = false) => {
const dateNow = new Date();
const browserTime = Math.round(dateNow.getTime() / 1000);
const remainingTime = serverDueTime - browserTime + timeDelta;
Expand All @@ -72,6 +95,7 @@
}

if (!timerDiv.dataset.acting) {
announceRemainingTime(remainingTime, forceAnnounce);
Comment thread
Alex-Jordan marked this conversation as resolved.
// Check to see if we should put up a low time alert, or submit the test if
// the time is near the end of the grace period.
const alertStatus = sessionStorage.getItem('gatewayAlertStatus');
Expand Down Expand Up @@ -167,8 +191,9 @@
submitAnswers.click();
}
} else {
// Set the timer text and check alerts at page load.
updateTimer();
// Set the timer text and check alerts at page load. Force the initial remaining time to be announced
// via the live region, regardless of whether it happens to land on a normal announcement checkpoint.
updateTimer(true);

// Start the timer.
setInterval(updateTimer, 1000);
Expand Down
1 change: 1 addition & 0 deletions templates/ContentGenerator/GatewayQuiz.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,7 @@
# '00:00:00' is a placeholder that is replaced by the actual time remaining via javascript.
maketext('Remaining time: [_1]', '00:00:00')
) =%>
<div id="gwTimerAnnounce" class="visually-hidden" role="status" aria-live="polite" aria-atomic="true"></div>
% }
%
% if ($timeLeft < 60 && $timeLeft > 0 && !$c->{can}{gradeUnsubmittedTest}
Expand Down