Enhance exam review overview page to display per-question summaries with response metrics and color coding for quick triage

This commit is contained in:
Ross
2025-11-10 12:26:12 +00:00
parent cf09449d16
commit e7c15a75a0
2 changed files with 161 additions and 3 deletions
@@ -0,0 +1,50 @@
{% extends 'generic/examcollection_base.html' %}
{% block content %}
<div class="container my-4">
<div class="d-flex justify-content-between align-items-center mb-3">
<h2>Review overview: {{ exam.name }}</h2>
<div>
<a class="btn btn-primary" href="{% url app_name|add:':exam_review_question' exam.pk 0 %}">Start sequential review</a>
</div>
</div>
<p class="text-muted small">Colour indicates likely attention needed: green (good), yellow (check), red (needs attention). Hover for details.</p>
<div class="row">
{% for qs in question_summaries %}
<div class="col-md-6 mb-3">
<div class="card border-{{ qs.colour }} h-100">
<div class="card-body">
<div class="d-flex justify-content-between">
<h5 class="card-title">Question {{ qs.q_index|add:1 }}: {{ qs.question }}</h5>
<span class="badge bg-{{ qs.colour }} align-self-start">{% if qs.correct_pct is not None %}{{ qs.correct_pct }}% correct{% elif qs.answered_pct is not None %}{{ qs.answered_pct }}% answered{% else %}No data{% endif %}</span>
</div>
<p class="card-text small text-muted mb-2">Responses: {{ qs.total_responses }}{% if qs.top_answer %} — top: "{{ qs.top_answer }}"{% endif %}</p>
<div class="d-flex gap-2">
<a class="btn btn-sm btn-outline-primary" href="{% url app_name|add:':exam_review_question' exam.pk qs.q_index %}">Review</a>
<a class="btn btn-sm btn-outline-secondary" href="#" onclick="document.location.href='{% url app_name|add:':question_detail' qs.question.pk %}';return false;">Question detail</a>
</div>
<details class="mt-2">
<summary class="small">Answer breakdown</summary>
<ul class="list-unstyled small mt-2">
{% if qs.breakdown %}
{% for ans in qs.breakdown %}
<li>{{ ans.0 }}: {{ ans.1 }} ({{ ans.2 }}%)</li>
{% endfor %}
{% else %}
<li class="text-muted">No responses yet</li>
{% endif %}
</ul>
</details>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}