Enhance question menu update logic by adding flag icon management and logging for better debugging

physics/templates/physics/exam_take.html

@@ -55,6 +55,7 @@
         window.examQuestionFlagged = {{ flagged_json|safe }};
         // Update the visual state of the question menu based on global arrays
         window.updateQuestionMenu = function(){
+            console.log("Updating question menu");
             try{
                 const answered = window.examQuestionAnswered || [];
                 const flagged = window.examQuestionFlagged || [];
@@ -64,7 +65,13 @@
                     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
+                    // manage flag icon presence
+                    const hasIcon = btn.querySelector('.question-flag') !== null;
+                    if (flagged[idx] && !hasIcon) {
+                        const el = document.createElement('span'); el.className = 'question-flag'; el.setAttribute('aria-hidden','true'); el.textContent = '⚑'; btn.appendChild(el);
+                    } else if (!flagged[idx] && hasIcon) {
+                        const el = btn.querySelector('.question-flag'); if(el) el.remove();
+                    }
                 });
             }catch(e){ console && console.error && console.error(e); }
         };
@@ -73,10 +80,8 @@
         // Listen for flag button swaps (HTMX) and update the local menu state
         document.addEventListener('htmx:afterSwap', function(evt){
             try{
-                var target = (evt.detail && (evt.detail.target || evt.detail.elt)) || evt.target;
-                if(!target) return;
-                // If the flag button was swapped, update flagged array for current pos
-                var container = (target.id === 'flag-button-container') ? target : target.querySelector && target.querySelector('#flag-button-container');
+                // read the current flag button in DOM (safer than relying on event target)
+                var container = document.getElementById('flag-button-container');
                 if(!container) return;
                 var btn = container.querySelector('button');
                 if(!btn) return;