{% 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>
            <li>
                <strong>If you have any technical issues while taking the exam, please report them immediately to <a href="mailto:refereeing@scotlandkorfball.co.uk">refereeing@scotlandkorfball.co.uk</a></strong>.
            </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">
            <i class="bi bi-pencil-fill button-icon"></i>
            Take the Exam
        </a>
    </div>
{% endblock %}