Restored static and template files

ref-test/app/quiz/static/css/quiz.css

@@ -0,0 +1,158 @@
+/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 23, 2021 */
+
+@font-face {
+    font-family: 'opendyslexic3bold';
+    src: url('../fonts/opendyslexic3-bold-webfont.woff2') format('woff2'),
+         url('../fonts/opendyslexic3-bold-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'opendyslexic3regular';
+    src: url('../fonts/opendyslexic3-regular-webfont.woff2') format('woff2'),
+         url('../fonts/opendyslexic3-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'opendyslexicmonoregular';
+    src: url('../fonts/opendyslexicmono-regular-webfont.woff2') format('woff2'),
+         url('../fonts/opendyslexicmono-regular-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+/* Class Definitions */
+
+.form-quiz-configure {
+    width: 100%;
+    padding: 15px;
+    margin: auto;
+}
+
+.q-f-opendyslexic {
+    font-family: 'opendyslexic3bold';
+}
+
+.q-f-comicsans {
+    font-family: 'Comic Sans MS', 'Comic Sans';
+}
+
+.q-f-osdefault {
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+.q-f-verdana {
+    font-family: Verdana, sans-serif;
+}
+
+.q-f-tahoma {
+    font-family: Tahoma, sans-serif;
+}
+
+.q-f-arial {
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.q-f-12pt {
+    font-size: 12pt;
+}
+
+.q-f-14pt {
+    font-size: 14pt;
+}
+
+.q-f-16pt {
+    font-size: 16pt;
+}
+
+.q-f-18pt {
+    font-size: 18pt;
+}
+
+.q-settings-element {
+    margin-bottom: 2rem;
+}
+
+.q-bg-light-1 {
+    background-color: beige;
+}
+
+.q-bg-light-2 {
+    background-color: #EBE3E1;
+}
+
+#sample-question {
+    margin: 2rem auto;
+    padding: 2rem;
+}
+
+.question-container {
+    margin: 2rem auto;
+    padding: 2 rem;
+}
+
+.question-title {
+    margin: 2rem 0;
+}
+
+.question-header {
+    margin: 1rem auto 3rem;
+    width: 90%;
+}
+
+.btn-quiz-control {
+    width: fit-content;
+}
+
+#q-topbar a.btn {
+    padding: 2px 6px 0px 6px;
+    font-size: 14pt;
+    height: fit-content;
+    width: fit-content;
+    margin: 0px 4px;
+}
+
+.q-timer {
+    padding-top: 0px;
+    margin: 0px auto;
+    font-size: 16pt;
+}
+
+.q-navigator-button {
+    margin: 5px;
+}
+
+.control-button-container {
+    width: fit-content;
+    margin: 2rem auto;
+}
+
+.control-button-container a {
+    width: fit-content;
+    margin: 0 5px;
+}
+
+.navigator-help {
+    margin: 4rem auto;
+}
+
+#navigator-container {
+    margin-bottom: 2rem;
+}
+
+/* Layout for Mobile Devices */
+@media only screen and (max-width: 576px) {
+    body {
+      padding-top: 140px;
+    }
+
+    .navbar .container {
+        justify-content: space-evenly;
+    }
+}

ref-test/app/quiz/static/css/style.css

@@ -0,0 +1,218 @@
+body {
+    padding: 80px 0;
+    line-height: 1.5;
+    font-size: 14pt;
+}
+
+#cookie-alert {
+    padding-right: 16px;
+}
+
+#dismiss-cookie-alert {
+    margin-top: 16px;
+    width: fit-content;
+}
+
+.button-container {
+    margin: 2rem auto;
+    width: fit-content;
+}
+
+.instruction-container {
+    margin: 2rem auto;
+}
+
+.site-footer {
+    background-color: lightgray;
+    font-size: small;
+}
+
+.site-footer p {
+    margin: 0;
+}
+
+.quiz-container {
+    max-width: 720px;
+}
+
+.form-container {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    padding-top: 40px;
+    padding-bottom: 40px;
+}
+
+.form-quiz-start {
+    width: 100%;
+    max-width: 420px;
+    padding: 15px;
+    margin: auto;
+}
+
+.form-heading {
+    margin-bottom: 2rem;
+}
+
+.form-label-group {
+    position: relative;
+    margin-bottom: 2rem;
+}
+
+.form-label-group input,
+.form-label-group label {
+    padding: var(--input-padding-y) var(--input-padding-x);
+    font-size: 16pt;
+}
+
+.form-label-group label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    margin-bottom: 0; /* Override default `<label>` margin */
+    line-height: 1.5;
+    color: #495057;
+    cursor: text; /* Match the input under the label */
+    border: 1px solid transparent;
+    border-radius: .25rem;
+    transition: all .1s ease-in-out;
+    z-index: -1;
+}
+
+.form-label-group input {
+    background-color: transparent;
+    border: none;
+    border-radius: 0%;
+    border-bottom: 2px solid #585858;
+}
+
+.form-label-group input:active, .form-label-group input:focus {
+    background-color: transparent;
+}
+
+.form-label-group input::-webkit-input-placeholder {
+    color: transparent;
+}
+  
+.form-label-group input:-ms-input-placeholder {
+    color: transparent;
+}
+  
+.form-label-group input::-ms-input-placeholder {
+    color: transparent;
+}
+  
+.form-label-group input::-moz-placeholder {
+    color: transparent;
+}
+  
+.form-label-group input::placeholder {
+    color: transparent;
+}
+  
+.form-label-group input:not(:placeholder-shown) {
+    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
+    padding-bottom: calc(var(--input-padding-y) / 3);
+}
+  
+.form-label-group input:not(:placeholder-shown) ~ label {
+    padding-top: calc(var(--input-padding-y) / 3);
+    padding-bottom: calc(var(--input-padding-y) / 3);
+    font-size: 12px;
+    color: #777;
+}
+
+.form-check-margin {
+    margin-bottom: 2rem;
+}
+
+.checkbox input {
+    transform: scale(1.5);
+    margin-right: 1rem;
+}
+
+.signin-forgot-password {
+    font-size: 14pt;
+}
+
+.form-submission-button {
+    margin-bottom: 2rem;
+}
+
+.form-submission-button button, .form-submission-button a {
+    margin: 1rem;
+    vertical-align: middle;
+}
+
+.form-submission-button button span, .form-submission-button button svg, .form-submission-button a span, .form-submission-button a svg {
+    margin: 0 2px;
+}
+
+.results-name {
+    margin: 3rem auto;
+}
+
+.results-name .surname {
+    font-variant: small-caps;
+    font-size: 24pt;
+}
+
+.results-score {
+    margin: 2rem auto;
+    width: fit-content;
+    font-size: 36pt;
+}
+
+.results-score::after {
+    content: '%';
+}
+
+.results-grade {
+    margin: 2rem auto;
+    width: fit-content;
+    font-size: 26pt;
+}
+
+.button-icon {
+    font-size: 20px;
+    margin-right: 2px;
+}
+
+/* Change Autocomplete styles in Chrome*/
+input:-webkit-autofill,
+input:-webkit-autofill:hover, 
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+/* Fallback for Edge
+-------------------------------------------------- */
+@supports (-ms-ime-align: auto) {
+    .form-label-group label {
+      display: none;
+    }
+    .form-label-group input::-ms-input-placeholder {
+      color: #777;
+    }
+}
+  
+  /* Fallback for IE
+  -------------------------------------------------- */
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .form-label-group label {
+        display: none;
+    }
+    .form-label-group input:-ms-input-placeholder {
+        color: #777;
+    }
+}
+  

