{{ block title }}
Part 1
{{ endblock }}

{{ block content }}

<div class="container" style="width:80%">
    <div class="card bg-light">
    <div class="card-body">
        <h5>We will begin PART 1 now.</h5>
        <p>Before you proceed to PART 1, we ask that you answer the following questions that are designed to check your comprehension of the written instructions. Feel free to consult the instructions in answering these questions. Once you complete the quiz successfully, you'll proceed to the task. In case of any questions, please raise your hand and an experimenter will help you.</p>
    </div>
</div><br>
    <form action="">

        <div id="quiz">
            <p>

                <b>Q1</b> How much time do you have to finish the puzzle? <input class='form-control-inline' type="text"
                    name="q1" id="q1" required> minutes.
            <p id="q1_error" style="color:red"></p>
            </p>
            <p>
                <b>Q2</b> If a participant wins the puzzle game, how much does the participant earn? <input class='form-control-inline' type="text" name="q2" id="q2" required> dollars.
            <p id="q2_error" style="color:red"></p>
            </p>
            <input name="part_1_puzzle_quiz_status" id="part_1_puzzle_quiz_status" type='radio' hidden>
        </div>
        <div align="right" id="check-btn"><button class="btn btn-primary" onclick="check_func()" type="button">Check Answers</button>
        </div>
    </form><br />
    <p id="quiz_success" style="color:green" align="right"></p>

    <div id="next-btn" align="right" style="display:none">{{next_button}}</div>

</div>
<script>
    var
        answer_keys = {
            "q1": "10",
            "q2": "1.5",
        };
    
    function
        check_func() {
        var
            score =
                0;
        for (let
            key in
            answer_keys) {
                
            var
                message =
                    document.getElementById(key +
                        "_error");
            message.innerHTML =
                "";
            user_answer
                =
                document.getElementById(key).value
            correct_answer
                =
                answer_keys[key]
            console.log(user_answer)
            console.log(correct_answer)
            try {
                if (user_answer !=
                    correct_answer) {
                    throw "Incorrect Answer! Please try again"
                } else {
                    score++;
                }
            } catch (err) {
                message.innerHTML =
                    err;
                console.log(err);
            }
        }

        console.log(score);


        if (score ==
            2) {
            var quiz_stat = document.getElementById("part_1_puzzle_quiz_status")
            quiz_stat.checked = true
            success_message =
                document.getElementById("quiz_success");
            success_message.innerHTML = "You have correctly answered all the questions."
            document.getElementById('next-btn').style.display = 'block'
            document.getElementById('check-btn').style.display = 'none'
        }
    
        
    }
</script>

{{ endblock }}