Enhance question menu state management by adding a centralized updater for answered and flagged questions

This commit is contained in:
Ross
2026-01-05 14:24:59 +00:00
parent b837c406cf
commit 8c796c3048
3 changed files with 91 additions and 70 deletions
+19
View File
@@ -53,6 +53,21 @@
// Minimal per-question status injected by view: answered/flagged arrays
window.examQuestionAnswered = {{ answered_json|safe }};
window.examQuestionFlagged = {{ flagged_json|safe }};
// Update the visual state of the question menu based on global arrays
window.updateQuestionMenu = function(){
try{
const answered = window.examQuestionAnswered || [];
const flagged = window.examQuestionFlagged || [];
const pos = (typeof window.currentQuestionPos === 'number') ? window.currentQuestionPos : NaN;
document.querySelectorAll('#menu-list .question-menu-item').forEach(btn => {
const idx = parseInt(btn.dataset.qn, 10);
btn.classList.toggle('answered', !!answered[idx]);
btn.classList.toggle('flagged', !!flagged[idx]);
btn.classList.toggle('current-question', idx === pos);
// ensure text colour remains white (use CSS var) - no-op if CSS already set
});
}catch(e){ console && console.error && console.error(e); }
};
</script>
{% include "physics/exam_take_help.html" %}
@@ -304,9 +319,13 @@
if (!isNaN(pos)) {
window.examQuestionAnswered = window.examQuestionAnswered || new Array({{ exam_length }}).fill(false);
window.examQuestionAnswered[pos] = true;
if(typeof window.updateQuestionMenu === 'function'){
window.updateQuestionMenu();
} else {
var btn = document.querySelector('#menu-list [data-qn="' + pos + '"]');
if (btn) btn.classList.add('answered');
}
}
} catch (e) { console && console.error && console.error(e); }
} catch (e) { console && console.error && console.error(e); }
});
@@ -138,17 +138,19 @@
const flaggedArr = (window.examQuestionFlagged && Array.isArray(window.examQuestionFlagged)) ? window.examQuestionFlagged : null;
for (let i = 0; i < {{ exam_length }}; i++) {
const qbutton = $(`<button class="question-menu-item" name="goto-${i}" data-qn="${i}"><span class="qnum">${i+1}</span></button>`);
// answered: indicate with border colour but keep text colour unchanged (white)
if (answeredArr && answeredArr[i]) { qbutton.addClass('answered'); }
// flagged: add flag icon and flagged class which alters border
if (flaggedArr && flaggedArr[i]) {
qbutton.addClass('flagged');
qbutton.append('<span class="question-flag" aria-hidden="true">⚑</span>');
// ensure flag icon exists only once
if (qbutton.find('.question-flag').length === 0) qbutton.append('<span class="question-flag" aria-hidden="true">⚑</span>');
}
if (i == {{ pos }}) { qbutton.addClass('current-question'); }
$('#menu-list').append(qbutton);
}
// Let a central updater ensure classes are consistent (handles cases where menu exists before arrays)
if(typeof window.updateQuestionMenu === 'function') window.updateQuestionMenu();
// Template URL for loading a fragment — use sk=0 as placeholder to replace later
const fragUrlTemplate = `{% if cid %}{% url 'physics:exam_take_fragment' pk=exam.pk sk=0 cid=cid passcode=passcode %}{% else %}{% url 'physics:exam_take_fragment_user' pk=exam.pk sk=0 %}{% endif %}`;