{{ block title }}
{{ endblock }}

{{ block content }}

<div class="container" style="width:80%">
    <h2>Quiz</h2> <br />
    <p>
        Before we start the experiment, you have to answer several questions about the experiment. You
        will not be allowed to start the experiment until you answer them correctly. In case of any
        queries, please raise your hand and an experimenter will help you.
    </p><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
                total number reported by the other participants in your group is 23; then, what is the probability
                of a collective failure in this period for your group? <input type="text" name="q1_a" id="q1_a"
                    required>
                <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
                total number reported by the other participants in your group is 23; then, what is the probability
                of a collective failure in this period for your group? <input type="text" name="q2_a" id="q2_a"
                    required>
                <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 total number reported by the other participants in your group is 30; then, what is the probability
                of a collective failure in this period for your group? <input type="text" name="q3_a" id="q3_a"
                    required>
                <p id="q3_a_error" style="color:red"></p>
            </p>
            <p>
                <b>Q3 &#40;b&#41;</b> If a collective failure occurs, your payoff in this period is <input type="text"
                    name="q3_b" id="q3_b" required> tokens.
                <p id="q3_b_error" style="color:red"></p>
            </p>
            <p>
                <b>Q3 &#40;c&#41;</b> If a collective failure does not occur, your payoff in this period is <input
                    type="text" name="q3_c" id="q3_c" required> tokens.
                <p id="q3_c_error" style="color:red"></p>
            </p>

            <p>
                <b>Q4 &#40;a&#41; </b> Suppose the outcomes of the three die rolls in a period are 2, 3, 4, and you
                report 2, 3, 4;
                the total number reported by the other participants in your group is 32; then, what is the probability
                of a collective failure in this period for your group? <input type="text" name="q4_a" id="q4_a"
                    required>
                <p id="q4_a_error" style="color:red"></p>
            </p>
            <p>
                <b>Q4 &#40;b&#41;</b> If a collective failure occurs, your payoff in this period is <input type="text"
                    name="q4_b" id="q4_b" required> tokens.
                <p id="q4_b_error" style="color:red"></p>
            </p>
            <p>
                <b>Q4 &#40;c&#41;</b> If a collective failure does not occur, your payoff in this period is <input
                    type="text" name="q4_c" id="q4_c" required> tokens.
                <p id="q4_c_error" style="color:red"></p>
            </p>

        </div>
        <input name="quiz_status" id="quiz_status" type="hidden" />
        <div align="right"><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": "0.6",
            "q3_b": "0",
            "q3_c": "15",
            "q4_a": "0.6",
            "q4_b": "0",
            "q4_c": "9"
        };

    function
    check_func() {
        var
            score =
            0;
        for (let
                key in
                answer_keys) {
            const
                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 ==
            10) {
            var
            quiz_stat =
                document.getElementById("quiz_status").value
            quiz_stat = 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'
        }
    }
</script>

{{ endblock }}