Implement HTMX-based loading of exam question responses and add corresponding view and URL routing

This commit is contained in:
Ross
2025-11-09 22:01:57 +00:00
parent c89c14b89e
commit ae720662f7
4 changed files with 75 additions and 32 deletions
@@ -109,39 +109,19 @@
<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>
{# Show responses given during this exam for the question #}
{# Responses partial: load on demand via HTMX. Button fetches partial into #responses-container #}
<div class="mt-3">
<h6>Responses in this exam</h6>
<div class="small text-muted mb-2">List of candidate answers recorded for this question in the current exam.</div>
<ul class="list-group">
{% for ua in question.cid_user_answers.all %}
{% if ua.exam and ua.exam.pk == exam.pk %}
<li class="list-group-item d-flex justify-content-between align-items-start">
<div>
{% if ua.user %}
<strong>{{ ua.user.get_full_name|default:ua.user.username }}</strong>
{% else %}
<strong>Anonymous</strong>
{% endif %}
<div>Answer: <strong>{{ ua.answer }}</strong></div>
{% if ua.created_date %}
<div class="small text-muted">Answered: {{ ua.created_date }}</div>
{% endif %}
</div>
<div>
{% if ua.answer == question.best_answer %}
<span class="badge bg-success">Correct</span>
{% else %}
<span class="badge bg-secondary">Incorrect</span>
{% endif %}
</div>
</li>
{% endif %}
{% empty %}
<li class="list-group-item">No responses recorded for this exam.</li>
{% endfor %}
</ul>
</div>
<div class="d-flex justify-content-between align-items-center">
<div>
<button class="btn btn-sm btn-outline-primary"
hx-get="{% url 'sbas:exam_review_question_responses' exam.pk q_index %}"
hx-target="#responses-container"
hx-swap="innerhtmlHTML">Show responses</button>
</div>
</div>
<div class="mt-2" id="responses-container">
<div class="text-muted small">Responses are hidden — click “Show responses” to load.</div>
</div>
<div class="d-flex justify-content-between mt-3">
{% if prev_index is not None %}
@@ -0,0 +1,33 @@
{# Partial: responses for a question within an exam. Rendered server-side or via HTMX. #}
<div id="responses-container">
<h6>Responses in this exam</h6>
<div class="small text-muted mb-2">List of candidate answers recorded for this question in the current exam.</div>
<ul class="list-group">
{% for ua in question.cid_user_answers.all %}
{% if ua.exam and ua.exam.pk == exam.pk %}
<li class="list-group-item d-flex justify-content-between align-items-start">
<div>
{% if ua.user %}
<strong>{{ ua.user.get_full_name|default:ua.user.username }}</strong>
{% else %}
<strong>Anonymous</strong>
{% endif %}
<div>Answer: <strong>{{ ua.answer }}</strong></div>
{% if ua.created_date %}
<div class="small text-muted">Answered: {{ ua.created_date }}</div>
{% endif %}
</div>
<div>
{% if ua.answer == question.best_answer %}
<span class="badge bg-success">Correct</span>
{% else %}
<span class="badge bg-secondary">Incorrect</span>
{% endif %}
</div>
</li>
{% endif %}
{% empty %}
<li class="list-group-item">No responses recorded for this exam.</li>
{% endfor %}
</ul>
</div>