ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement timed-out submission handling and AJAX response for collection case view

Browse Source
This commit is contained in:
Ross
2025-10-13 10:32:25 +01:00
parent 1cf18c6f0d
commit fa08f9cf76
2 changed files with 52 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/collection_case_view_take.html
+30 -9
View File
@@ -25,6 +25,7 @@
<div id="question-timer-progress-inner" style="width:100%; height:100%; background:var(--timer-color, #28a745);"></div>
</div>
</div>
<div id="timer-htmx-target" style="display:none;"></div>
</div>
{% endif %}
@@ -414,15 +415,35 @@
var $next = $form.find('button[name="next"]');
var $finish = $form.find('button[name="finish"]');
if ($next.length) {
$next.prop('disabled', false);
$next.click();
} else if ($finish.length) {
$finish.prop('disabled', false);
$finish.click();
} else {
$form.submit();
}
// Instead of navigating away, submit via fetch with timed_out flag
// Use HTMX to POST the timed_out flag and then lock the UI
var onAfter = function (evt) {
try {
// lock the form UI in-place
$form.find('input, textarea, select, button').prop('disabled', true);
$form.addClass('timed-out-locked');
$('#question-timer').text('Locked');
// hide the progress bar
$('#question-timer-progress, #question-timer-progress-outer, #question-timer-progress-inner').hide();
// ensure inner shows empty state if something relies on it
$('#question-timer-progress-inner').css({ width: '0%', background: '#dc3545' });
} catch (e) {
console.error('Error locking UI after htmx request', e);
} finally {
htmx.off('htmx:afterRequest', onAfter);
}
};
htmx.on('htmx:afterRequest', onAfter);
htmx.ajax('POST', window.location.href, {
values: { timed_out: '1' },
swap: 'none',
headers: {
'X-CSRFToken': document.querySelector('input[name="csrfmiddlewaretoken"]').value,
},
target: "#timer-htmx-target",
});
} else {
$timer.text(formatTime(remaining));
updateProgress();