penracourses/physics/templates/physics/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}}: 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='physics' 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>


        <div>

            <form method="POST" class="post-form">{% csrf_token %}
                {{ form.non_field_errors }}
                <div class="form-contents">
                    <ol class="physics-answer-list">
                        <li data-ans="a">
                            <div class="fieldWrapper flex-container">
                                {{ form.a.errors }}
                                <label for="{{ form.a.id_for_label }}" class="flex-8 question-text">{{question.a|safe}}</label>
                                <span class="flex-1">{{ form.a }}<span class="postinput"></span></span>

                            </div>
                            {% if exam.publish_results and question.a_feedback %}
                                <span class="feedback">Feedback: {{question.a_feedback}}</span>
                            {% endif %}
                        </li>
                        <li data-ans="b">
                            <div class="fieldWrapper flex-container">
                                {{ form.b.errors }}
                                <label for="{{ form.b.id_for_label }}" class="flex-8 question-text">{{question.b|safe}}</label>
                                <span class="flex-1">{{ form.b }}<span class="postinput"></span></span>
                            </div>
                        </li>
                        <li data-ans="c">
                            <div class="fieldWrapper flex-container">
                                {{ form.c.errors }}
                                <label for="{{ form.c.id_for_label }}" class="flex-8 question-text">{{question.c|safe}}</label>
                                <span class="flex-1">{{ form.c }}<span class="postinput"></span></span>
                            </div>
                        </li>
                        <li data-ans="d">
                            <div class="fieldWrapper flex-container">
                                {{ form.d.errors }}
                                <label for="{{ form.d.id_for_label }}" class="flex-8 question-text">{{question.d|safe}}</label>
                                <span class="flex-1">{{ form.d }}<span class="postinput"></span></span>
                            </div>
                        </li>
                        <li data-ans="e">
                            <div class="fieldWrapper flex-container">
                                {{ form.e.errors }}
                                <label for="{{ form.e.id_for_label }}" class="flex-8 question-text">{{question.e|safe}}</label>
                                <span class="flex-1">{{ form.e }}<span class="postinput"></span></span>
                            </div>
                        </li>
                    </ol>
                </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 %}

                <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>
    {% include "physics/exam_take_help.html" %}

    {% endblock %}

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

                    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);
                    }
                {% elif exam.publish_results %}
                    $(`ol.physics-answer-list input`).each((n, el) => { el.disabled = true; });
                    {{question.get_answers_js}}.forEach((el, n) => {
                        console.log(el)

                        li_el = $(`ol.physics-answer-list li:eq(${n})`)//.addClass(`answer-${el}`)

                        if (el) {
                            li_el.addClass("answer-true");
                        } else {
                            li_el.addClass("answer-false");
                        }
                        if (el == li_el.find("input").get(0).checked) {
                            li_el.addClass("answer-correct");
                        } else {
                            li_el.addClass("answer-incorrect");

                        }

                    });
                {% elif cid_user_exam.completed %}
                    $(`ol.physics-answer-list input`).each((n, el) => { el.disabled = true; });
                //$("ul.physics-answer-list li[data-ans='{{question.best_answer}}']").addClass("correct");
                {% 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();
                });
            /* beautify ignore:end */

            })




        </script>
    {% endblock %}
    {% block css %}
        <style type="text/css">
        /*     .form-contents {
        display: none;
    } */
            .flex-container {
                display: flex;
            }

            .flex-1 {
                flex: 1;
            }

            .flex-8 {
                flex: 8;
            }

            .selected {
                border: 1px solid purple;
            }

            .answer-true::before {
                content: "[Correct answer: True]";
                color: darkgray;
                float: right;
                opacity: 50%;

            }
            .answer-false::before {
                content: "[Correct answer: False]";
                color: darkgray;
                float: right;
                opacity: 50%;

            }
            .answer-correct {
                border: 1px dotted darkgreen;
            }
            .answer-incorrect {
                border: 1px dashed darkred;
            }

            .physics-answer-list li {
                margin-top: 5px;
                margin-bottom: 5px;
            }

            .physics-answer-list input:checked+.postinput::after {
                margin-left: 20px;
                content: "True"
            }
            .physics-answer-list input:not(:checked)+.postinput::after {
                margin-left: 20px;
                content: "False"
            }

            .feedback {
                padding: 20px;
                display: block;
            }

        </style>
    {% endblock %}