.

anatomy/static/css/anatomy.css

@@ -650,5 +650,12 @@ input {
 
 .sba-answer-list {
   list-style-type: lower-alpha;
-  display: flex;
+}
+
+#menu-list button {
+  padding-left: 2px;
+  padding-right: 2px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  margin: 1px;
 }

sbas/templates/sbas/exam_take.html

@@ -5,7 +5,9 @@ CID: {{cid}}
 
 <h2>Question [{{pos|add:1}}/{{exam_length}}]</h2>
 
-<div><p>{{question.stem|safe}}</p></div>
+<div>
+    <p>{{question.stem|safe}}</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>
@@ -14,30 +16,32 @@ CID: {{cid}}
     <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">Previous</button>
+        {% endif %}
+        {% if next %}
+        <button type="submit" name="next" class="save btn btn-default">Next</button>
+        {% else %}
+        <button type="submit" name="save" class="save btn btn-default">Save</button>
+        {% endif %}
+        <br />
+        <button type="submit" name="finish" class="save btn btn-default">Finish</button>
+        <button type="submit" id="goto-button" value="test" name="goto" class="hide">goto</button>
+    </form>
+</div>
+
+<h4>Questions</h4>
 <div id="menu-list">
 
 </div>
- 
-<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">Previous</button>
-{% endif %}
-{% if next %}
-<button type="submit" name="next" class="save btn btn-default">Next</button>
-{% else %}
-<button type="submit" name="save" class="save btn btn-default">Save</button>
-{% endif %}
-<br />
-<button type="submit" name="finish" class="save btn btn-default">Finish</button>
-</form>
-</div>
-
 {% endblock %}
 
 {% block js %}
@@ -52,19 +56,32 @@ CID: {{cid}}
             })
         })
 
+        /* beautify ignore:start */
         {% if saved_answer %}
-            $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected");
-        {% endif %}
+        $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% endif %}
+
+        for (let i = 0; i < {{ exam_length }}; i++) {
+        $("#menu-list").append($(
+            `<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`));
 
-        for (let i = 1; i < {{exam_length}} + 1; i++) {
-            $("#menu-list").append($(`<div class="question-menu-item">${i}</div>`));
         }
+        /* beautify ignore:end */
+        $("button.question-menu-item").on("click", (e) => {
+            console.log(e.currentTarget.dataset.qn);
+            document.getElementById("goto-button").value = e.currentTarget.dataset.qn;
+            $("#goto-button").click();
+        });
     })
 </script>
 {% endblock %}
 {% block css %}
 <style type="text/css">
-    .form-contents { display: none; }
-    .selected { border: 1px solid purple; }
+    .form-contents {
+        display: none;
+    }
+
+    .selected {
+        border: 1px solid purple;
+    }
 </style>
 {% endblock %}

sbas/views.py

@@ -307,6 +307,8 @@ def exam_take(request, pk, sk, cid):
             return redirect("sbas:exam_take", pk=pk, sk=pos - 1, cid=cid)
         elif "finish" in request.POST:
             return redirect("sbas:exam_finish", pk=pk, cid=cid)
+        elif "goto" in request.POST:
+            return redirect("sbas:exam_take", pk=pk, sk=int(request.POST.get("goto")), cid=cid)
     else:
         form = CidUserAnswerForm(instance=answer)
 

static/css/anatomy.css

@@ -650,5 +650,12 @@ input {
 
 .sba-answer-list {
   list-style-type: lower-alpha;
-  display: flex;
+}
+
+#menu-list button {
+  padding-left: 2px;
+  padding-right: 2px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  margin: 1px;
 }