{{ 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>
            <p>
                <b>Q5 &#40;a&#41; </b> How many supervisors are there in one group? <input type="text" name="q5_a"
                    id="q5_a" required>
                <p id="q5_a_error" style="color:red"></p>
            </p>
            <p>
                <b>Q5 &#40;b&#41;</b> How many workers are there in one group? <input type="text" name="q5_b" id="q5_b"
                    required>
                <p id="q5_b_error" style="color:red"></p>
            </p>
            <p>
                <b>Q5 &#40;c&#41;</b> Can a supervisor send messages to the workers? <br>
                <input type="radio" name="q5_c" id="q5_c_a" value="no">
                <label for="q5_c">No</label><br>
                <input type="radio" name="q5_c" id="q5_c_b" value="yes">
                <label for="q5_c">Yes</label><br>
                <p id="q5_c_error" style="color:red"></p>
            </p>
            <p>
                <b>Q5 &#40;d&#41;</b> Can a worker send messages to other workers or the supervisor?<br>
                <input type="radio" name="q5_d" id="q5_d_a" value="yes">
                <label for="q5_d">Yes</label><br>
                <input type="radio" name="q5_d" id="q5_d_b" value="no">
                <label for="q5_d">No</label><br>
                <p id="q5_d_error" style="color:red"></p>
            </p>
            <p>
                <b>Q6 </b> Who observes the outcomes of your die roll?<br>
                <input type="radio" name="q6" id="q6_a" value="groupMembers">
                <label for="q6">Group Members</label><br>
                <input type="radio" name="q6" id="q6_b" value="experimenter">
                <label for="q6">Experimenter</label><br>
                <input type="radio" name="q6" id="q6_c" value="no-one">
                <label for="q6">No-one</label><br>
                <p id="q6_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",
            "q5_a": "1",
            "q5_b": "5",
        };

    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);
            }
        }
        check_radios()
        console.log(score);

        function check_radios() {
            console.log('hello');
            const radio_list = ['q5_c', 'q5_d', 'q6'];
            const radio_answers = ['yes', 'no', 'no-one'];
            for (let x in radio_list) {
                var radio_buttons = document.getElementsByName(radio_list[x])
                var radio_error_message = document.getElementById(radio_list[x] + "_error");
                
                
                for (let i = 0; i < radio_buttons.length; i++) {
                    radio_error_message.innerHTML = "";
                    if (radio_buttons[i].checked) {
                        console.log(radio_buttons[i].value);
                        try {
                            if (radio_buttons[i].value == radio_answers[x]) {
                            score++;
                            }
                            else {
                                throw "None"
                            }
                            }
                        catch (err) {
                            radio_error_message.innerHTML = err;
                            console.log(err);
                        }
                    }
                    else {
                            radio_error_message.innerHTML = "Incorrect Answer! Please try again";
                             
                            }


                       
                    }
                }
            }

            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 }}