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

Refactor exam overview to use anchor elements for questions, improving HTML validity and accessibility; enhance styles for better layout and responsiveness.

Browse Source
This commit is contained in:
Ross
2025-11-10 22:01:15 +00:00
parent 200a6e2a1c
commit 94d5771a26
1 changed files with 72 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
physics/templates/physics/exam_take_overview.html
+72 -6
View File
@@ -39,14 +39,26 @@
{% endif %}
<div class="overview-text">{{answer_count}} out of {{exam_length}} questions answered. Unanswered questions are shown in red. <p>Click to go to a question.</p></div>
<div class="physics-finish-list">
<div class="overview-text">{{answer_count}} out of {{exam_length}} questions answered. Unanswered questions are shown in red. <span class="d-block">Click any tile to jump to that question.</span></div>
<div class="physics-finish-list" role="list">
{% for question, answer in question_answer_tuples %}
{% comment %} Use an anchor styled as a button rather than nesting button inside anchor (invalid HTML). Keep link targets unchanged. {% endcomment %}
{% if not cid %}
<a href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"><button {% if not answer %}class="unanswered" title="You have not answered this question"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
<a role="listitem" href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"
class="overview-question-btn btn btn-outline-secondary"
aria-label="Go to question {{ forloop.counter }}"
{% if not answer %}title="You have not answered this question" aria-current="false"{% endif %}>
{{forloop.counter}}{% if answer and answer.answer %}: {{answer.answer}}{% endif %}
</a>
{% else %}
<a href="{% url 'physics:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"><button {% if not answer %}class="unanswered" title="You have not answered this question"{% endif %}>{{forloop.counter}}: {{answer.answer}}</button></a>
<a role="listitem" href="{% url 'physics:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"
class="overview-question-btn btn btn-outline-secondary"
aria-label="Go to question {{ forloop.counter }}"
{% if not answer %}title="You have not answered this question" aria-current="false"{% endif %}>
{{forloop.counter}}{% if answer and answer.answer %}: {{answer.answer}}{% endif %}
</a>
{% endif %}
{% endfor %}
</div>
@@ -58,9 +70,9 @@
{% if not cid_user_exam.completed %}
{% if not cid %}
<button hx-get="{% url 'physics:exam_complete_user' pk=exam.id %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
<button class="btn btn-primary mt-3" hx-get="{% url 'physics:exam_complete_user' pk=exam.id %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
{% else %}
<button hx-get="{% url 'physics:exam_complete' pk=exam.id cid=cid passcode=passcode %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
<button class="btn btn-primary mt-3" hx-get="{% url 'physics:exam_complete' pk=exam.id cid=cid passcode=passcode %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
{% endif %}
{% endif %}
@@ -83,3 +95,57 @@
})
</script>
{% endblock %}
{% block css %}
<style>
/* Overview page specific styles */
.overview-text {
margin-bottom: 1rem;
font-weight: 500;
}
.physics-finish-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: .5rem;
align-items: stretch;
margin-bottom: 1rem;
}
.overview-question-btn {
text-align: left;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: .5rem .75rem;
display: inline-flex;
align-items: center;
justify-content: flex-start;
}
/* Unanswered questions should draw attention */
.overview-question-btn[title] {
border-color: #dc3545 !important;
color: #dc3545 !important;
background: rgba(220,53,69,0.03);
}
#time-details {
font-size: .95rem;
color: #9aa0a6;
margin-top: .5rem;
}
/* Make the finish button stand out on small screens */
.btn-primary.mt-3 {
min-width: 160px;
}
@media (max-width: 575.98px) {
.physics-finish-list {
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
.overview-question-btn { font-size: .95rem }
}
</style>
{% endblock %}