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

Refactor exam_take.html for improved layout, accessibility, and user experience

Browse Source
This commit is contained in:
Ross
2025-10-27 22:23:52 +00:00
parent f462002162
commit 4cce444153
1 changed files with 91 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sbas/templates/sbas/exam_take.html
+91 -59
View File
@@ -1,72 +1,104 @@
{% extends 'base.html' %}
{% block content %}
<span id="user-id">
{% if request.user.is_authenticated %}
User: {{request.user}}
{% else %}
CID: {{cid}}
{% endif %}
</span>
{% include "exam_clock.html" %}
<div class="no-select">
<h2>{{exam}}: Question [<span id="question-number">{{pos|add:1}}</span>/<span id="exam-length">{{exam_length}}</span>]</h2>
{% if exam.publish_results %}
<div class="alert alert-primary review-mode-alert" role="alert">
Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">here</a>.
</div>
{% elif cid_user_exam.completed %}
<div class="alert alert-primary review-mode-alert" role="alert">
Exam completed.
</div>
{% endif %}
<div>
<p><span id="question-stem">{{question.stem|safe}}</span></p>
</div>
<ul class="sba-answer-list">
<li data-ans="a">{{question.a_answer|safe}}</li>
<li data-ans="b">{{question.b_answer|safe}}</li>
<li data-ans="c">{{question.c_answer|safe}}</li>
<li data-ans="d">{{question.d_answer|safe}}</li>
<li data-ans="e">{{question.e_answer|safe}}</li>
</ul>
<div>
<form method="POST" class="post-form">{% csrf_token %}
<div class="form-contents">
{{form}}
</div>
{% if previous > -1 %}
<button type="submit" name="previous" class="save btn btn-default" title="Click to save your answer(s) and go to the previous question">Previous</button>
{% endif %}
{% if next %}
<button type="submit" name="next" class="save btn btn-default" title="Click to save your answer(s) and go to the next quesiton">Next</button>
<div class="container py-3">
<div class="d-flex justify-content-between align-items-start mb-2">
<span id="user-id" class="text-muted small">
{% if request.user.is_authenticated %}
User: {{ request.user }}
{% else %}
{% if not exam.publish_results %}
<button type="submit" name="save" class="save btn btn-default" title="Click to save your current answer(s)">Save</button>
{% endif %}
CID: {{ cid }}
{% endif %}
{% if exam.publish_results and question.feedback %}
<h3>Feedback</h3>
<p>{{question.feedback|safe}}</p>
{% endif %}
<br />
<button type="submit" name="finish" class="save btn btn-default" title="Click to go to the overview page (your answers will be saved).">Overview</button>
<button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
</form>
</span>
<h2 class="h5 mt-1">{{ exam }}: Question <small class="text-muted">[<span id="question-number">{{ pos|add:1 }}</span>/<span id="exam-length">{{ exam_length }}</span>]</small></h2>
<div class="">
{% include "exam_clock.html" %}
</div>
</div>
<h4>Questions</h4>
<div id="menu-list">
{% if exam.publish_results %}
<div class="alert alert-primary review-mode-alert" role="alert">
Exam is in review mode. Add question feedback <a href="#" onclick="return window.create_popup_window('{% url 'feedback_create' question_type='sbas' pk=question.pk %}')">here</a>.
</div>
{% elif cid_user_exam.completed %}
<div class="alert alert-primary review-mode-alert" role="alert">Exam completed.</div>
{% endif %}
<div class="row g-3">
<div class="col-12 col-md-8">
<div class="card">
<div class="card-body">
<div id="question-stem" class="mb-3">{{ question.stem|safe }}</div>
<ul class="sba-answer-list list-group">
<li class="list-group-item" data-ans="a">{{ question.a_answer|safe }}</li>
<li class="list-group-item" data-ans="b">{{ question.b_answer|safe }}</li>
<li class="list-group-item" data-ans="c">{{ question.c_answer|safe }}</li>
<li class="list-group-item" data-ans="d">{{ question.d_answer|safe }}</li>
<li class="list-group-item" data-ans="e">{{ question.e_answer|safe }}</li>
</ul>
<form method="POST" class="post-form mt-3">{% csrf_token %}
<div class="form-contents visually-hidden">{{ form }}</div>
<div class="d-flex flex-column flex-sm-row gap-2 mt-2">
<div class="d-flex gap-2 flex-wrap">
{% if previous > -1 %}
<button type="submit" name="previous" class="btn btn-outline-secondary" title="Save and go to previous">Previous</button>
{% endif %}
{% if next %}
<button type="submit" name="next" class="btn btn-primary">Next</button>
{% else %}
{% if not exam.publish_results %}
<button type="submit" name="save" class="btn btn-success">Save</button>
{% endif %}
{% endif %}
</div>
<div class="ms-sm-auto">
{% if exam.publish_results and question.feedback %}
<div class="mt-2 mt-sm-0">
<h6 class="mb-1">Feedback</h6>
<div>{{ question.feedback|safe }}</div>
</div>
{% endif %}
<button type="submit" name="finish" class="btn btn-outline-primary ms-0 ms-sm-2 mt-2 mt-sm-0">Overview</button>
<button type="submit" id="goto-button" value="test" name="goto" class="visually-hidden">goto</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card sticky-top" style="top:1rem;">
<div class="card-body">
<h6 class="card-title">Questions</h6>
<p class="small text-muted mb-2">Tap a number to jump to that question.</p>
<!-- Collapsible for small screens -->
<div class="d-md-none mb-2">
<button class="btn btn-sm btn-outline-secondary w-100" type="button" data-bs-toggle="collapse" data-bs-target="#menu-list" aria-expanded="false" aria-controls="menu-list">
Show questions
</button>
</div>
<div id="menu-list" class="collapse d-md-block">
<div class="d-flex flex-wrap gap-2" id="menu-buttons" role="toolbar" aria-label="Question navigation">
<!-- Buttons injected by JS -->
</div>
</div>
</div>
</div>
{% include "sbas/exam_take_help.html" %}
</div>
</div>
{% include "sbas/exam_take_help.html" %}
</div>
{% endblock %}
{% block js %}