{{ block title }}
{{ endblock }}

{{ block content }}

<div class="container" style="width:80%">
    <h2>Quiz</h2> <br>
    <div class="card bg-light">
    <div class="card-body">
    <p>
        <b>We will begin PART 2 of the experiment now.</b><br>
        Before you proceed to PART 2, 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>Suppose the outcomes of the three die rolls in a round are 3, 4, 5, and you report 3, 4, 5; <b>the total reported outcomes</b> by the other participants in your group is 59; then, what is your payoff in this round? <input type="text" name="q1" id="q1" required> tokens
                <p id="q1_error" style="color:red"></p>
            </p>

            <p>
                <b>Q2</b> Suppose the outcomes of the three die rolls in a round are 1, 2, 3 and you report 3, 4, 5; <b>the total reported outcomes</b> by the other participants in your group is 59; then, what is your payoff in this round? <input type="text" name="q2" id="q2" required> tokens
                <p id="q2_error" style="color:red"></p>
            </p>

            <p>
                <b>Q3 &#40;a&#41; </b> Suppose the outcomes of the three die rolls in a round are 1, 3, 5, and you report 4, 5, 6; the total reported outcomes by the other participants in your group is 65; then, what is your payoff in this round with a 3 in 4 chance? <input type="text" name="q3_a" id="q3_a"
                    required> tokens
                <p id="q3_a_error" style="color:red"></p>
            </p>
            <p>
                <b>Q3 &#40;b&#41;</b> In this round, what is your payoff in this round with a 1 in 4 chance? <input type="text"
                    name="q3_b" id="q3_b" required> tokens.
                <p id="q3_b_error" style="color:red"></p>
            </p>
            <input name="part_2_quiz_status" id="part_2_quiz_status" type='radio' hidden>
        </div>

        <div align="right" id="check-ans-btn" style="display:block"><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": "12",
            "q2": "12",
            "q3_a": "15",
            "q3_b": "0",
        };

    function check_func() {
        var score = 0;
        for (let key in answer_keys) {
            var message = document.getElementById(key + "_error");
            message.innerHTML = "";
            console.log(key)
            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 == 4) {
                var quiz_stat = document.getElementById("part_2_quiz_status")
                quiz_stat.checked = true
                success_message = document.getElementById("quiz_success");
                success_message.innerHTML = "You can move forward by clicking the Next Button.";
                document.getElementById('next-btn').style.display = 'block';
                document.getElementById('check-ans-btn').style.display = 'none';
            }
        }
</script>

{{ endblock }}