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

{{ block content }}

<div class="container" style="width:80%">
    <div class="card bg-light">
    <div class="card-body">
        <b>We will begin PART 1 now.</b>
        <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> Suppose, you have been assigned to the RED group. You can use the chat box to send messages to:
            <p id="q2_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q2" id="q2_a"
                value="a">
                <label class="form-check-label" for="q2"> Your RED group members</label><br>
            <input type="radio" class="form-check-input" name="q2" id="q2_b"
                value="b">
                <label class="form-check-label" for="q2"> BLUE group members</label><br>
            <input type="radio" class="form-check-input" name="q2" id="q2_c"
                value="c">
                <label class="form-check-label" for="q2"> Both RED and BLUE group members</label><br>
            <input type="radio" class="form-check-input" name="q2" id="q2_d"
                value="d">
                <label class="form-check-label" for="q2"> None</label><br>
            </p>

            <p>
                <b>Q3</b> Suppose, you have been assigned to the BLUE group. The <b>total time</b> taken to finish the puzzle successfully by your group is less than the <b>total time</b> taken by the RED group. Who wins the prize?
            <p id="q3_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q3" id="q3_a"
                value="a">
                <label class="form-check-label" for="q3"> BLUE group</label><br>
            <input type="radio" class="form-check-input" name="q3" id="q3_b"
                value="b">
                <label class="form-check-label" for="q3"> RED group</label><br>
            </p>
            <p>
                <b>Q4</b> If a group wins the puzzle game, how much does each member of the group earn? <input class='form-control-inline' type="text" name="q4" id="q4" required> dollars.
            <p id="q4_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
        </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>
    $(document).keypress(
  function(event){
    if (event.which == '13') {
      event.preventDefault();
    }
});
    var
        answer_keys = {
            "q1": "10",
            "q4": "1.5",
        };
    q2_err_message= document.getElementById("q2_error");
    q3_err_message= document.getElementById("q3_error");
    
    function
        check_func() {
        var
            score =
                0;
        for (let
            key in
            answer_keys) {
                
            var
                message =
                    document.getElementById(key +
                        "_error");
            message.innerHTML =
                "";
            q2_err_message.innerHTML= "";
                q3_err_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);
            }
        }



        var quiz_answers= ['a', 'a']
        for (var i = 1; i <= quiz_answers.length; i++) {
        var selectedOption = document.querySelector('input[name="q' + (i+1) + '"]:checked');
        if (selectedOption !== null && selectedOption.value === quiz_answers[i - 1]) {
            score++; // Increment score if the selected option is correct
            
        }
        else{
        document.getElementById("q" + (i+1) + "_error").innerHTML= "Incorrect Answer! Please try again";
        }
        }
            if (score == 4) {
                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 }}