{{ block title }}
Section 3: arithmetic test
{{ endblock }}

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

    <p>
        Please finish the 5 arithmetic questions below. Your payment will not depend on your accuracy rate. But please
        try your best to get the correct answers.

    </p>

    <form method="post" id="form">
    <p>
        Q1: Evaluate the expression (5+3)×2−7:
        <input  type="number" name="math_q1" id="math_q1" required>
        {{ formfield_errors "math_q1" }}
    </p>

    <p>
        Q2: If the price of a product increases from $80 to $100, what is the percentage increase?
        <input  type="number" name="math_q2" id="math_q2" required>
        {{ formfield_errors "math_q2" }}
    </p>


     <p>
        Q3: Calculate the sum of 145 and 237.
        <input  type="number" name="math_q3" id="math_q3" required>
        {{ formfield_errors "math_q3" }}
    </p>


    <p>
        Q4: Solve 2x−5=11.
        <input  type="number" name="math_q4" id="math_q4" required>
        {{ formfield_errors "math_q4" }}
    </p>


     <p>
        Q5: Calculate 15% of 240.
        <input  type="number" name="math_q5" id="math_q5" required>
        {{ formfield_errors "math_q5" }}
    </p>

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

{{ endblock }}

{{ block scripts }}

    <script>

        function submitForm(){
            let form = document.getElementById('form');
            let math_q1 = document.getElementById('math_q1');
            let math_q2 = document.getElementById('math_q2');
            let math_q3 = document.getElementById('math_q3');
            let math_q4 = document.getElementById('math_q4');
            let math_q5 = document.getElementById('math_q5');
            if (math_q1.value !== "" && math_q2.value !== "" &&  math_q3.value !== "" && math_q4.value !== "" && math_q5.value !== ""){
                form.submit()
            }
            if (math_q1.value === "" && math_q2.value === "" &&  math_q3.value === "" && math_q4.value === "" && math_q5.value === "") {
                alert('Please complete all questions!')
            }
        }

    </script>

{{ endblock }}