diff --git a/physics/templates/physics/exam_take.html b/physics/templates/physics/exam_take.html index 9915dd82..0dfcb870 100755 --- a/physics/templates/physics/exam_take.html +++ b/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;