{{ block title }}
{{ endblock }}

{{ block content }}

<div class="container" style="width:80%">
    <h2>Quiz</h2> <br />
    <p>
        Before we start PART 1, you will answer a short quiz. You  cannot start PART 1 until you answer the quiz questions 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 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 chance
                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 chance
                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>
            <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": "2",
        };
    var radio_list = [ 'q5_d', 'q6', 'q5_c',];
    var radio_answers = ['no', 'no-one','yes',];
    function check_func() {
        var score = 0;
        for (let key in answer_keys) {
            var message = document.getElementById(key +"_error");
            message.innerHTML = "";
            user_answer = document.getElementById(key).value
            correct_answer = answer_keys[key]
            try {
                if (user_answer != correct_answer) {
                    throw "Incorrect Answer! Please try again"
                } else {
                    score++;
                }
            } catch (err) {
                message.innerHTML = err;
            }
        }
        check_radios()
        console.log(score);

        function check_radios() {
            
            for (let x in radio_list) {
                var radio_buttons = document.getElementsByName(radio_list[x])
                var radio_error_message = document.getElementById(radio_list[x] + "_error");
                radio_error_message.innerHTML = ""
                
                
                
                for (let i = 0; i < radio_buttons.length; i++) {
                    radio_error_message.innerHTML = "";
                    if (radio_buttons[i].checked) {

                        console.log(radio_buttons[i].value);
                        console.log(radio_answers[x])
                        try {
                            if (radio_buttons[i].value == radio_answers[x]) {
                                radio_error_message.innerHTML = ""
                            score++;
                            }
                            else {
                                throw "Incorrect Answer! Please try again"
                            }
                            }
                        catch (err) {
                            radio_error_message.innerHTML = err;
                        }
                    }
                    else {
                        try {
                            if (true){
                                throw "Incorrect Answer! Please try again"
                            }
                        }
                        catch(err){
                            radio_error_message.innerHTML = err;
                        }
                            }



                       
                    }
                }
            }

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