Add HTMX-based aggregated response summary for exam questions

This commit is contained in:
Ross
2025-11-09 22:09:23 +00:00
parent 092c4a1be6
commit 3e9a96d99f
4 changed files with 116 additions and 41 deletions
@@ -109,49 +109,15 @@
<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>
{# Aggregated summary: always shown if aggregation context is available #}
{# Aggregated summary: HTMX-loaded automatically on fragment load #}
<div class="mt-3">
<h6>Response summary</h6>
{% if exam_response_total %}
<div class="small text-muted mb-2">Total responses: {{ exam_response_total }}</div>
<div class="row mb-2">
<div class="col-auto">Correct:</div>
<div class="col">
{% if exam_response_correct_count is not None %}
<strong>{{ exam_response_correct_count }}</strong>
{% if exam_response_correct_pct is not None %}
<span class="text-muted">({{ exam_response_correct_pct }}%)</span>
{% endif %}
{% else %}
<span class="text-muted">N/A</span>
{% endif %}
</div>
</div>
<div class="list-group">
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>A</div>
<div><span class="me-2">{{ exam_response_counts.a|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.a|default:0 }}%</small></div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>B</div>
<div><span class="me-2">{{ exam_response_counts.b|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.b|default:0 }}%</small></div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>C</div>
<div><span class="me-2">{{ exam_response_counts.c|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.c|default:0 }}%</small></div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>D</div>
<div><span class="me-2">{{ exam_response_counts.d|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.d|default:0 }}%</small></div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>E</div>
<div><span class="me-2">{{ exam_response_counts.e|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.e|default:0 }}%</small></div>
</div>
</div>
{% else %}
<div class="small text-muted">No responses recorded for this question in the exam yet.</div>
{% endif %}
<div id="response-summary"
hx-get="{% url 'sbas:exam_review_question_summary' exam.pk q_index %}"
hx-trigger="load"
hx-swap="innerHTML">
<div class="small text-muted">Loading summary…</div>
</div>
</div>
{# Responses partial: load on demand via HTMX. Button fetches partial into #responses-container #}
@@ -0,0 +1,43 @@
{# Partial: aggregated response summary for a question within an exam. HTMX-loadable. #}
<div id="response-summary-content">
{% if exam_response_total %}
<div class="small text-muted mb-2">Total responses: {{ exam_response_total }}</div>
<div class="row mb-2">
<div class="col-auto">Correct:</div>
<div class="col">
{% if exam_response_correct_count is not None %}
<strong>{{ exam_response_correct_count }}</strong>
{% if exam_response_correct_pct is not None %}
<span class="text-muted">({{ exam_response_correct_pct }}%)</span>
{% endif %}
{% else %}
<span class="text-muted">N/A</span>
{% endif %}
</div>
</div>
<div class="list-group">
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>A</div>
<div><span class="me-2">{{ exam_response_counts.a|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.a|default:0 }}%</small></div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>B</div>
<div><span class="me-2">{{ exam_response_counts.b|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.b|default:0 }}%</small></div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>C</div>
<div><span class="me-2">{{ exam_response_counts.c|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.c|default:0 }}%</small></div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>D</div>
<div><span class="me-2">{{ exam_response_counts.d|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.d|default:0 }}%</small></div>
</div>
<div class="list-group-item d-flex justify-content-between align-items-center">
<div>E</div>
<div><span class="me-2">{{ exam_response_counts.e|default:0 }}</span><small class="text-muted">{{ exam_response_pcts.e|default:0 }}%</small></div>
</div>
</div>
{% else %}
<div class="small text-muted">No responses recorded for this question in the exam yet.</div>
{% endif %}
</div>