{% macro quiz(loop_index, question) %}
<div class="question mt-4" id="{{ question.question }}" data-question="{{ question.name }}">
    <h5>{{ loop_index }}{{ question.question }}</h5>
    <div class="options ml-2">
        {% for option in question.options %}
        <div class="form-check pb-1">
            <input class="form-check-input" type="radio" name="{{ question.name }}" id="{{loop_index}}-{{ option.option }}" value="{{ option.option }}">
            <label class="form-check-label" for="{{loop_index}}-{{ option.option }}">
                {{ option.option }}
            </label>
        </div>
        {% endfor %}
    </div>
</div>
{% endmacro %}
<section class="quiz-section">
    <div class='container'>
        <div class="row">
            <div class="col-md-8">
                <h2>{{ content.title }}</h2>
            </div>
        </div>
        <div class="content">
            <hr>
            <form id="quiz" name="{{ content.name }}">
                <div id="quiz-body">
                    {% for q in questions %}
                    {{ quiz(loop.index|str +". ", q) }}
                    {% endfor %}
                </div>
                <div class="mt-3">
                    <div id="quiz-actions" class="text-right">
                        <button class='btn btn-outline-secondary' type="reset">Reset</button>
                        <button class='btn btn-primary' type="button" onclick="submitQuiz()">Submit</button>
                    </div>
                    <div id="post-quiz-actions" class="row" hidden="hidden">
                        <div class="col-md-8 text-left">
                            <h3>Your Score: <span id="result"></span></h3>
                        </div>
                        <div class="col-md-4 text-right">
                            {% include "www/lms/templates/includes/lms-nav.html" %}
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="mt-3 text-right">
            <a class="text-muted" href="/report"><i class="octicon octicon-issue-opened" title="Report"></i> Report a
                Mistake</a>
        </div>
    </div>
</section>