From 4cce4441533b6de18b73359bdd768d6d8fca2300 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Mon, 27 Oct 2025 22:23:52 +0000
Subject: [PATCH] Refactor exam_take.html for improved layout, accessibility,
 and user experience

---
 sbas/templates/sbas/exam_take.html | 150 +++++++++++++++++------------
 1 file changed, 91 insertions(+), 59 deletions(-)

diff --git a/sbas/templates/sbas/exam_take.html b/sbas/templates/sbas/exam_take.html
index bc871298..619b5bbd 100755
--- a/sbas/templates/sbas/exam_take.html
+++ b/sbas/templates/sbas/exam_take.html
@@ -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 %}