{{ 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
        questions, 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 59; then, what is the chance of a collective failure in this period for your group? <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 total number reported by the other participants in your group is 59; then, what is the chance of a collective failure in this period for your group? <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 total number reported by the other participants in your group is 65; then, what is the chance of a collective failure in this period for your group? <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> 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 65; then, what is the chance of a collective failure in this period for your group? <input type="text" name="q4_a" id="q4_a"
                    required> percentage.
                <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": "60",
            "q3_b": "0",
            "q3_c": "15",
            "q4_a": "60",
            "q4_b": "0",
            "q4_c": "9",
        };

    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 ==
                15) {
                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 }}