{% extends "quiz/components/base.html" %}

{% block style %}
<link 
    rel="stylesheet"
    href="{{ url_for('.static', filename='css/quiz.css') }}"
/>
{% endblock %}

{% block content %}
    <div id="alert-box" tabindex="-1"></div>
    <div class="container quiz-panel" id="quiz-settings" tabindex="-1">
        <h1>Adjust Display Settings</h1>
        <div class="container quiz-start-text">
            You can use this panel to adjust the display settings for the exam. Please use the menu below to select the font face and font size. Below is a sample question so you can see how the exam will render with your chosen settings.
        </div>
        <div class="alert alert-primary quiz-start-text" role="alert">
            <strong>Note</strong>: Some fonts may not be available depending on your device and/or operating system.
        </div>
        <form action="#" name="quiz-configuration">
            <div class="container">
                <div class="row gx-5 gy-5">
                    <div class="col">
                        <h5>
                            Select Font
                        </h5>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="osdefault" name="font-select" value="osdefault" checked>
                            <label for="osdefault" class="form-check-label q-f-osdefault">OS Default</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="arial" name="font-select" value="arial">
                            <label for="arial" class="form-check-label q-f-arial">Arial</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="comicsans" name="font-select" value="comicsans">
                            <label for="comicsans" class="form-check-label q-f-comicsans">Comic Sans</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="opendyslexic" name="font-select" value="opendyslexic">
                            <label for="opendyslexic" class="form-check-label q-f-opendyslexic">OpenDyslexic</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="tahoma" name="font-select" value="tahoma">
                            <label for="tahoma" class="form-check-label q-f-tahoma">Tahoma</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="verdana" name="font-select" value="verdana">
                            <label for="verdana" class="form-check-label q-f-verdana">Verdana</label>
                        </div>
                    </div>
                    <div class="col">
                        <h5>
                            Select Font Size
                        </h5>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="12pt" name="font-size" value="12pt" checked>
                            <label for="12pt" class="form-check-label q-f-12pt">12pt</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="14pt" name="font-size" value="14pt" checked>
                            <label for="14pt" class="form-check-label q-f-14pt">14pt (Default)</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="16pt" name="font-size" value="16pt">
                            <label for="16pt" class="form-check-label q-f-16pt">16pt</label>
                        </div>
                        <div class="form-check">
                            <input type="radio" class="form-check-input" id="18pt" name="font-size" value="18pt">
                            <label for="18pt" class="form-check-label q-f-18pt">18pt</label>
                        </div>
                    </div>
                </div>
                <div class="row gx-5 gy-5 mt-1">
                    <div class="col">
                        <h5>Select Background Colour</h5>
                        <div class="p-3 bg-light text-dark">
                            <div class="form-check">
                                <input type="radio" class="form-check-input" id="bg-light" name="bg-select" value="bg-light" checked>
                                <label for="bg-light" class="form-check-label">Default Light</label>
                            </div>
                        </div>
                        <div class="p-3 q-bg-light-1 text-dark">
                            <div class="form-check">
                                <input type="radio" class="form-check-input" id="q-bg-light-1" name="bg-select" value="q-bg-light-1">
                                <label for="q-bg-light-1" class="form-check-label">Light Shade 1</label>
                            </div>
                        </div>
                        <div class="p-3 q-bg-light-2 text-dark">
                            <div class="form-check">
                                <input type="radio" class="form-check-input" id="q-bg-light-2" name="bg-select" value="q-bg-light-2">
                                <label for="q-bg-light-2" class="form-check-label">Light Shade 2</label>
                            </div>
                        </div>
                        <div class="p-3 alert-primary text-dark">
                            <div class="form-check">
                                <input type="radio" class="form-check-input" id="alert-primary" name="bg-select" value="alert-primary">
                                <label for="alert-primary" class="form-check-label">Blue</label>
                            </div>
                        </div>
                        <div class="p-3 alert-secondary text-dark">
                            <div class="form-check">
                                <input type="radio" class="form-check-input" id="alert-secondary" name="bg-select" value="alert-secondary">
                                <label for="alert-secondary" class="form-check-label">Grey 1</label>
                            </div>
                        </div>
                        <div class="p-3 alert-dark text-dark">
                            <div class="form-check">
                                <input type="radio" class="form-check-input" id="alert-dark" name="bg-select" value="alert-dark">
                                <label for="alert-dark" class="form-check-label">Grey 2</label>
                            </div>
                        </div>
                        <div class="p-3 bg-dark text-light">
                            <div class="form-check">
                                <input type="radio" class="form-check-input" id="bg-dark" name="bg-select" value="bg-dark">
                                <label for="bg-dark" class="form-check-label">Dark</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div class="container question-container quiz-start-text">
            <h4 class="question-title">Sample Question</h4>
            <p class="question-header">
                Korfball is a mixed-sex, controlled-contact, indoor, invasion ball sport. The sport originated in the Netherlands. It is a mixed-sex team sport. Its governing body is the International Korball Federation. There are numerous korfball leagues and associations around the world. A korfball match is officiated by a referee.
            </p>
            <p class="question-text">
                In order to be a referee, what do you need to know?
            </p>
            <div class="options">
                <div class="form-check">
                    <input type="radio" class="form-check-input" id="sample0" name="sample" value="0">
                    <label for="sample0" class="form-check-label">The rules of korfball</label>
                </div>
                <div class="form-check">
                    <input type="radio" class="form-check-input" id="sample1" name="sample" value="1">
                    <label for="sample1" class="form-check-label">The way of the Jedi Order</label>
                </div>
                <div class="form-check">
                    <input type="radio" class="form-check-input" id="sample2" name="sample" value="2">
                    <label for="sample2" class="form-check-label">The <i>Dungeons &amp; Dragons Fifth Edition Monster Manual</i>.</label>
                </div>
                <div class="form-check">
                    <input type="radio" class="form-check-input" id="sample3" name="sample" value="2">
                    <label for="sample3" class="form-check-label">The Trade Union and Labour Relations (Consolidation) Act 1992.</label>
                </div>
                <div class="form-check">
                    <input type="radio" class="form-check-input" id="sample4" name="sample" value="4" checked>
                    <label for="sample4" class="form-check-label">All of the above</i></label>
                </div>
            </div>
        </div>
        <div class="row mt-3">
            <p class="quiz-start-text">
                When you are happy with the settings, click <strong>&lsquo;Start the Exam&rsquo;</strong> below to proceed. You can change these settings at any time using the red gear <a class="btn btn-danger btn-dummy" tabindex="-1" aria-title="Settings" title="Settings"><i class="bi bi-gear-fill"></i></a> button on the exam console.
            </p>
            <div class="control-button-container">
                <a href="#" class="btn btn-success btn-quiz-control" id="btn-start-quiz">Start the Exam</a>
                <a href="#" class="btn btn-success btn-quiz-control btn-quiz-return" style="display: none;">Resume Exam</a>
            </div>
        </div>
    </div>
    <div class="container quiz-panel" style="display: none;" id="quiz-navigator" tabindex="-1">
        <h1 class="navigator-text">
            Question Grid
        </h1>
        <h1 class="review-text" style="display: none;">
            Review Your Answers
        </h1>
        <div class="navigator-text">
            This question grid displays the progress you have on the exam so far. Each question is represented by an icon below, and you can click on each icon to skip to that question.

            The icons below are colour-coded to represent the status of each question.
        </div>
        <div class="review-text" style="display: none;">
            You can use this panel to review your answers before you submit the exam. You will not be able to amend your answers after you submit.

            Each question is represented by an icon below, and you can click on each icon to skip to that question. The icons below are colour-coded to represent the status of each question.
        </div>
        <table class="navigator-help">
            <tr>
                <td>
                    <a class="q-navigator-button btn btn-danger progress-bar-striped btn-dummy" title="Question: Incomplete">Q</a>
                </td>
                <td>
                    A red and striped icon represents a question that you have skipped, and have not otherwise flagged for revision.
                </td>
            </tr>
            <tr>
                <td>
                    <a class="q-navigator-button btn btn-warning btn-dummy" title="Question: Flagged">Q</a>
                </td>
                <td>
                    A yellow icon represents a question that you have flagged for revision.
                </td>
            </tr>
            <tr>
                <td>
                    <a class="q-navigator-button btn btn-success btn-dummy" title="Question: Answered">Q</a>
                </td>
                <td>
                    A green icon represents a question that you have answered, and have not otherwise flagged for revision.
                </td>
            </tr>
            <tr>
                <td>
                    <a class="q-navigator-button btn btn-secondary disabled btn-dummy" title="Question: Unseen">Q</a>
                </td>
                <td>
                    A greyed-out icon represents a question that you have not yet seen.
                </td>
            </tr>
        </table>
        <div id="navigator-container">
        </div>
        <div class="control-button-container navigator-text">
            <a href="#" class="btn btn-success btn-quiz-control btn-quiz-return">Resume Exam</a>
        </div>
        <div class="control-button-container review-text">
            <a href="#" class="btn btn-danger btn-quiz-control btn-quiz-return">Back to Exam</a>
            <a href="#" class="btn btn-success quiz-button-submit">Submit Exam</a>
        </div>
    </div>
    <div class="container quiz-panel quiz-console" style="display: none" id="quiz-render">
        <h1>
            Exam Console
        </h1>
        <div class="container question-container">
            <div class="progress">
                <div id="answered-bar" class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                <div id="flagged-bar" class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                <div id="skipped-bar" class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <div class="counters">
                <div id="answered-count" class="badge rounded-pill bg-success" style="display: none;">Answered: 0</div>
                <div id="flagged-count" class="badge rounded-pill bg-warning"style="display: none;">Flagged: 0</div>
                <div id="skipped-count" class="badge rounded-pill bg-danger progress-bar-striped"style="display: none;">Skipped: 0</div>
            </div>
            <h4 class="question-title" id="quiz-question-title" tabindex="-1">
                Question x.
            </h4>
            <p class="question-header" id="quiz-question-header">
                Question Header
            </p>
            <p class="question-text" id="quiz-question-text">
                Question Text
            </p>
            <div class="options" id="quiz-question-options">
                Options
            </div>
        </div>
        <div class="control-button-container">
            <a href="#" class="btn btn-success q-question-nav" id="q-nav-prev" title="Previous Question"><i class="bi bi-caret-left-square-fill"></i>&nbsp;Back</a>
            <a href="#" class="btn btn-secondary" id="q-nav-flag" title="Question Un-Flagged. Click to flag for revision."><i class="bi bi-flag-fill"></i></a>
            <a href="#" class="btn btn-success q-question-nav" id="q-nav-next" title="Next Question">Next&nbsp;<i class="bi bi-caret-right-square-fill"></i></a>
        </div>
        <div class="control-button-container">
            <a href="#" class="btn btn-primary" id="q-review-answers" title="Submit Answers">Submit Answers</a>
        </div>
    </div>
    <div class="container quiz-panel quiz-timeout" style="display: none;" id="quiz-timeout">
        <h1>
            Time Limit Expired
        </h1>
        <p>
            The time limit set for this exam has expired. You must submit your answers immediately.
        </p>
        <div class="control-button-container">
            <a href="#" class="btn btn-success quiz-button-submit" title="Submit Exam">Submit Exam</a>
        </div>
    </div>
{% endblock %}
{% block script %}
<script
    type="text/javascript"
    src="{{ url_for('.static', filename='js/quiz.js') }}"
></script>
{% endblock %}