feedback.html

{% extends "quiz.html" %}

{% block question %}
    <div class="p-8">

        <div class="flex flex-col">
            <div class="text-green-900 text-2xl text-center flex flex-row justify-center font-slab"><p
                    class="font-semibold">Vraag {{ question_nr }} </p>
                <p> / {{ questions|length }} </p></div>
            <p class="italic text-3xl font-bold tracking-wide text-blue-900 text-center font-slab"> {{ question.question_text }} </p>
            {% if question.correct_answer in option %}
                <div class="rounded-full bg-green-500  flex h-32 w-32 flex items-center justify-center place-self-center">
                    <p
                            class="m-4 text-white  font-extrabold text-center text-4xl font-slab ">Goed!</p></div>
            {% else %}
                <div class="rounded-full bg-red-500 flex h-32 w-32 flex items-center justify-center place-self-center">
                    <p
                            class="m-4 text-white  text-center font-extrabold  text-4xl font-slab ">Fout!</p></div>
            {% endif %}
            <p class="text-2xl text-center"><i>{{ question.mp_choice_options[index_option].feedback }}</i></p>
        </div>
    </div>
    <div class="p-10 button-bar border-t-8 border-green-600">
        {% if question_nr < questions|length %}
            <div></div>
            <button class="green-btn ml-1 text-right-0"
                    onclick="window.location = '/quiz/quiz_questions/{{ level_source }}/{{ question_nr + 1 }}'">
                Ga
                naar vraag {{ question_nr + 1 }}</button>
        {% else %}
            <div></div>
            <button class="green-btn ml-1 right-0"
                    onclick="window.location = '/quiz/quiz_questions/{{ level_source }}/{{ question_nr + 1 }}'">
                Ga
                naar de resultaten van de quiz
            </button>

        {% endif %}
    </div>
{% endblock %}