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

Enhance question navigation by updating local state on button clicks and ensuring DOM updates after HTMX settle

Browse Source
This commit is contained in:
Ross
2026-01-05 14:41:48 +00:00
parent b040dfcd82
commit 569ddb4343
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/exam_take.html
+6
View File
@@ -76,6 +76,12 @@
}catch(e){ console && console.error && console.error(e); } }catch(e){ console && console.error && console.error(e); }
}; };
</script> </script>
<script>
// Also update after HTMX settle to ensure DOM changes are applied
document.body.addEventListener('htmx:afterSettle', function(){
try{ if(typeof window.updateQuestionMenu === 'function') window.updateQuestionMenu(); }catch(e){}
});
</script>
<script> <script>
// Listen for flag button swaps (HTMX) and update the local menu state // Listen for flag button swaps (HTMX) and update the local menu state
document.addEventListener('htmx:afterSwap', function(evt){ document.addEventListener('htmx:afterSwap', function(evt){
physics/templates/physics/partials/exam_take_fragment.html
+6 -4
View File
@@ -58,15 +58,16 @@
<div class="mt-2"> <div class="mt-2">
{% if previous > -1 %} {% if previous > -1 %}
<button type="submit" name="previous" class="save btn btn-secondary" title="Click to save your answer(s) and go to the previous question">Previous</button> <button type="submit" name="previous" class="save btn btn-secondary" title="Click to save your answer(s) and go to the previous question" onclick="try{ window.currentQuestionPos = {{ previous }}; if(typeof updateQuestionMenu==='function') updateQuestionMenu(); }catch(e){}">Previous</button>
{% endif %} {% endif %}
{% if next %} {% if next %}
<button type="submit" name="next" class="save btn btn-secondary" title="Click to save your answer(s) and go to the next question">Next</button> <button type="submit" name="next" class="save btn btn-secondary" title="Click to save your answer(s) and go to the next question" onclick="try{ window.currentQuestionPos = {{ pos|add:1 }}; if(typeof updateQuestionMenu==='function') updateQuestionMenu(); }catch(e){}">Next</button>
<!-- Skip: load the next question fragment without submitting the form --> <!-- Skip: load the next question fragment without submitting the form -->
<button type="button" id="skip-button" class="btn btn-outline-secondary ms-2" title="Skip to next question without saving" <button type="button" id="skip-button" class="btn btn-outline-secondary ms-2" title="Skip to next question without saving"
hx-get="{% if cid %}{% url 'physics:exam_take_fragment' pk=exam.pk sk=pos|add:1 cid=cid passcode=passcode %}{% else %}{% url 'physics:exam_take_fragment_user' pk=exam.pk sk=pos|add:1 %}{% endif %}" hx-get="{% if cid %}{% url 'physics:exam_take_fragment' pk=exam.pk sk=pos|add:1 cid=cid passcode=passcode %}{% else %}{% url 'physics:exam_take_fragment_user' pk=exam.pk sk=pos|add:1 %}{% endif %}"
hx-target="#question-fragment" hx-swap="innerHTML">Skip</button> hx-target="#question-fragment" hx-swap="innerHTML">Skip</button>
<!-- Fallback link for non-HTMX clients: simple navigation without saving --> <!-- Fallback link for non-HTMX clients: simple navigation without saving -->
<a class="d-none" href="{% if cid %}{% url 'physics:exam_take' pk=exam.pk sk=pos|add:1 cid=cid passcode=passcode %}{% else %}{% url 'physics:exam_take_user' pk=exam.pk sk=pos|add:1 %}{% endif %}"></a> <a class="d-none" href="{% if cid %}{% url 'physics:exam_take' pk=exam.pk sk=pos|add:1 cid=cid passcode=passcode %}{% else %}{% url 'physics:exam_take_user' pk=exam.pk sk=pos|add:1 %}{% endif %}"></a>
{% else %} {% else %}
@@ -138,10 +139,11 @@
$('#menu-list').empty(); $('#menu-list').empty();
const serverAnswered = {{ answered_json|default:'null'|safe }}; const serverAnswered = {{ answered_json|default:'null'|safe }};
const serverFlagged = {{ flagged_json|default:'null'|safe }}; const serverFlagged = {{ flagged_json|default:'null'|safe }};
if ((!window.examQuestionAnswered || !Array.isArray(window.examQuestionAnswered)) && Array.isArray(serverAnswered)) { // Always refresh client-side arrays from server-provided state when fragment loads
if (Array.isArray(serverAnswered)) {
window.examQuestionAnswered = serverAnswered; window.examQuestionAnswered = serverAnswered;
} }
if ((!window.examQuestionFlagged || !Array.isArray(window.examQuestionFlagged)) && Array.isArray(serverFlagged)) { if (Array.isArray(serverFlagged)) {
window.examQuestionFlagged = serverFlagged; window.examQuestionFlagged = serverFlagged;
} }
const answeredArr = (window.examQuestionAnswered && Array.isArray(window.examQuestionAnswered)) ? window.examQuestionAnswered : null; const answeredArr = (window.examQuestionAnswered && Array.isArray(window.examQuestionAnswered)) ? window.examQuestionAnswered : null;