{{ block title }}
QUIZ
{{ endblock }}

{{ block content }}

<div class="container" style="width:80%">
    <div class="card bg-light">
    <div class="card-body">
<h5>We will begin PART 3 now.</h5>
        <p>Before you proceed to PART 3, 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 3 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 3 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 3 group</b> have been in the same group in PART 2?
            <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 2 and have been randomly selected as a
<i>Supervisor</i> in your <b>PART 3 group</b>, all the <i>Workers</i> in your <b>PART 3 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>
            </p>

            <p>
                <b>Q7</b> If you are from the RED group in PART 2 and have been randomly selected as a <i>Worker</i>
in your <b>PART 3 group</b>, the <i>Supervisor</i> and the other <i>Workers</i> in your <b>PART 3 group</b> are
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>
            </p>

            <p>
                <b>Q8</b> Who observes the outcomes of your die roll?
            <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"> Group Members</label><br>
            <input type="radio" class="form-check-input" name="q8" id="q8_b" value="b">
            <label class="form-check-label" for="q8_b"> Experimenter</label><br>
            <input type="radio" class="form-check-input" name="q8" id="q8_c" value="c">
            <label class="form-check-label" for="q8_c"> No one</label><br>
            </p>
            <input name="part_3_quiz_status" id="part_3_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",
        };
    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");
    


    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 = "";
            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= ['g','a', 'b','b','a','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!";
        }
        }
        console.log(score)
        if (score == 8) {
            var quiz_stat = document.getElementById("part_3_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 }}