From 569ddb4343660bcdd3b799176c5e9ac6996e952b Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 5 Jan 2026 14:41:48 +0000
Subject: [PATCH] Enhance question navigation by updating local state on button
 clicks and ensuring DOM updates after HTMX settle

---
 physics/templates/physics/exam_take.html               |  6 ++++++
 .../templates/physics/partials/exam_take_fragment.html | 10 ++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/physics/templates/physics/exam_take.html b/physics/templates/physics/exam_take.html
index 0dfcb870..0391b604 100755
--- a/physics/templates/physics/exam_take.html
+++ b/physics/templates/physics/exam_take.html
@@ -76,6 +76,12 @@
             }catch(e){ console && console.error && console.error(e); }
         };
     </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>
         // Listen for flag button swaps (HTMX) and update the local menu state
         document.addEventListener('htmx:afterSwap', function(evt){
diff --git a/physics/templates/physics/partials/exam_take_fragment.html b/physics/templates/physics/partials/exam_take_fragment.html
index 5c9155b3..7999b40e 100644
--- a/physics/templates/physics/partials/exam_take_fragment.html
+++ b/physics/templates/physics/partials/exam_take_fragment.html
@@ -58,15 +58,16 @@
 
         <div class="mt-2">
             {% 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 %}
 
             {% 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 -->
                 <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-target="#question-fragment" hx-swap="innerHTML">Skip</button>
+
                     <!-- 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>
             {% else %}
@@ -138,10 +139,11 @@
             $('#menu-list').empty();
             const serverAnswered = {{ answered_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;
             }
-            if ((!window.examQuestionFlagged || !Array.isArray(window.examQuestionFlagged)) && Array.isArray(serverFlagged)) {
+            if (Array.isArray(serverFlagged)) {
                 window.examQuestionFlagged = serverFlagged;
             }
             const answeredArr = (window.examQuestionAnswered && Array.isArray(window.examQuestionAnswered)) ? window.examQuestionAnswered : null;