{{ 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 2 now.</h5>
            <p>Before you proceed to PART 2, 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</b> How many <i>Supervisors</i> are there in each <b>PART 2 group</b>? <input
                    class='form-control-inline' type="text" name="q1" id="q1" required>.
            <p id="q1_error" style="color:red"></p>
            </p>
            <p>
                <b>Q2</b> How many <i>Workers</i> are there in each <b>PART 2 group</b>? <input
                    class='form-control-inline' type="text" name="q2" id="q2" required>.
            <p id="q2_error" style="color:red"></p>
            </p>
            <p>
                <b>Q3</b> How many participants in each <b>PART 2 group</b> have been in the same group in PART 1?
            <p id="q3_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q3" id="q3_a" value="a">
            <label class="form-check-label" for="q3_a"> 0</label><br>
            <input type="radio" class="form-check-input" name="q3" id="q3_b" value="b">
            <label class="form-check-label" for="q3_b"> 1</label><br>
            <input type="radio" class="form-check-input" name="q3" id="q3_c" value="c">
            <label class="form-check-label" for="q3_c"> 2</label><br>
            <input type="radio" class="form-check-input" name="q3" id="q3_d" value="d">
            <label class="form-check-label" for="q3_d"> 3</label><br>
            <input type="radio" class="form-check-input" name="q3" id="q3_e" value="e">
            <label class="form-check-label" for="q3_e"> 4</label><br>
            <input type="radio" class="form-check-input" name="q3" id="q3_f" value="f">
            <label class="form-check-label" for="q3_f"> 5</label><br>
            <input type="radio" class="form-check-input" name="q3" id="q3_g" value="g">
            <label class="form-check-label" for="q3_g"> 6</label><br>
            </p>
            <p>
                <b>Q4</b> Can a <i>Supervisor</i> send messages to the <i>Workers</i>?
            <p id="q4_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q4" id="q4_a" value="a">
            <label class="form-check-label" for="q4_a"> Yes</label><br>
            <input type="radio" class="form-check-input" name="q4" id="q4_b" value="b">
            <label class="form-check-label" for="q4_b"> No</label><br>
            </p>
            <p>
                <b>Q5</b> Can a <i>Worker</i> send messages to other <i>Workers</i> or the <i>Supervisor</i>?
            <p id="q5_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q5" id="q5_a" value="a">
            <label class="form-check-label" for="q5_a"> Yes</label><br>
            <input type="radio" class="form-check-input" name="q5" id="q5_b" value="b">
            <label class="form-check-label" for="q5_b"> No</label><br>
            </p>

            <p>
                <b>Q6</b> If you are from the BLUE group in PART 1 and have been randomly selected as a
                <i>Supervisor</i> in your <b>PART 2 group</b>, all the <i>Workers</i> in your <b>PART 2 group</b> are
                from the:
            <p id="q6_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q6" id="q6_a" value="a">
            <label class="form-check-label" for="q6_a"> RED Group</label><br>
            <input type="radio" class="form-check-input" name="q6" id="q6_b" value="b">
            <label class="form-check-label" for="q6_b"> BLUE Group</label><br>
            <input type="radio" class="form-check-input" name="q6" id="q6_c" value="c">
            <label class="form-check-label" for="q6_b"> 4 from RED group and 1 from BLUE group</label><br>
            <input type="radio" class="form-check-input" name="q6" id="q6_d" value="d">
            <label class="form-check-label" for="q6_b"> 4 from BLUE group and 1 from RED group</label><br>
            </p>

            <p>
                <b>Q7 (A)</b> If you are from the RED group in PART 1 and have been randomly selected as a <i>Worker</i>
                in your <b>PART 2 group</b>, the <i>Supervisor</i> in your <b>PART 2 group</b> is
                from the:
            <p id="q7_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q7" id="q7_a" value="a">
            <label class="form-check-label" for="q7_a"> RED Group</label><br>
            <input type="radio" class="form-check-input" name="q7" id="q7_b" value="b">
            <label class="form-check-label" for="q7_b"> BLUE Group</label><br>
            <input type="radio" class="form-check-input" name="q7" id="q7_b" value="c">
            <label class="form-check-label" for="q7_b"> Either RED or BLUE group</label><br>
            </p>
            <p>
                <b>Q7 (B)</b> If you are from the RED group in PART 1 and have been randomly selected as a <i>Worker</i>
                in your <b>PART 2 group</b>, the <i>Workers</i> in your <b>PART 2 group</b> is
                from the:
            <div class="container">
                <div class="form-check">
                    <p id="q8_error" style="color:red"></p>
                    <input type="radio" class="form-check-input" name="q8" id="q8_a" value="a">
                    <label class="form-check-label" for="q8_a"> RED Group</label><br>
                </div>

                <div class="form-check">
                    <input type="radio" class="form-check-input" name="q8" id="q8_b" value="b">
                    <label class="form-check-label" for="q8_b"> BLUE Group</label><br>
                </div>
                <div class="form-check">
                    <input type="radio" class="form-check-input" name="q8" id="q8_c" value="c">
                    <label class="form-check-label" for="q8_c"> The other 4 <i>Workers</i> in your <b>PART 3 group</b>
                        are
                        from the BLUE group, OR 1 <i>Worker</i>
                        in your <b>PART 3 group</b> is from the BLUE group while the other 3 <i>Workers</i> are from
                        the RED group</label><br>
                </div>

                <div class="form-check">
                    <input type="radio" class="form-check-input" name="q8" id="q8_d" value="d">
                    <label class="form-check-label" for="q8_d"> The other 4 <i>Workers</i> in your <b>PART 3 group</b>
                        are
                        from the RED group, OR 1 <i>Worker</i>
                        in your <b>PART 3 group</b> is from the RED group while the other 3 <i>Workers</i> are from the
                        BLUE group</label><br>
                </div>
            </p>
                    <p>
                    <b>Q8</b> Who observes the outcomes of your die roll?
                <p id="q9_error" style="color:red"></p>
                <input type="radio" class="form-check-input" name="q9" id="q9_a" value="a">
                <label class="form-check-label" for="q9_a"> Group Members</label><br>
                <input type="radio" class="form-check-input" name="q9" id="q9_b" value="b">
                <label class="form-check-label" for="q9_b"> Experimenter</label><br>
                <input type="radio" class="form-check-input" name="q9" id="q9_c" value="c">
                <label class="form-check-label" for="q9_c"> No one</label><br>
                </p>
                <input name="part_2_quiz_status" id="part_2_quiz_status" type='radio' hidden>

                <p>

                <b>Q9</b> Suppose the outcomes of the three die rolls in a round are 3, 4, 5, and you report 3, 4, 5; <b>the total reported outcomes</b> by the other participants in your group is 59; then, what is your payoff in this round? <input type="text" name="q10" id="q10" required> tokens
                <p id="q10_error" style="color:red"></p>
            </p>

            <p>
                <b>Q10</b> Suppose the outcomes of the three die rolls in a round are 1, 2, 3 and you report 3, 4, 5; <b>the total reported outcomes</b> by the other participants in your group is 59; then, what is your payoff in this round? <input type="text" name="q11" id="q11" required> tokens
                <p id="q11_error" style="color:red"></p>
            </p>

            <p>
                <b>Q11 &#40;a&#41; </b> Suppose the outcomes of the three die rolls in a round are 1, 3, 5, and you report 4, 5, 6; the total reported outcomes by the other participants in your group is 65; then, what is your payoff in this round with a 3 in 4 chance? <input type="text" name="q12_a" id="q12_a"
                    required> tokens
                <p id="q12_a_error" style="color:red"></p>
            </p>
            <p>
                <b>Q11 &#40;b&#41;</b> In this round, what is your payoff in this round with a 1 in 4 chance? <input type="text"
                    name="q12_b" id="q12_b" required> tokens.
                <p id="q12_b_error" style="color:red"></p>
            </p>

            </div>
            <div align="right" id="check-ans-btn"><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": "1",
            "q2": "5",
            "q10": "12",
            "q11": "12",
            "q12_a": "15",
            "q12_b": "0",
        };
    q3_err_message = document.getElementById("q3_error");
    q4_err_message = document.getElementById("q4_error");
    q5_err_message = document.getElementById("q5_error");
    q6_err_message = document.getElementById("q6_error");
    q7_err_message = document.getElementById("q7_error");
    q8_err_message = document.getElementById("q8_error");
    q9_err_message = document.getElementById("q9_error");

    function check_func() {
        var score = 0;
        for (let key in answer_keys) {
            var message = document.getElementById(key + "_error");
            message.innerHTML = "";
            q3_err_message.innerHTML = "";
            q4_err_message.innerHTML = "";
            q5_err_message.innerHTML = "";
            q6_err_message.innerHTML = "";
            q7_err_message.innerHTML = "";
            q8_err_message.innerHTML = "";
            q9_err_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;
                console.log(err);
            }
        }

        var quiz_answers = ['e', 'a', 'b', 'c', 'c', 'c', 'c']
        for (var i = 1; i <= quiz_answers.length; i++) {
            var selectedOption = document.querySelector('input[name="q' + (i + 2) + '"]:checked');
            if (selectedOption !== null && selectedOption.value === quiz_answers[i - 1]) {
                score++; // Increment score if the selected option is correct

            }
            else {
                document.getElementById("q" + (i + 2) + "_error").innerHTML = "Incorrect Answer! Please try again";
            }
        }
        if (score == 13) {
            var quiz_stat = document.getElementById("part_2_quiz_status")
            quiz_stat.checked = true
            success_message = document.getElementById("quiz_success");
            success_message.innerHTML = "You have correctly answered all the questions. Please click on the next button to move forward.   "
            document.getElementById('next-btn').style.display = 'block'
            document.getElementById('check-ans-btn').style.display = 'none'
        }
    }
</script>

{{ endblock }}