From c9c991f898f01a33519b71e1118e2cc551e2d251 Mon Sep 17 00:00:00 2001
From: viveksantayana <me@viveksantayana.co.uk>
Date: Wed, 1 Dec 2021 00:46:41 +0000
Subject: [PATCH] Added text to index and instruction pages.

---
 ref-test/quiz/templates/quiz/index.html       | 18 ++----
 .../quiz/templates/quiz/instructions.html     | 55 +++++++++++++++++++
 2 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 ref-test/quiz/templates/quiz/instructions.html

diff --git a/ref-test/quiz/templates/quiz/index.html b/ref-test/quiz/templates/quiz/index.html
index b268914..8655d16 100644
--- a/ref-test/quiz/templates/quiz/index.html
+++ b/ref-test/quiz/templates/quiz/index.html
@@ -4,21 +4,15 @@
     <h1>SKA Refereeing Theory Exam</h1>
 
     <p>
-        This app will allow you to take the Exam on-line. This app should also allow you to adjust the way the quiz is rendered to suit your access needs. This could include using a screen reader, changing the display font size or typeface, or navigating questions and answers via the keyboard.
+        This app will enable you to take the SKA Refereeing Exam on-line. The app will further allow you to change the display settings &mdash; such as the font size, typeface, and background colour &mdash; to a layout that you may find more suitable.
     </p>
-
     <p>
-        Instructions
+        We designed this app to prioritise accessibility for the exam, and to ensure that it could be presented in a manner that does not put people with any specific needs at a disadvantage.
     </p>
-
     <p>
-        Other Info
+        The presentation of the questions is just a start, and we acknowledge we still have a long way to go. We welcome any feedback on how we can further improve this test.
     </p>
-
-    <p>
-        When you are ready to begin the quiz, click the following button.
-    </p>
-
-    <a href="{{ url_for('quiz_views.start') }}" class="btn btn-success">Take the Quiz</a>
-
+    <div class="button-container">
+        <a href="{{ url_for('quiz_views.instructions') }}" class="btn btn-success">Read the Instructions</a>
+    </div>
 {% endblock %}
\ No newline at end of file
diff --git a/ref-test/quiz/templates/quiz/instructions.html b/ref-test/quiz/templates/quiz/instructions.html
new file mode 100644
index 0000000..999c5c7
--- /dev/null
+++ b/ref-test/quiz/templates/quiz/instructions.html
@@ -0,0 +1,55 @@
+{% extends "quiz/components/base.html" %}
+
+{% block content %}
+    <div class="instruction-container">
+        <h3>Instructions</h3>
+        <ul>
+            <li>
+                The exam comprises 100 multiple-choice questions.
+            </li>
+            <li>
+                For each question, answer what decision you would give as a referee unless the question instructs otherwise.
+            </li>
+            <li>
+                You will be able to customise the display settings of the exam from the settings panel by clicking on the red gear button <a class="btn btn-danger" aria-title="Settings" title="Settings" onclick="return false;"><i class="bi bi-gear-fill"></i></a>.
+            </li>
+            <li>
+                You can view your progress at a glance, as well as navigate to any question in the quiz, using the question grid, accessed via the yellow grid button <a class="btn btn-warning" aria-title="Question Grid" title="Question Grid" onclick="return false;"><i class="bi bi-table"></i></a>.
+            </li>
+            <li>
+                If you are unsure of the answer to a question or would like to revise a question, you can flag the question to review it later on using the flag button button <a class="btn btn-secondary" id="q-nav-flag" title="Flag Button." onclick="return false;"><i class="bi bi-flag-fill"></i></a>.
+            </li>
+        </ul>
+    </div>
+    <div class="instruction-container">
+        <h3>
+            Technical Details
+        </h3>
+        <ul>
+            <li>
+                To ensure compatibility, make sure you use the latest version of Firefox, Chrome, Safari, or other fairly modern browser. Make sure JavaScript is enabled.
+            </li>
+            <li>
+                Once you start the exam, your answers are stored locally on your browser until you submit your final results to the server.
+            </li>
+            <li>
+                Do not close the window, refresh the page, or navigate to a different page as you could risk losing your progress.
+            </li>
+        </ul>
+    </div>
+    
+    <div class="instruction-container">
+        <h4>
+            Results
+        </h4>
+        <p>
+            The results of your exam will be processed immediately and sent to the SKA Refereeing Coordinator. You will also be emailed a copy of your results.
+        </p>
+        <p>
+            When you are ready to begin the quiz, click the following button.
+        </p>
+    </div>
+    <div class="button-container">
+        <a href="{{ url_for('quiz_views.start') }}" class="btn btn-success">Take the Quiz</a>
+    </div>
+{% endblock %}
\ No newline at end of file