Refactor exam review question template to support HTMX navigation and create a partial for question details

generic/templates/generic/exam_review_question.html

@@ -3,29 +3,10 @@
 {% block content %}
 <div class="container my-4">
     <h2>Reviewing: {{ exam.name }} (Question {{ q_index|add:1 }} of {{ total }})</h2>
-
+    <div id="review-root">
-    <div class="card mb-3">
+        {# The #review-content element is replaced by HTMX when navigating between questions. #}
-        <div class="card-body">
+        <div id="review-content">
-            <h5 class="card-title">Question</h5>
+            {% include 'generic/partials/exam_review_question_fragment.html' %}
-            <p class="lead">{{ question }}</p>
-
-            <p>
-                <a class="btn btn-sm btn-outline-secondary" href="{% url app_name|add:':question_detail' question.pk %}" target="_blank">View full question details</a>
-            </p>
-
-            <div class="d-flex justify-content-between mt-3">
-                {% if prev_index is not None %}
-                    <a class="btn btn-outline-primary" href="{% url app_name|add:':exam_review_question' exam.pk prev_index %}">&larr; Previous</a>
-                {% else %}
-                    <span></span>
-                {% endif %}
-
-                {% if next_index is not None %}
-                    <a class="btn btn-primary" href="{% url app_name|add:':exam_review_question' exam.pk next_index %}">Next &rarr;</a>
-                {% else %}
-                    <a class="btn btn-success" href="{% url app_name|add:':exam_overview' exam.pk %}">Complete review</a>
-                {% endif %}
-            </div>
         </div>
     </div>
 </div>

generic/templates/generic/partials/exam_review_question_fragment.html

@@ -0,0 +1,32 @@
+<div class="card mb-3">
+    <div class="card-body">
+        <h5 class="card-title">Question</h5>
+        <p class="lead">{{ question }}</p>
+
+        <p>
+            <a class="btn btn-sm btn-outline-secondary" href="{% url app_name|add:':question_detail' question.pk %}" target="_blank">View full question details</a>
+        </p>
+
+        <div class="d-flex justify-content-between mt-3">
+            {% if prev_index is not None %}
+                <a class="btn btn-outline-primary"
+                   hx-get="{% url app_name|add:':exam_review_question' exam.pk prev_index %}"
+                   hx-target="#review-content"
+                   hx-swap="innerHTML"
+                   hx-push-url="true">&larr; Previous</a>
+            {% else %}
+                <span></span>
+            {% endif %}
+
+            {% if next_index is not None %}
+                <a class="btn btn-primary"
+                   hx-get="{% url app_name|add:':exam_review_question' exam.pk next_index %}"
+                   hx-target="#review-content"
+                   hx-swap="innerHTML"
+                   hx-push-url="true">Next &rarr;</a>
+            {% else %}
+                <a class="btn btn-success" href="{% url app_name|add:':exam_overview' exam.pk %}">Complete review</a>
+            {% endif %}
+        </div>
+    </div>
+</div>

generic/views.py

@@ -1216,6 +1216,12 @@ class ExamViews(View, LoginRequiredMixin):
             "can_edit": self.check_user_edit_access(request.user, exam_id=pk),
         }
 
+        # If this is an HTMX request, return only the fragment so the client
+        # can swap it into the page. HTMX sends the HX-Request header which
+        # is available in Django as HTTP_HX_REQUEST in request.META.
+        if request.META.get("HTTP_HX_REQUEST") == "true":
+            return render(request, "generic/partials/exam_review_question_fragment.html", context)
+
         return render(request, "generic/exam_review_question.html", context)
 
     @method_decorator(login_required)