From d4247adb1359a5345f4b03ccd9deffbc00af356c Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 5 Jan 2026 14:50:07 +0000
Subject: [PATCH] Enhance loading indicators for question fragment during HTMX
 requests; ensure overview tile text color remains unchanged for flagged
 questions

---
 physics/templates/physics/exam_take.html      | 84 +++++++++----------
 .../templates/physics/exam_take_overview.html |  9 ++
 2 files changed, 51 insertions(+), 42 deletions(-)

diff --git a/physics/templates/physics/exam_take.html b/physics/templates/physics/exam_take.html
index 9d52b829..ec90c304 100755
--- a/physics/templates/physics/exam_take.html
+++ b/physics/templates/physics/exam_take.html
@@ -76,55 +76,55 @@
             }catch(e){ console && console.error && console.error(e); }
         };
     </script>
-        <script>
+    <script>
             // Show a blur + spinner on the question fragment while HTMX loads it
-            (function(){
-                function showLoading(){
-                    try{
-                        const frag = document.getElementById('question-fragment');
-                        if(!frag) return;
-                        frag.classList.add('loading');
-                        if(!frag.querySelector('.loading-spinner')){
-                            const s = document.createElement('div');
-                            s.className = 'loading-spinner';
-                            s.setAttribute('aria-hidden','true');
-                            frag.appendChild(s);
-                        }
-                    }catch(e){console && console.error && console.error(e);}            
-                }
+        (function(){
+            function showLoading(){
+                try{
+                    const frag = document.getElementById('question-fragment');
+                    if(!frag) return;
+                    frag.classList.add('loading');
+                    if(!frag.querySelector('.loading-spinner')){
+                        const s = document.createElement('div');
+                        s.className = 'loading-spinner';
+                        s.setAttribute('aria-hidden','true');
+                        frag.appendChild(s);
+                    }
+                }catch(e){console && console.error && console.error(e);}
+            }
 
-                function hideLoading(){
-                    try{
-                        const frag = document.getElementById('question-fragment');
-                        if(!frag) return;
-                        frag.classList.remove('loading');
-                        const s = frag.querySelector('.loading-spinner'); if(s) s.remove();
-                    }catch(e){console && console.error && console.error(e);}            
-                }
+            function hideLoading(){
+                try{
+                    const frag = document.getElementById('question-fragment');
+                    if(!frag) return;
+                    frag.classList.remove('loading');
+                    const s = frag.querySelector('.loading-spinner'); if(s) s.remove();
+                }catch(e){console && console.error && console.error(e);}
+            }
 
-                document.body.addEventListener('htmx:beforeRequest', function(evt){
-                    try{
-                        const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
+            document.body.addEventListener('htmx:beforeRequest', function(evt){
+                try{
+                    const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
                         // if the request targets the question fragment, show loading
-                        if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){
-                            showLoading();
-                        }
-                    }catch(e){/* ignore */}
-                });
+                    if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){
+                        showLoading();
+                    }
+                }catch(e){/* ignore */}
+            });
 
-                document.body.addEventListener('htmx:afterSwap', function(evt){
-                    try{
-                        const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
-                        if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){
-                            hideLoading();
-                        }
-                    }catch(e){}
-                });
+            document.body.addEventListener('htmx:afterSwap', function(evt){
+                try{
+                    const target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
+                    if(target && (target.id === 'question-fragment' || (target.closest && target.closest('#question-fragment')))){
+                        hideLoading();
+                    }
+                }catch(e){}
+            });
 
                 // also hide after settle to be safe
-                document.body.addEventListener('htmx:afterSettle', function(evt){ hideLoading(); });
-            })();
-        </script>
+            document.body.addEventListener('htmx:afterSettle', function(evt){ hideLoading(); });
+        })();
+    </script>
     <script>
             // Also update after HTMX settle to ensure DOM changes are applied
         document.body.addEventListener('htmx:afterSettle', function(){
diff --git a/physics/templates/physics/exam_take_overview.html b/physics/templates/physics/exam_take_overview.html
index 468de6d8..102ce95c 100644
--- a/physics/templates/physics/exam_take_overview.html
+++ b/physics/templates/physics/exam_take_overview.html
@@ -133,6 +133,15 @@
 
     /* Flagged questions show only the flag icon; do not change border color */
 
+        /* Ensure global `.flagged` rules don't change the overview tile text colour. */
+        .overview-question-btn.flagged {
+            color: inherit !important;
+        }
+        .overview-question-btn.flagged .qn-num,
+        .overview-question-btn.flagged .qn-ans {
+            color: inherit !important;
+        }
+
         .overview-question-btn .question-flag {
             margin-left: auto;
             font-size: 0.95rem;