ref-test/app/quiz/static/js/quiz.js

@@ -0,0 +1,650 @@
+// Bind Listeners
+
+$("input[name='font-select']").change(function(){
+    let $choice = $(this).val();
+    set_font($choice);
+});
+
+$("input[name='font-size']").change(function(){
+    let $choice = $(this).val();
+    set_font_size($choice);
+});
+
+$("input[name='bg-select']").change(function(){
+    let $choice = $(this).val();
+    set_bg_colour($choice);
+});
+
+$(".bg-select-area").click(function(event){
+    $(this).find("input[name='bg-select']").prop("checked", true).change();
+});
+
+$("#btn-toggle-navigator").click(function(event){
+    check_answered();
+    update_navigator();
+    if ($quiz_navigator.is(":hidden")) {
+        if ($quiz_settings.is(":visible")) {
+            toggle_settings = true;
+            $quiz_settings.fadeOut();
+        }
+        $quiz_render.fadeOut();
+        $quiz_navigator.fadeIn();
+        $(".navigator-text").fadeIn();
+        $(".review-text").fadeOut();
+        toggle_navigator = false;
+        $(window).scrollTop(0);
+    } else {
+        $quiz_navigator.fadeOut();
+        if (toggle_settings) {
+            $quiz_settings.fadeIn();
+            $(window).scrollTop(0);
+            toggle_settings = false;
+        } else {
+            $quiz_render.fadeIn();
+            $(window).scrollTop(0);
+        }
+    }
+    event.preventDefault();
+});
+
+$("#btn-toggle-settings").click(function(event){
+    if (($quiz_settings).is(":hidden")) {
+        if ($quiz_navigator.is(":visible")) {
+            toggle_navigator = true;
+            $quiz_navigator.fadeOut();
+        }
+        $quiz_render.fadeOut();
+        $quiz_settings.fadeIn();
+        $(window).scrollTop(0);
+        toggle_settings = false;
+    } else {
+        $quiz_settings.fadeOut();
+        if (toggle_navigator) {
+            $quiz_navigator.fadeIn();
+            toggle_navigator = false;
+            $(window).scrollTop(0);
+        } else {
+            $quiz_render.fadeIn();
+            $(window).scrollTop(0);
+        }
+    }
+    event.preventDefault();
+});
+
+$(".btn-quiz-return").click(function(event){
+    $quiz_navigator.fadeOut();
+    $quiz_settings.fadeOut();
+    $quiz_render.fadeIn();
+    $(window).scrollTop(0);
+    toggle_settings = false;
+    toggle_navigator = false;
+    event.preventDefault();
+});
+
+$(".btn-dummy").click(function(event){
+    event.preventDefault();
+});
+
+$("#navigator-container").on("click", ".q-navigator-button", function(event){
+    check_answered();
+    update_navigator();
+    current_question = parseInt($(this).prop("name"));
+    $quiz_navigator.fadeOut();
+    $quiz_render.fadeIn();
+    $question_title.focus();
+    $(window).scrollTop(0);
+    toggle_navigator = false;
+    toggle_settings = false;
+    render_question();
+    check_flag();
+    event.preventDefault();
+});
+
+$(".q-question-nav").click(function(event){
+    check_answered();
+    update_navigator();
+    if ($(this).prop("id") == "q-nav-next") {
+        if (current_question < questions.length) {
+            current_question ++;
+        }
+    } else if ($(this).prop("id") == "q-nav-prev") {
+        if (current_question > 0) {
+            current_question --;
+        }
+    } else if ($(this).hasClass("q-navigator-button")) {
+        current_question = $(this).prop("name");
+        $quiz_render.fadeIn();
+        $quiz_navigator.fadeOut();
+        toggle_navigator = false;
+        toggle_settings = false;
+    }
+    render_question();
+    check_flag();
+    event.preventDefault();
+});
+
+$("#q-nav-flag").click(function(event){
+    if (question_status[current_question] != 1) {
+        question_status[current_question] = 1;
+        $(this).removeClass().addClass("btn btn-warning");
+        $(this).prop("title", "Question Flagged for revision. Click to un-flag.");
+    } else {
+        question_status[current_question] = 0;
+        $(this).removeClass().addClass("btn btn-secondary");
+        $(this).prop("title", "Question Un-Flagged. Click to flag for revision.");
+    }
+    window.localStorage.setItem('question_status', JSON.stringify(question_status));
+    update_navigator();
+    event.preventDefault();
+});
+
+$("#btn-start-quiz").click(function(event){
+
+    $.ajax({
+        url: `/api/questions/`,
+        type: 'POST',
+        data: JSON.stringify({'_id': _id}),
+        contentType: "application/json",
+        success: function(response) {
+            $(this).fadeOut();
+            $(".btn-quiz-return").fadeIn();
+            $(".quiz-console").fadeIn();
+            $("#quiz-settings").fadeOut();
+            $("#quiz-navigator").fadeOut();
+            $(".quiz-start-text").fadeOut();
+            time_limit = response.time_limit;
+            start_time = response.start_time;
+            questions = response.questions;
+            total_questions = questions.length;
+            window.localStorage.setItem('questions', JSON.stringify(questions));
+            window.localStorage.setItem('start_time', JSON.stringify(start_time));
+            window.localStorage.setItem('time_limit', JSON.stringify(time_limit));
+            render_question();
+            build_navigator();
+            check_flag();
+            if (time_limit != 'null' && time_limit != null) {
+                $("#q-timer-widget").fadeIn();
+                time_remaining = get_time_remaining();
+                clock = setInterval(timer, 1000);
+            }
+            if (response.time_adjustment > 0) {
+                const $alert = $("#alert-box");
+                $alert.html(
+                    `<div class="alert alert-primary alert-dismissible fade show" role="alert">
+                    <i class="bi bi-exclamation-triangle-fill" title="Alert"></i>
+                    User code validated. Extra time of ${response.time_adjustment} minutes added to the exam time limit.
+                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                </div>
+                `
+                );
+                $alert.focus();
+            }
+        },
+        error: function(response) {
+            error_response(response);
+        }
+    });
+
+    event.preventDefault();
+});
+
+$("#quiz-question-options").on("change", ".quiz-option", function(event){
+    $name = parseInt($(this).prop("name"));
+    $value = $(this).prop("value");
+    answers[$name] = $value;
+    window.localStorage.setItem('answers', JSON.stringify(answers));
+});
+
+$("#q-review-answers").click(function(event){
+    check_answered();
+    update_navigator();
+    if ($quiz_navigator.is(":hidden")) {
+        if ($quiz_settings.is(":visible")) {
+            toggle_settings = true;
+            $quiz_settings.fadeOut();
+        }
+        $quiz_render.fadeOut();
+        $quiz_navigator.fadeIn();
+        $(".navigator-text").fadeOut();
+        $(".review-text").fadeIn();
+        toggle_navigator = false;
+        $(window).scrollTop(0);
+    } else {
+        $quiz_navigator.fadeOut();
+        if (toggle_settings) {
+            $quiz_settings.fadeIn();
+            toggle_settings = false;
+        } else {
+            $quiz_render.fadeIn();
+        }
+    }
+    event.preventDefault();
+});
+
+$(".quiz-button-submit").click(function(event){
+    let submission = {
+        '_id': _id,
+        'answers': answers
+    }
+
+    $.ajax({
+        url: `/api/submit/`,
+        type: 'POST',
+        data: JSON.stringify(submission),
+        contentType: "application/json",
+        success: function(response) {
+            window.localStorage.clear();
+            window.location.href = `/result/`;
+        },
+        error: function(response) {
+            error_response(response);
+        }
+    });
+
+    event.preventDefault();
+});
+
+// Functions
+
+function set_font(value = 'osdefault') {
+    let font_styles = ['arial', 'comicsans', 'opendyslexic', 'tahoma', 'verdana']
+
+    for (let i = 0; i < font_styles.length; i ++) {
+        if (font_styles[i] != value) {
+            $("body").removeClass( `q-f-${font_styles[i]}` );
+        };
+    };
+
+    if (value != 'osdefault') {
+        $("body").addClass(`q-f-${value}`);
+    };
+    
+    display_settings['font-select'] = value;
+    window.localStorage.setItem('display_settings', JSON.stringify(display_settings));
+    $('input[name="font-select"][value="' + value + '"]').prop('checked', true);
+}
+
+function set_font_size(value = '14pt') {
+    let font_sizes = ['12pt', '16pt', '18pt']
+
+    for (let i = 0; i < font_sizes.length; i ++) {
+        if (font_sizes[i] != value) {
+            $("body").removeClass( `q-f-${font_sizes[i]}` );
+        };
+    };
+
+    if (value != '14pt') {
+        $("body").addClass(`q-f-${value}`);
+    };
+
+    display_settings['font-size'] = value;
+    window.localStorage.setItem('display_settings', JSON.stringify(display_settings));
+    $('input[name="font-size"][value="' + value + '"]').prop('checked', true);
+}
+
+function set_bg_colour(value = 'bg-light') {
+    let backgrounds = ['bg-light', 'q-bg-light-1', 'q-bg-light-2', 'alert-primary', 'alert-secondary', 'alert-dark', 'bg-dark']
+
+    for (let i = 0; i < backgrounds.length; i ++) {
+        if (backgrounds[i] != value) {
+            $("body").removeClass(backgrounds[i]);
+            if (backgrounds[i] == 'bg-dark') {
+                $("body").removeClass('text-light');
+            };
+            if (backgrounds[i] == 'alert-primary' || backgrounds[i] == 'alert-secondary' || backgrounds[i] == 'alert-dark') {
+                $("body").removeClass('text-dark');
+            };
+        };
+    };
+
+    $("body").addClass(value);
+    if (value == 'bg-dark') {
+        $("body").addClass('text-light');
+    };
+    if (value == 'alert-primary' || value == 'alert-secondary' || value == 'alert-dark') {
+        $("body").addClass('text-dark');
+    };
+
+    display_settings['bg-select'] = value;
+    window.localStorage.setItem('display_settings', JSON.stringify(display_settings));
+    $('input[name="bg-select"][value="' + value + '"]').prop('checked', true);
+}
+
+function get_settings_from_storage() {
+    let display_settings = window.localStorage.getItem('display_settings')
+    if (display_settings != null) {
+        return JSON.parse(display_settings);
+    };
+    return {
+        'font-select': 'osdefault',
+        'font-size': '14pt',
+        'bg-select': 'bg-light'
+    }
+}
+
+function apply_settings(settings) {
+    set_font(settings['font-select']);
+    set_font_size(settings['font-size']);
+    set_bg_colour(settings['bg-select']);
+}
+
+function render_question() {
+    if (current_question == 0) {
+        $nav_prev.addClass('disabled');
+    }
+    if (current_question == questions.length - 1) {
+        $nav_next.addClass('disabled');
+    }
+    if ($nav_prev.hasClass('disabled') && current_question > 0) {
+        $nav_prev.removeClass('disabled');
+    }
+    if ($nav_next.hasClass('disabled') && current_question < questions.length - 1) {
+        $nav_next.removeClass('disabled');
+    }
+    var question = questions[current_question];
+    let header_text = question.question_header;
+    var block_length = 0;
+    if ('block_length' in question) {
+        block_length = question['block_length'];
+    };
+    var block_q_no = 0;
+    if ('block_q_no' in question) {
+        block_q_no = question['block_q_no'];
+    }
+    let remaining_qs = (block_length - block_q_no).toString();
+    if (block_length - block_q_no > 1) {
+        remaining_qs += ' questions';
+    } else {
+        remaining_qs += ' question';
+    }
+    header_text = header_text.replace('<block_remaining_questions>', remaining_qs);
+    $question_header.html(header_text);
+    $question_text.html(question.text);
+    $question_title.html(`Question ${current_question + 1} of ${ questions.length }.`);
+
+    var q_no = question['q_no'];
+    var options = question.options;
+    var options_output = '';
+    for (let i = 0; i < options.length; i ++) {
+        var add_checked = ''
+        if (q_no in answers) {
+            if (answers[q_no] == options[i][0]) {
+                add_checked = 'checked';
+            }
+        }
+        options_output += `<div class="form-check">
+            <input type="radio" class="form-check-input quiz-option" id="q${current_question}-${i}" name="${q_no}" value="${options[i][0]}" ${add_checked}>
+            <label for="q${current_question}-${i}" class="form-check-label">${options[i][1]}</label>
+        </div>`;
+    }
+    $question_options.html(options_output);
+    let skipped = count_questions(-1);
+    let answered = count_questions(2);
+    let flagged = count_questions(1);
+
+    $progress_skipped.prop('title', `Skipped: ${skipped}`);
+    $progress_skipped.prop('aria-valuenow', skipped);
+    $progress_skipped.css('width', `${skipped}%`);
+    $skipped_count.text(`Skipped: ${skipped}`);
+    if (skipped < 1) {
+        $skipped_count.fadeOut()
+    } else {
+        $skipped_count.fadeIn()
+    }
+
+    $progress_flagged.prop('title', `Flagged: ${flagged}`);
+    $progress_flagged.prop('aria-valuenow', flagged);
+    $progress_flagged.css('width', `${flagged}%`);
+    $flagged_count.text(`Flagged: ${flagged}`);
+    if (flagged < 1) {
+        $flagged_count.fadeOut()
+    } else {
+        $flagged_count.fadeIn()
+    }
+
+    $progress_answered.prop('title', `Answered: ${answered}`);
+    $progress_answered.prop('aria-valuenow', answered);
+    $progress_answered.css('width', `${answered}%`);
+    $answered_count.text(`Answered: ${answered}`);
+    if (answered < 1) {
+        $answered_count.fadeOut()
+    } else {
+        $answered_count.fadeIn()
+    }
+
+    $question_title.focus();
+    $(window).scrollTop(0);
+}
+
+function check_answered() {
+    var question = questions[current_question];
+    var name = question.q_no;
+    if (question_status[current_question] == 0 || question_status[current_question] == -1) {
+        if (!$(`input[name='${name}']:checked`).val()) {
+            question_status[current_question] = -1;
+        } else {
+            question_status[current_question] = 2;
+        }
+        window.localStorage.setItem('question_status', JSON.stringify(question_status));
+    }
+}
+
+function check_flag() {
+    if (!(current_question in question_status)) {
+        question_status[current_question] = 0;
+        window.localStorage.setItem('question_status', JSON.stringify(question_status));
+    }
+    switch (question_status[current_question]) {
+        case -1:
+            $nav_flag.removeClass().addClass('btn btn-danger progress-bar-striped');
+            $nav_flag.prop("title", "Question Incomplete. Click to flag for revision.");
+            break;
+        case 1:
+            $nav_flag.removeClass().addClass('btn btn-warning');
+            $nav_flag.prop("title", "Question Flagged for revision. Click to un-flag.");
+            break;
+        case 2:
+            $nav_flag.removeClass().addClass('btn btn-success');
+            $nav_flag.prop("title", "Question Answered. Click to flag for revision.");
+            break;
+        default:
+            $nav_flag.removeClass().addClass('btn btn-secondary');
+            $nav_flag.prop("title", "Question Un-Flagged. Click to flag for revision.");
+    }
+}
+
+function build_navigator() {
+    $nav_container.html('')
+    var output = ''
+    for (let i = 0; i < questions.length; i ++) {
+        let add_class, add_href, add_status = '';
+        switch (question_status[i]) {
+            case -1:
+                add_class = 'btn-danger progress-bar-striped';
+                add_href = 'href="#"';
+                add_status = 'Incomplete';
+                break;
+            case 1:
+                add_class = 'btn-warning';
+                add_href = 'href="#"';
+                add_status = 'Flagged';
+                break;
+            case 2:
+                add_class = 'btn-success';
+                add_href = 'href="#"';
+                add_status = 'Answered';
+                break;
+            default:
+                add_class = 'btn-secondary disabled';
+                add_href = '';
+                add_status = 'Unseen';
+        }
+        output += `<a ${add_href} class="q-navigator-button btn ${add_class}" name=${i} title="Question ${i+1}: ${add_status}">Q${i + 1}</a>`;
+    }
+    $nav_container.html(output);
+}
+
+function update_navigator() {
+    let button = $(`.q-navigator-button[name=${current_question}]`)
+    if (current_question in question_status) {
+        switch (question_status[current_question]) {
+            case -1:
+                button.removeClass().addClass("q-navigator-button btn btn-danger progress-bar-striped");
+                button.prop("title", `Question ${current_question + 1}: Incomplete`);
+                break;
+            case 1:
+                button.removeClass().addClass("q-navigator-button btn btn-warning");
+                button.prop("title", `Question ${current_question + 1}: Flagged`);
+                break;
+            case 2:
+                button.removeClass().addClass("q-navigator-button btn btn-success");
+                button.prop("title", `Question ${current_question + 1}: Answered`);
+                break;
+            default:
+                button.removeClass().addClass("q-navigator-button btn btn-secondary disabled");
+                button.prop("title", `Question ${current_question + 1}: Unseen`);
+        }
+    }
+}
+
+function start() {
+    $("#btn-start-quiz").fadeOut();
+    $(".btn-quiz-return").fadeIn();
+    $(".quiz-console").fadeIn();
+    $("#quiz-settings").fadeOut();
+    $("#quiz-navigator").fadeOut();
+    $(".quiz-start-text").fadeOut();
+
+    questions = JSON.parse(window.localStorage.getItem('questions'));
+    total_questions = questions.length;
+    start_time = window.localStorage.getItem('start_time');
+    time_limit = window.localStorage.getItem('time_limit');
+
+    let get_answers = window.localStorage.getItem('answers');
+    if (get_answers != null) {
+        answers = JSON.parse(get_answers);
+    }
+
+    let get_status = window.localStorage.getItem('question_status');
+    if (get_status != null) {
+        question_status = JSON.parse(get_status);
+    }
+
+    render_question();
+    build_navigator();
+    check_flag();
+    if (time_limit != 'null' && time_limit != null) {
+        $("#q-timer-widget").fadeIn();
+        time_remaining = get_time_remaining();
+        clock = setInterval(timer, 1000);
+    }
+}
+
+function check_started() {
+    let questions = window.localStorage.getItem('questions');
+    let time_limit = window.localStorage.getItem('time_limit');
+    let start_time = window.localStorage.getItem('start_time')
+    if (questions != null && start_time != null && time_limit != null) {
+        start();
+    }
+}
+
+function get_time_remaining() {
+    var end_time = new Date(time_limit).getTime();
+    var _start_time = new Date().getTime();
+    return end_time - _start_time;
+}
+
+function timer() {
+    var hours = Math.floor((time_remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    var minutes = Math.floor((time_remaining % (1000 * 60 * 60)) / (1000 * 60));
+    var seconds = Math.floor((time_remaining % (1000 * 60)) / 1000);
+
+    if (time_remaining > 0) {
+        var timer_display = '';
+        if (hours > 0) {
+            timer_display = `${hours.toString()}:`;
+        }
+        if (minutes > 0 || hours > 0) {
+            if (minutes < 10) {
+                timer_display += `0${minutes.toString()}:`;
+            } else {
+                timer_display += `${minutes.toString()}:`;
+            }
+        }
+        if (seconds < 10) {
+            timer_display += `0${seconds.toString()}`;
+        } else {
+            timer_display += seconds.toString();
+        }
+        $timer.html(timer_display);
+        time_remaining -= 1000
+    } else {
+        $timer.html('Expired');
+        clearInterval(clock);
+        stop()
+    }
+}
+
+function stop() {
+    $quiz_render.fadeOut();
+    $quiz_navigator.fadeOut();
+    $quiz_timeout.fadeIn();
+    $("#btn-toggle-navigator").addClass('disabled');
+    $("#btn-toggle-settings").addClass('disabled')
+}
+
+function count_questions(status) {
+    output = 0;
+    for (let i = 0; i < Object.keys(question_status).length; i++) {
+        key = Object.keys(question_status)[i];
+        if (question_status[key] == status){
+            output ++;
+        }
+    }
+    return output;
+}
+
+// Variable Definitions
+
+const _id = window.localStorage.getItem('_id');
+
+var current_question = 0;
+var total_questions = 0;
+var question_status = {};
+var answers = {};
+var questions = [];
+var time_limit, start_time, time_remaining;
+
+var display_settings = get_settings_from_storage();
+
+const $quiz_settings = $("#quiz-settings");
+const $quiz_navigator = $("#quiz-navigator");
+const $quiz_render = $("#quiz-render");
+const $quiz_timeout = $("#quiz-timeout");
+const $nav_flag = $("#q-nav-flag");
+const $nav_next = $("#q-nav-next");
+const $nav_prev = $("#q-nav-prev");
+const $nav_container = $("#navigator-container");
+const $timer = $("#q-timer-display");
+var clock
+
+var toggle_settings = false;
+var toggle_navigator = false;
+
+const $question_title = $("#quiz-question-title");
+const $question_header = $("#quiz-question-header");
+const $question_text = $("#quiz-question-text");
+const $question_options = $("#quiz-question-options");
+
+const $progress_skipped = $("#skipped-bar");
+const $progress_answered = $("#answered-bar");
+const $progress_flagged = $("#flagged-bar");
+const $skipped_count = $("#skipped-count");
+const $answered_count = $("#answered-count");
+const $flagged_count = $("#flagged-count");
+
+// Execution on Load
+
+apply_settings(display_settings);
+check_started();

ref-test/app/quiz/static/js/script.js

@@ -0,0 +1,86 @@
+$(document).ready(function() {
+    $("#od-font-test").click(function(){
+        $("body").css("font-family", "opendyslexic3regular")
+    });
+
+    $('.test-code-input').keyup(function() {
+        var input = $(this).val().split("-").join("").split("—").join("");
+        if (input.length > 0) {
+          input = input.match(new RegExp('.{1,4}', 'g')).join("—");
+        }
+        $(this).val(input);
+    });
+});
+
+$('form[name=form-quiz-start]').submit(function(event) {
+    
+    var $form = $(this);
+    var data = $form.serialize();
+
+    $.ajax({
+        url: window.location.pathname,
+        type: 'POST',
+        data: data,
+        dataType: 'json',
+        success: function(response) {
+            var _id = response._id
+            window.localStorage.setItem('_id', _id);
+            window.location.href = `/test/`;
+        },
+        error: function(response) {
+            error_response(response);
+        }
+    });
+
+    event.preventDefault();
+});
+
+function error_response(response) {
+
+    const $alert = $("#alert-box");
+    $alert.html('');
+
+    if (typeof response.responseJSON.error === 'string' || response.responseJSON.error instanceof String) {
+        $alert.html(`
+        <div class="alert alert-danger alert-dismissible fade show" role="alert">
+            <i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
+            ${response.responseJSON.error}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+        `);
+    } else if (response.responseJSON.error instanceof Array) {
+        var output = ''
+        for (var i = 0; i < response.responseJSON.error.length; i ++) {
+            output += `
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                <i class="bi bi-exclamation-triangle-fill" title="Danger"></i>
+                ${response.responseJSON.error[i]}
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+            `;
+            $alert.html(output);
+        }
+    }
+}
+
+// Dismiss Cookie Alert
+$('#dismiss-cookie-alert').click(function(event){
+
+    $.ajax({
+        url: '/cookies/',
+        type: 'GET',
+        data: {
+            time: Date.now()
+        },
+        dataType: 'json',
+        success: function(response){
+            console.log(response);
+        },
+        error: function(response){
+            console.log(response);
+        }
+    })
+
+    event.preventDefault();
+
+})