{{ block title }}
{{ endblock }}

{{ block content }}

<div class="container" style="width:80%">
    <h2>Quiz</h2> <br>
    <div class="card bg-light">
    <div class="card-body">
        <p>
            <b>We will begin PART 2 of the experiment now.</b><br>
            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> Can a <i>Supervisor</i> send messages to the <i>Workers</i>?
            <p id="q3_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q3" id="q3_a" value="yes">
            <label class="form-check-label" for="q3_a"> Yes</label><br>
            <input type="radio" class="form-check-input" name="q3" id="q3_b" value="no">
            <label class="form-check-label" for="q3_b"> No</label><br>
            </p>
            <p>
                <b>Q4</b> Can a <i>Worker</i> send messages to other <i>Workers</i> or the <i>Supervisor</i>?
            <p id="q4_error" style="color:red"></p>
            <input type="radio" class="form-check-input" name="q4" id="q4_a" value="yes">
            <label class="form-check-label" for="q4_a"> Yes</label><br>
            <input type="radio" class="form-check-input" name="q4" id="q4_b" value="no">
            <label class="form-check-label" for="q4_b"> No</label><br>
            </p>

            <p>
                <b>Q5</b> Who observes the outcomes of your die roll?
            <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"> Group Members</label><br>
            <input type="radio" class="form-check-input" name="q5" id="q5_b" value="b">
            <label class="form-check-label" for="q5_b"> Experimenter</label><br>
            <input type="radio" class="form-check-input" name="q5" id="q5_c" value="c">
            <label class="form-check-label" for="q5_c"> No one</label><br>
            </p>
            <p>

                <b>Q6</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="q6" id="q6" required> tokens
                <p id="q6_error" style="color:red"></p>
            </p>

            <p>
                <b>Q7</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="q7" id="q7" required> tokens
                <p id="q7_error" style="color:red"></p>
            </p>

            <p>
                <b>Q8 &#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="q8_a" id="q8_a"
                    required> tokens
                <p id="q8_a_error" style="color:red"></p>
            </p>
            <p>
                <b>Q8 &#40;b&#41;</b> In this round, what is your payoff in this round with a 1 in 4 chance? <input type="text"
                    name="q8_b" id="q8_b" required> tokens.
                <p id="q8_b_error" style="color:red"></p>
            </p>
        <input name="part_2_quiz_status" id="part_2_quiz_status" type='radio' hidden>
        </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",
            "q6": "12",
            "q7": "12",
            "q8_a": "15",
            "q8_b": "0",
        };
    q3_err_message= document.getElementById("q3_error");
    q4_err_message= document.getElementById("q4_error");
    q5_err_message= document.getElementById("q5_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 = "";
            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= ['yes', 'no', '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 == 9) {
            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 }}