Refactor show respondents buttons to improve HTMX integration and add fallback for non-HTMX environments

anatomy/templates/anatomy/partials/exam_review_question_responses_fragment.html

@@ -7,9 +7,19 @@
         </div>
         <div>
             {% if not reveal_respondents %}
-                <button class="btn btn-sm btn-outline-primary" hx-get="?reveal=1" hx-target="#anatomy-responses-container" hx-swap="outerHTML">Show respondents</button>
+                <button type="button" class="btn btn-sm btn-outline-primary show-respondents-btn" 
+                        hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1" 
+                        hx-target="#anatomy-responses-container" 
+                        hx-swap="outerHTML"
+                        data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}?reveal=1"
+                >Show respondents</button>
             {% else %}
-                <button class="btn btn-sm btn-outline-secondary" hx-get="?" hx-target="#anatomy-responses-container" hx-swap="outerHTML">Hide respondents</button>
+                <button type="button" class="btn btn-sm btn-outline-secondary show-respondents-btn" 
+                        hx-get="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}" 
+                        hx-target="#anatomy-responses-container" 
+                        hx-swap="outerHTML"
+                        data-url="{% url 'anatomy:exam_review_question_responses' exam.pk q_index %}"
+                >Hide respondents</button>
             {% endif %}
         </div>
     </div>
@@ -48,3 +58,33 @@
         {% endfor %}
     </ul>
 </div>
+
+<script>
+// Fallback for environments where HTMX isn't active or the hx-* attributes don't trigger.
+// Attach a click handler to buttons with class .show-respondents-btn that will fetch
+// the fragment URL (from data-url) and replace the container content.
+(function(){
+    try {
+        var els = document.querySelectorAll('.show-respondents-btn');
+        els.forEach(function(btn){
+            btn.addEventListener('click', function(ev){
+                // If HTMX is present it will handle the request; only run fallback when not handled.
+                if (window.htmx) return;
+                ev.preventDefault();
+                var url = btn.getAttribute('data-url');
+                if (!url) return;
+                fetch(url, {credentials: 'same-origin'})
+                    .then(function(r){ if (!r.ok) throw new Error('Network response was not ok'); return r.text(); })
+                    .then(function(html){
+                        var container = document.querySelector('#anatomy-responses-container');
+                        if (container) container.outerHTML = html;
+                    }).catch(function(err){
+                        console.error('Failed to load responses fragment', err);
+                    });
+            }, {passive: false});
+        });
+    } catch (e) {
+        // ignore
+    }
+})();
+</script>