Refactor response badges in exam review to use border colors based on correctness percentage for improved visual feedback
This commit is contained in:
@@ -31,51 +31,51 @@
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-1 small text-muted">A</span>
|
||||
{% if ua.a is None %}
|
||||
<span class="badge bg-light text-muted">N/A</span>
|
||||
<span class="badge border border-secondary text-muted bg-white">N/A</span>
|
||||
{% elif ua.a == question.a_answer %}
|
||||
<span class="badge bg-success">{{ ua.a|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-success text-success bg-white">{{ ua.a|yesno:"T,F" }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger">{{ ua.a|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-danger text-danger bg-white">{{ ua.a|yesno:"T,F" }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-1 small text-muted">B</span>
|
||||
{% if ua.b is None %}
|
||||
<span class="badge bg-light text-muted">N/A</span>
|
||||
<span class="badge border border-secondary text-muted bg-white">N/A</span>
|
||||
{% elif ua.b == question.b_answer %}
|
||||
<span class="badge bg-success">{{ ua.b|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-success text-success bg-white">{{ ua.b|yesno:"T,F" }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger">{{ ua.b|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-danger text-danger bg-white">{{ ua.b|yesno:"T,F" }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-1 small text-muted">C</span>
|
||||
{% if ua.c is None %}
|
||||
<span class="badge bg-light text-muted">N/A</span>
|
||||
<span class="badge border border-secondary text-muted bg-white">N/A</span>
|
||||
{% elif ua.c == question.c_answer %}
|
||||
<span class="badge bg-success">{{ ua.c|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-success text-success bg-white">{{ ua.c|yesno:"T,F" }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger">{{ ua.c|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-danger text-danger bg-white">{{ ua.c|yesno:"T,F" }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-1 small text-muted">D</span>
|
||||
{% if ua.d is None %}
|
||||
<span class="badge bg-light text-muted">N/A</span>
|
||||
<span class="badge border border-secondary text-muted bg-white">N/A</span>
|
||||
{% elif ua.d == question.d_answer %}
|
||||
<span class="badge bg-success">{{ ua.d|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-success text-success bg-white">{{ ua.d|yesno:"T,F" }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger">{{ ua.d|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-danger text-danger bg-white">{{ ua.d|yesno:"T,F" }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="me-1 small text-muted">E</span>
|
||||
{% if ua.e is None %}
|
||||
<span class="badge bg-light text-muted">N/A</span>
|
||||
<span class="badge border border-secondary text-muted bg-white">N/A</span>
|
||||
{% elif ua.e == question.e_answer %}
|
||||
<span class="badge bg-success">{{ ua.e|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-success text-success bg-white">{{ ua.e|yesno:"T,F" }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger">{{ ua.e|yesno:"T,F" }}</span>
|
||||
<span class="badge border border-danger text-danger bg-white">{{ ua.e|yesno:"T,F" }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,12 +6,12 @@
|
||||
{% if per_part_stats %}
|
||||
<div class="row mb-3">
|
||||
{% for part in per_part_stats %}
|
||||
{# colour by percent-correct: green >=75, warning >=50, red otherwise #}
|
||||
<div class="col-md-2">
|
||||
<div class="card">
|
||||
<div class="card-body p-2 text-center">
|
||||
<div class="card-body p-2 text-center {% if part.correct_pct >= 75 %}border border-success{% elif part.correct_pct >= 50 %}border border-warning{% elif part.correct_pct > 0 %}border border-danger{% endif %}">
|
||||
<div class="small text-muted">{{ part.part|upper }}</div>
|
||||
<div class="h5 mb-0">{{ part.true_count }} / {{ part.total }}</div>
|
||||
<div class="small text-muted">True: {{ part.pct_true }}%</div>
|
||||
<div class="h5 mb-0">{{ part.correct_count }} / {{ part.total }}</div>
|
||||
<div class="small text-muted">Correct: {{ part.correct_pct }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -42,13 +42,25 @@
|
||||
{% if item.parts %}
|
||||
<div class="d-flex gap-1 align-items-center">
|
||||
{% for part in item.parts %}
|
||||
{% if part.is_correct == True %}
|
||||
<span class="badge bg-success">{{ part.value|yesno:"T,F" }}</span>
|
||||
{% elif part.is_correct == False %}
|
||||
<span class="badge bg-danger">{{ part.value|yesno:"T,F" }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-light text-muted">{{ part.value|default:"-" }}</span>
|
||||
{% endif %}
|
||||
{% with pstats=per_part_stats|get_item:forloop.counter0 %}
|
||||
{% if pstats %}
|
||||
{% if pstats.correct_pct >= 75 %}
|
||||
<span class="badge border border-success text-success bg-white">{{ part.value|yesno:"T,F" }}</span>
|
||||
{% elif pstats.correct_pct >= 50 %}
|
||||
<span class="badge border border-warning text-warning bg-white">{{ part.value|yesno:"T,F" }}</span>
|
||||
{% else %}
|
||||
<span class="badge border border-danger text-danger bg-white">{{ part.value|yesno:"T,F" }}</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% if part.is_correct == True %}
|
||||
<span class="badge border border-success text-success bg-white">{{ part.value|yesno:"T,F" }}</span>
|
||||
{% elif part.is_correct == False %}
|
||||
<span class="badge border border-danger text-danger bg-white">{{ part.value|yesno:"T,F" }}</span>
|
||||
{% else %}
|
||||
<span class="badge border border-secondary text-muted bg-white">{{ part.value|default:"-" }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
|
||||
Reference in New Issue
Block a user