ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor exam overview: enhance question display with improved layout and feedback visibility

Browse Source
This commit is contained in:
Ross
2025-11-17 22:09:49 +00:00
parent feb5a85af2
commit 2dd9f4af32
1 changed files with 83 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/exam_overview.html
+83 -52
View File
@@ -7,70 +7,101 @@
{% block content %} {% block content %}
{% load thumbnail %} {% load thumbnail %}
<div class="physics"> <div class="container physics my-3">
This exam will be available to take <a href="{% url 'physics:exam_start' pk=exam.pk %}">here</a> (when active). <p class="mb-3">This exam will be available to take <a href="{% url 'physics:exam_start' pk=exam.pk %}">here</a> (when active).</p>
{% autoescape off %} <div class="card">
<ol id="full-question-list-physics"> <div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">Questions <small class="text-muted">({{ questions.count }})</small></h5>
<div class="text-muted small">Exam: {{ exam.title }}</div>
</div>
<ul class="list-group list-group-flush" id="full-question-list-physics">
{% for question in questions.all %} {% for question in questions.all %}
<li class="list-group-item">
<div class="d-flex align-items-start">
<div class="me-3">
<span class="badge bg-secondary">{{ forloop.counter }}</span>
</div>
<div class="flex-grow-1">
<div class="fw-bold mb-2">{{ question.stem|safe }}</div>
<li> <div class="mb-2">
{{ question.stem }} <ol type="a" class="mb-0">
<ol type="a" class="abcde"> <li class="d-flex justify-content-between align-items-start py-1">
<li class="question-a"> <div><span class="me-2">a)</span><span>{{ question.a }}</span></div>
<span class="question-text">{{ question.a }}</span>: <span class="question-answer">{{ question.a_answer }}</span> <div class="text-end">
{% if question.a_feedback %} <div class="text-primary fw-semibold">{{ question.a_answer }}</div>
<span class="question-feedback">{{question.a_feedback}}</span> {% if question.a_feedback %}
{% endif %} <div class="text-muted small">Feedback: {{ question.a_feedback }}</div>
</li> {% endif %}
<li class="question-b"> </div>
<span class="question-text">{{ question.b }}</span>: <span class="question-answer">{{ question.b_answer }}</span> </li>
{% if question.b_feedback %} <li class="d-flex justify-content-between align-items-start py-1">
<span class="question-feedback">{{question.b_feedback}}</span> <div><span class="me-2">b)</span><span>{{ question.b }}</span></div>
{% endif %} <div class="text-end">
</li> <div class="text-primary fw-semibold">{{ question.b_answer }}</div>
<li class="question-c"> {% if question.b_feedback %}
<span class="question-text">{{ question.c }}</span>: <span class="question-answer">{{ question.c_answer }}</span> <div class="text-muted small">Feedback: {{ question.b_feedback }}</div>
{% if question.c_feedback %} {% endif %}
<span class="question-feedback">{{question.c_feedback}}</span> </div>
{% endif %} </li>
</li> <li class="d-flex justify-content-between align-items-start py-1">
<li class="question-d"> <div><span class="me-2">c)</span><span>{{ question.c }}</span></div>
<span class="question-text">{{ question.d }}</span>: <span class="question-answer">{{ question.d_answer }}</span> <div class="text-end">
{% if question.d_feedback %} <div class="text-primary fw-semibold">{{ question.c_answer }}</div>
<span class="question-feedback">{{question.d_feedback}}</span> {% if question.c_feedback %}
{% endif %} <div class="text-muted small">Feedback: {{ question.c_feedback }}</div>
</li> {% endif %}
<li class="question-e"> </div>
<span class="question-text">{{ question.e }}</span>: <span class="question-answer">{{ question.e_answer }}</span> </li>
{% if question.e_feedback %} <li class="d-flex justify-content-between align-items-start py-1">
<span class="question-feedback">{{question.e_feedback}}</span> <div><span class="me-2">d)</span><span>{{ question.d }}</span></div>
{% endif %} <div class="text-end">
</li> <div class="text-primary fw-semibold">{{ question.d_answer }}</div>
</ol> {% if question.d_feedback %}
Category: {{ question.category }}, <a href="{% url 'physics:question_detail' pk=question.pk %}">View [id: {{question.pk}}]</a> <a <div class="text-muted small">Feedback: {{ question.d_feedback }}</div>
href="{% url 'admin:physics_question_change' question.id %}">Edit</a> {% endif %}
</div>
</li>
<li class="d-flex justify-content-between align-items-start py-1">
<div><span class="me-2">e)</span><span>{{ question.e }}</span></div>
<div class="text-end">
<div class="text-primary fw-semibold">{{ question.e_answer }}</div>
{% if question.e_feedback %}
<div class="text-muted small">Feedback: {{ question.e_feedback }}</div>
{% endif %}
</div>
</li>
</ol>
</div>
<div class="small text-muted">
Category: {{ question.category }}
— <a href="{% url 'physics:question_detail' pk=question.pk %}">View</a>
<a href="{% url 'admin:physics_question_change' question.id %}" class="ms-2">Edit</a>
</div>
</div>
</div>
</li> </li>
{% empty %}
<li class="list-group-item text-muted">No questions available.</li>
{% endfor %} {% endfor %}
</ol> </ul>
{% endautoescape %} </div>
</div> </div>
{% include 'exam_overview_js.html' %} {% include 'exam_overview_js.html' %}
{% endblock %} {% endblock %}
{% block css %} {% block css %}
<style> <style>
.question-answer { /* Small visual tweaks on top of Bootstrap */
font-weight: bolder; .question-feedback { opacity: 0.7; }
} .list-group-item ol { margin: 0; padding-left: 1.4rem; }
.question-feedback { .list-group-item li { list-style-position: inside; }
opacity: 50%;
float: right
}
.question-feedback::before {
content: "Feedback: ";
}
</style> </style>
{% endblock %} {% endblock %}