penracourses/sbas/templates/sbas/exam_take.html

{% 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.name}}: 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>
        {% 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>
                {% 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 %}
                {% 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>
        </div>
    </div>

    <h4>Questions</h4>
    <div id="menu-list">

    </div>
    <details><summary>Help</summary>
        <p>Each question contains a list of 5 different statements. One of these is the single BEST answer.</p>
<p>Click on the correct statement to select it. Once selected it will be highlighted. </p>
<p>Your answers are saved when navigating between questions (or if the save button is clicked on the final question). An overview of all the questions can be seen by clicking on the overview button (or by clicking <a target="_blank" href="
    {% if cid %}
    {% url 'sbas:exam_scores_cid_user' pk=exam.pk cid=cid passcode=passcode %}
    {% else %}
    {% url 'sbas:exam_scores_user' pk=exam.pk %}
    {% endif %}
    "
    
    >here</a>).</p>
    </details>
{% endblock %}

{% block js %}
    <script>
        $(document).ready(() => {
            /* beautify ignore:start */
            {% if not exam.publish_results %}

                let time_limit = '{{exam.time_limit}}'
                if (time_limit != "None") {
                    let end_time = new Date({{cid_user_exam.start_time|date:"U"}}*1000+parseInt('{{exam.time_limit}}')*1000);

                    initializeClock("clockdiv", end_time);
                }

                $("ul.sba-answer-list li").each((n, el) => {
                    $(el).click((e) => {
                        $("#id_answer").val(el.dataset.ans);
                        $("ul.sba-answer-list li").removeClass("selected");
                        $(el).addClass("selected")
                    })
                })
            {% else %}
                $("ul.sba-answer-list li[data-ans='{{question.best_answer}}']").addClass("correct");
            {% endif %}

            {% if saved_answer %}
                $("ul.sba-answer-list li[data-ans='{{saved_answer}}']").addClass("selected"); {% endif %}

            for (let i = 0; i < {{ exam_length }}; i++) {
                qbutton = $(`<button class="question-menu-item" name="goto-${i}" data-qn="${i}">${i+1}</button>`)

                if (i == {{pos}}) {qbutton.addClass("current-question")}
                $("#menu-list").append(qbutton);

            }
            $("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;
        }
        li:hover::before {
            content: "Click to select";
            float: right
        }

        li:hover.selected::before {
            content: "Chosen answer";
            float: right
        }

    </style>
{% endblock %}