{% extends "base.html" %}
{% load bootstrap4 %}
{% load widget_tweaks %}

{% block title %}Questions{% endblock title %}

{% block head %}
<style>
    .formset-row li {
        list-style-type: none;
        padding-left: 0;
    }

</style>
{% endblock head %}

{% block content %}
<br><br>
<section class="page-section" id="services">
    <div class="container">
        {% if questions %}
        <h2>Quiz</h2>
        <br>
        <form method="post" action="{% url post_target %}{%if cid%}{{cid}}/{%endif%}" id="questions-test-form" class="form" enctype="multipart/form-data">
            {% csrf_token %}
            {{ questions.management_form }}
            {% for question_form in questions %}
            <div class="formset">
                <h4>
                <div class="row">
                    <div class="col-md-1">
                        {{ question_form.id }}
                        {{ question_form.q_id }}
                        {{ question_form.topic }}
                        {{ forloop.counter }}
                    </div>
                    <div class="col-md-11">
                        {{ question_form.question_text }}{{ question_form.question }}
                    </div>
                </div>
                </h4>
                <div class="formset-row">
                    {{ question_form.answers }}
                </div>
            </div>
            {% endfor %}
            <br>
            {% buttons %}
            <button type="submit" id="create-new" class="btn btn-primary">Submit Answers</button>
            {% endbuttons %}
        </form>
        {% endif%}
        {% if statistic %}
        <h2>Result</h2>
        <br>
        <h4>Correct questions: {{correct_questions}}</h4>
        <!-- <h4>Correct answers: {{correct_answers}}</h4> -->
        <br>
        {% for info in statistic %}
        <div class="row">
            <div class="col-md-3">
                {{info.correct}} correct
            </div>
            <div class="col-md-9">
                {{info.question}}
            </div>
        </div>
        {% endfor %}
        <br>
        <br>
        <a class="btn btn-outline-primary" href="{% url back_target %}{%if cid%}{{cid}}/{%endif%}">Back</a>
        {% endif%}
    </div>
</section>

<script>
document.addEventListener("DOMContentLoaded", function (event) {
    var scrollpos_section = sessionStorage.getItem('scrollpos_section');
    if (scrollpos_section) {
        window.scrollTo(0, scrollpos_section);
        sessionStorage.removeItem('scrollpos_section');
    }
});

window.addEventListener("beforeunload", function (e) {
    sessionStorage.setItem('scrollpos_section', window.scrollY);
});
</script>
{% endblock content %}