{{ block title }}
{{ endblock }}

{{ block content }}

<div class="container" style="width:80%">
    <h2>Quiz</h2> <br>
    <div class="card bg-light">
    <div class="card-body">
        <h5>We will begin PART 1 of the experiment now.</h5><br>
    <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 &#40;a&#41; </b> Suppose the outcomes of the three die rolls in a period are 3, 4, 5, and you report 3, 4, 5; the <b>total reported outcomes</b> by the other participants in your group is 59; then, what is the chance of a zero payoff in this round for your group members? <input type="text" name="q1_a" id="q1_a" required> percentage.
                <p id="q1_a_error" style="color:red"></p>
            </p>

            <p>
                <b>Q1 &#40;b&#41;</b> Your payoff in this period is <input type="text" name="q1_b" id="q1_b" required>
                tokens.
                <p id="q1_b_error" style="color:red"></p>
            </p>

            <p>
                <b>Q2 &#40;a&#41; </b> Suppose the outcomes of the three die rolls in a period are 1, 2, 3 and you report 3, 4, 5; the <b>total reported outcomes</b> by the other participants in your group is 59; then, what is the chance of a zero payoff in this round for your group members? <input type="text" name="q2_a" id="q2_a" required> percentage.
                <p id="q2_a_error" style="color:red"></p>
            </p>
            <p>
                <b>Q2 &#40;b&#41;</b> Your payoff in this period is <input type="text" name="q2_b" id="q2_b" required>
                tokens.
                <p id="q2_b_error" style="color:red"></p>
            </p>

            <p>
                <b>Q3 &#40;a&#41; </b> Suppose the outcomes of the three die rolls in a period are 1, 3, 5, and you report 4, 5, 6; the <b>total reported outcomes</b> by the other participants in your group is 65; then, what is the chance of a zero payoff in this round for your group members? <input type="text" name="q3_a" id="q3_a"
                    required> percentage.
                <p id="q3_a_error" style="color:red"></p>
            </p>
            <p>
                <b>Q3 &#40;b&#41;</b> In this round, with a 40 percentage chance, your payoff is <input type="text"
                    name="q3_b" id="q3_b" required> tokens.
                <p id="q3_b_error" style="color:red"></p>
            </p>
            <input name="instructions_quiz_status" id="instructions_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_a": "0",
            "q1_b": "12",
            "q2_a": "0",
            "q2_b": "12",
            "q3_a": "60",
            "q3_b": "15",
        };

    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 == 6) {
                var quiz_stat = document.getElementById("instructions_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 }}