brotherton-erpnext/erpnext/www/lms/templates/includes/quiz.html

{% macro quiz(loop_index, question_id, question, options) %}
<div class="question mt-4" id="question" data-question="{{ question_id }}">
    <h5>{{ loop_index }}{{ question }}</h5>
    <div class="options ml-2">
        <div class="form-check pb-1 hidden">
            <input class="form-check-input" type="radio" name="{{ question_id }}" value="0" checked>
        </div>
        {% for option in options %}
        <div class="form-check pb-1">
            <input class="form-check-input" type="radio" name="{{ question_id }}" id="{{loop_index}}-{{ option }}" value="{{ loop.index|str }}">
            <label class="form-check-label" for="{{loop_index}}-{{ option }}">
                {{ option }}
            </label>
        </div>
        {% endfor %}
    </div>
</div>
{% endmacro %}

<section class="quiz-section">
    <div class='container'>
        <div class="mt-3 row">
            <div class="col-md-8">
                <h2>Quiz: {{ current_content.name }}</h2>
            </div>
        </div>
        <div class="content">
            <hr>
            <form id="quiz" name="{{ current_content.name }}">
                <div id="quiz-body">
                    {% for quiz_item in current_content.quiz %}
                    {{ quiz(loop.index|str +". ", quiz_item.name, quiz_item.question, [ quiz_item.option_1, quiz_item.option_2,
                    quiz_item.option_3, quiz_item.option_4]) }}
                    {% 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">
                                <a class='btn btn-outline-secondary' href="#">Previous</a>
                                {% if next_content != None %}
                                <a class='btn btn-primary' href="/lms/course?program={{ program }}&course={{ course_name }}&content={{ next_content }}">Next</a>
                                {% else %}
                                <a class='btn btn-primary' href="/lms/program?program={{ program }}">Finish Course</a>
                                {% endif %}
                        </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>