{{ block title }}
Section 1: comprehension test
{{ endblock }}

{{ block content }}
<div class="instructions well well-lg" style="">

    <p>
        Here are two questions on your comprehension on the payment mechanism in section 1. Below is a screenshot of choices made by
        someone.
        <div>
         <img src="{{ static 'incomplete_preference/test_choices.png' }}"/>
    </div>

    </p>

    <form method="post" id="form">
        <input type="hidden" name="correct_test_indicator" id="correct_test_indicator">
        {{ formfield_errors "correct_test_indicator" }}
    <p>
        If this task was the one selected for payment for person X, and row 3 is selected among all the rows. This person will have:
        <input  type="number" name="test_chocolate_1" id="test_chocolate_1" required>
        {{ formfield_errors "test_chocolate_1" }} pieces of chocolate <b>in total </b> and
        <input  type="number" name="test_money_1" id="test_money_1" required>
        {{ formfield_errors "test_money_1" }} dollars <b> in total </b>.
    </p>

    <p>
        If this task was the one selected as payment for this person, and row 7 was selected among all the rows. This person will have:
        <input  type="number" name="test_chocolate_2" id="test_chocolate_2" required>
        {{ formfield_errors "test_chocolate_2" }} pieces of chocolate <b>in total</b> and
        <input  type="number" name="test_money_2" id="test_money_2" required>
        {{ formfield_errors "test_money_2" }} dollars  <b>in total</b>.
    </p>

    <button type="button" class="btn btn-primary" onClick="submitForm();">Next</button>
    </form>
</div>


{{ endblock }}

{{ block scripts }}

    <script>

        let wrong_test_ind = 0;
        let correct_test_ind = document.getElementById('correct_test_indicator');
        correct_test_ind.value = 1-wrong_test_ind;
        function submitForm(){
            let form = document.getElementById('form');
            let test_chocolate_1 = document.getElementById('test_chocolate_1');
            let test_chocolate_2 = document.getElementById('test_chocolate_2');
            let test_money_1 = document.getElementById('test_money_1');
            let test_money_2 = document.getElementById('test_money_2');
            let answer_test_chocolate_1 = '{{ Constants.test_chocolate_1 }}'
            let answer_test_money_1 = '{{ Constants.test_money_1 }}'
            let answer_test_chocolate_2 = '{{ Constants.test_chocolate_2 }}'
            let answer_test_money_2 = '{{ Constants.test_money_2 }}'
            if (test_chocolate_1.value === answer_test_chocolate_1 && test_chocolate_2.value === answer_test_chocolate_2 &&  test_money_1.value === answer_test_money_1 && test_money_2.value === answer_test_money_2) {
                form.submit()
            }
            if  (test_chocolate_1.value !== answer_test_chocolate_1) {
                alert('Please correct answer for the chocolate in the first question!');
                wrong_test_ind = 1;
                correct_test_ind.value = 1-wrong_test_ind;
            }
            if (test_money_1.value !== answer_test_money_1 ) {
                alert('Please correct answer for the money in the first question!');
                wrong_test_ind = 1;
                correct_test_ind.value = 1-wrong_test_ind;
            }
            if (test_chocolate_2.value !== answer_test_chocolate_2) {
                alert('Please correct answer for the chocolate in the second question!');
                wrong_test_ind = 1;
                correct_test_ind.value = 1-wrong_test_ind;
            }
            if (test_money_2.value !== answer_test_money_2 ) {
                alert('Please correct answer fot the money in the second question!');
                wrong_test_ind = 1;
                correct_test_ind.value = 1-wrong_test_ind;
            }
        }

    </script>

{{ endblock }}