penracourses/physics/templates/physics/exam_take_overview.html

{% extends 'base.html' %}

{% block content %}
    <span id="user-id">
    {% if not cid %}
        User: {{request.user}}
    {% else %}
        CID: {{cid}}
    {% endif %}
    </span>
    {% include "exam_clock.html" %}

    <h2>Exam: {{exam}}</h2>

    {% if exam.publish_results %}
        <div class="alert alert-primary review-mode-alert" role="alert">
            Exam is in review mode. Score are available 
            {% if request.user.is_authenticated %}
                <a href="{% url 'physics:exam_scores_user' pk=exam.id %}">here</a>

            {% else %}
                <a href="{% url 'physics:exam_scores_cid_user' pk=exam.id cid=cid passcode=passcode %}">here</a>
            {% endif %}
        </div>
    {% elif cid_user_exam.completed %}
        <div class="alert alert-primary review-mode-alert" role="alert">
            Exam completed. Answers are available 
            {% if request.user.is_authenticated %}
                <a href="{% url 'physics:exam_scores_user' pk=exam.id %}">here</a>

            {% else %}
                <a href="{% url 'physics:exam_scores_cid_user' pk=exam.id cid=cid passcode=passcode %}">here</a>
            {% endif %}
        </div>
    {% elif answer_count != exam_length %}
        <div id="unanswered-questions-alert" class="alert alert-warning" role="alert">
            You have unanswered questions.
        </div>
    {% endif %}
        

    <div class="overview-text">{{answer_count}} out of {{exam_length}} questions answered. Unanswered questions are shown in red. <span class="d-block">Click any tile to jump to that question.</span></div>

    <div class="physics-finish-list" role="list">
        {% for question, answer in question_answer_tuples %}
            {% comment %} Use an anchor styled as a button rather than nesting button inside anchor (invalid HTML). Keep link targets unchanged. {% endcomment %}
            {% if not cid %}
                <a role="listitem" href="{% url 'physics:exam_take_user' pk=exam.id sk=forloop.counter0 %}"
                   class="overview-question-btn btn btn-outline-secondary"
                   aria-label="Go to question {{ forloop.counter }}"
                   {% if not answer %}title="You have not answered this question" aria-current="false"{% endif %}>
                    {{forloop.counter}}{% if answer and answer.answer %}: {{answer.answer}}{% endif %}
                </a>

            {% else %}
                <a role="listitem" href="{% url 'physics:exam_take' pk=exam.id sk=forloop.counter0 cid=cid passcode=passcode %}"
                   class="overview-question-btn btn btn-outline-secondary"
                   aria-label="Go to question {{ forloop.counter }}"
                   {% if not answer %}title="You have not answered this question" aria-current="false"{% endif %}>
                    {{forloop.counter}}{% if answer and answer.answer %}: {{answer.answer}}{% endif %}
                </a>
            {% endif %}
        {% endfor %}
    </div>
    <div id="time-details">
    Start time: {{cid_user_exam.start_time}}<br/>
    Last change time: {{cid_user_exam.end_time}}<br/>
    Completed: {{cid_user_exam.completed}}
    </div>

    {% if not cid_user_exam.completed %}
        {% if not cid %}
            <button class="btn btn-primary mt-3" hx-get="{% url 'physics:exam_complete_user' pk=exam.id %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
        {% else %}
            <button class="btn btn-primary mt-3" hx-get="{% url 'physics:exam_complete' pk=exam.id cid=cid passcode=passcode %}" hx-swap="outerHTML" hx-confirm="Finish exam?">Finish Exam</button>
        {% endif %}
    {% endif %}

    {% include "physics/exam_take_help.html" %}

{% endblock %}

{% block js %}
    <script>
        $(document).ready(() => {
            {% 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);
                }
            {% endif %}

        })
    </script>
{% endblock %}

{% block css %}
<style>
    /* Overview page specific styles */
    .overview-text {
        margin-bottom: 1rem;
        font-weight: 500;
    }

    .physics-finish-list {
        display: grid;
        /* Limit the maximum width of each tile so buttons don't stretch too wide on large screens.
           Each tile will be between 80px and 140px. The grid will wrap responsively. */
        grid-template-columns: repeat(auto-fit, minmax(80px, 140px));
        justify-content: start;
        gap: .5rem;
        align-items: stretch;
        margin-bottom: 1rem;
    }

    .overview-question-btn {
        /* Fill the grid cell but the cell itself is capped by the grid-template-columns above. */
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: .5rem .75rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    /* Unanswered questions should draw attention */
    .overview-question-btn[title] {
        border-color: #dc3545 !important;
        color: #dc3545 !important;
        background: rgba(220,53,69,0.03);
    }

    #time-details {
        font-size: .95rem;
        color: #9aa0a6;
        margin-top: .5rem;
    }

    /* Make the finish button stand out on small screens */
    .btn-primary.mt-3 {
        min-width: 160px;
    }

    @media (max-width: 575.98px) {
        .physics-finish-list {
            /* On very small screens allow slightly narrower tiles but still wrap */
            grid-template-columns: repeat(auto-fit, minmax(70px, 110px));
        }
        .overview-question-btn { font-size: .95rem }
    }
</style>
{% endblock %}