{% block title %}
    <p style="text-align: center;
        font-size: 30px;
        font-weight: bold;" > Verständnisfragen </p>
{% endblock %}

{% block content %}
<style>

    .otree-body{
        background-color: lightgrey;
        border-radius: 10px;

    }
    .center-text {
        text-align: center;
    }
</style>
<div class="center-text">


    <p style="text-align: justify; font-size: large;">
    Bitte beantworten Sie die folgenden Verständnisfragen. Sie können erst zum Experiment fortfahren, wenn Sie alle Verständnisfragen richtig beantwortet haben. Beantworten Sie alle Fragen mit dem ersten Versuch richtig, erhalten Sie am Ende des Experiments einen <b>Bonus von 200 Talern</b>.</p>
</div>
    {{formfield 'Question_1_BC_Obs'}}
    {{formfield 'Question_2_BC_Obs'}}
    {{formfield 'Question_3_BC_Obs'}}
    {{formfield 'Question_4_BC_Obs'}}
    {{formfield 'Question_5_BC_Obs'}}

<div class = "center-text">
    <button type="button" class="btn btn-primary" onclick="checkSubmit()">Weiter</button>
</div>
    <input type="hidden" name="attempts" id="attempts" value="1">
    <input type="hidden" id="Q1_BC_Obs_first_attempt" name="Q1_BC_Obs_first_attempt" value="0">
    <input type="hidden" id="Q2_BC_Obs_first_attempt" name="Q2_BC_Obs_first_attempt" value="0">
    <input type="hidden" id="Q3_BC_Obs_first_attempt" name="Q3_BC_Obs_first_attempt" value="0">
    <input type="hidden" id="Q4_BC_Obs_first_attempt" name="Q4_BC_Obs_first_attempt" value="0">
    <input type="hidden" id="Q5_BC_Obs_first_attempt" name="Q5_BC_Obs_first_attempt" value="0">

</div>

<script>
    function checkSubmit() {
            let form = document.getElementById('form');
            let isValid = form.reportValidity();
            if (!isValid) return;

            let warnings = [];

            let Question_1_BC_Obs = document.querySelector('input[name=Question_1_BC_Obs]:checked').value;
            let Question_2_BC_Obs = document.querySelector('input[name=Question_2_BC_Obs]:checked').value;
            let Question_3_BC_Obs = document.querySelector('input[name=Question_3_BC_Obs]:checked').value;
            let Question_4_BC_Obs = document.querySelector('input[name=Question_4_BC_Obs]:checked').value;
            let Question_5_BC_Obs = document.querySelector('input[name=Question_5_BC_Obs]:checked').value;


            let attempts = document.getElementById('attempts').value
            if (attempts == 1) {
                 document.getElementById('Q1_BC_Obs_first_attempt').value = Question_1_BC_Obs;
                 document.getElementById('Q2_BC_Obs_first_attempt').value = Question_2_BC_Obs;
                 document.getElementById('Q3_BC_Obs_first_attempt').value = Question_3_BC_Obs;
                 document.getElementById('Q4_BC_Obs_first_attempt').value = Question_4_BC_Obs;
                 document.getElementById('Q5_BC_Obs_first_attempt').value = Question_5_BC_Obs;


             } else {
    }


                 if (Question_1_BC_Obs != 3 || Question_2_BC_Obs != 1 || Question_3_BC_Obs != 1 || Question_4_BC_Obs != 2 || Question_5_BC_Obs != 1 ){
                    warnings.push("Leider waren nicht alle Ihre Antworten vollständig korrekt.")
                }

                if (Question_1_BC_Obs != 3) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 1.");
                }

                if (Question_2_BC_Obs != 1) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 2.")
                }

                if (Question_3_BC_Obs != 1) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 3.")
                }

                if (Question_4_BC_Obs != 2) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 4.")
                }
                if (Question_5_BC_Obs != 1) {
                    warnings.push("Bitte überarbeiten Sie Ihre Antwort auf Frage 5.")
                }


                 if (warnings.length > 0) {
             warnings.push("Drücken Sie OK.")
             window.alert(warnings.join('\r\n'));
             document.getElementById('attempts').value = +attempts +1
         }

            if (warnings.length ==0) {
                if (document.getElementById('attempts').value == 1) {
                    window.alert("Sie haben alle Fragen im ersten Versuch richtig beantwortet und erhalten den Bonus. Bitte klicken Sie auf OK.");
                    form.submit()
                }
                if (document.getElementById('attempts').value > 1) {
                    window.alert("Sie haben alle Fragen richtig beantwortet. Da Sie jedoch mehr als einen Versuch gebraucht haben, erhalten Sie den Bonus nicht. Bitte klicken Sie auf OK.");
                    form.submit()
                }
            }
        }
</script>



{% endblock %}