{% extends "global/Page.html" %}
{% load static otree %}
{% block styles %}
<link href="{% static 'main_app/style.css' %}" rel="stylesheet">{% endblock %}
{% block title %} Quiz 4 {% endblock %}
{% block content %}
<div class="card bg-transparent">
    <div class="card-body">
        <h2 style="padding-left: 10px"><b>COMPREHENSION QUIZ 4/4</b></h2><br>
        <p>Q4.a:</p>
        <p><b>If there are 2000 tokens in the group conservation account at the end of the game (worth $20.00) and you
                have 10 tokens left in your private account, then how much will you receive at the end of the game? ​</b></p>
        <div>
            <div class="container">
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <label>My payout from my personal account is: </label>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="white-space:nowrap">
                        <table>
                            <tr>
                                <!--<input name="answerQ4a1" type="radio" id="id1" value="$1.00"/><label for="id1">$1.00</label>-->
                                <td>{% formfield player.Q4a1 %}</td>
                            </tr>
                        </table>
                    </div>
                    <br>
                    <p id="Explanation"></p><br>
                </div>
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <label>My payout from the group conservation account is: </label>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="white-space:nowrap">
                        <table>
                            <tr>
                                <!--<input name="answerQ4a1" type="radio" id="id1" value="$1.00"/><label for="id1">$1.00</label>-->
                                <td>{% formfield player.Q4a2 %}</td>
                            </tr>
                        </table>
                    </div>
                    <br>
                    <p id="Explanation2"></p><br>
                </div>
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <label>Total payout is (personal plus conservation): </label>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="white-space:nowrap">
                        <table>
                            <tr>
                                <!--<input name="answerQ4a1" type="radio" id="id1" value="$1.00"/><label for="id1">$1.00</label>-->
                                <td>{% formfield player.Q4a3 %}</td>
                            </tr>
                        </table>
                    </div>
                    <br>
                    <p id="Explanation3"></p><br>
                </div>
            </div>
        </div>

        <p>Q4.b:</p>
        <p><b>How would your payout at the end of the game change if the total in the group conservation account had
                only 200 tokens? </b></p>
        <div>
            <div class="container">
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <label>My payout from my personal account is: </label>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="white-space:nowrap">
                        <table>
                            <tr>
                                <!--<input name="answerQ4a1" type="radio" id="id1" value="$1.00"/><label for="id1">$1.00</label>-->
                                <td>{% formfield player.Q4b1 %}</td>
                            </tr>
                        </table>
                    </div>
                    <br>
                    <p id="Explanation4"></p><br>
                </div>
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <label>My payout from the group conservation account is: </label>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="white-space:nowrap">
                        <table>
                            <tr>
                                <!--<input name="answerQ4a1" type="radio" id="id1" value="$1.00"/><label for="id1">$1.00</label>-->
                                <td>{% formfield player.Q4b2 %}</td>
                            </tr>
                        </table>
                    </div>
                    <br>
                    <p id="Explanation5"></p><br>
                </div>
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <label>Total payout is (personal plus conservation): </label>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5" style="white-space:nowrap">
                        <table>
                            <tr>
                                <!--<input name="answerQ4a1" type="radio" id="id1" value="$1.00"/><label for="id1">$1.00</label>-->
                                <td>{% formfield player.Q4b3 %}</td>
                            </tr>
                        </table>
                    </div>
                    <br>
                    <p id="Explanation6"></p><br>
                </div>
            </div>
        </div>

        <button style="display: block" id="checkButton" type="button" class="btn" style="background: #8d8d8d; margin-left: 80%; width: 100px">Check
            Answer</button>
        <button style="display: none" id="nextButton" class="otree-btn-next btn" style="background: #8d8d8d; margin-left: 50%; width: 100px">Next</button>


        <script>
            var checkButton = document.getElementById("checkButton")
            var nextButton = document.getElementById("nextButton")
            var explanation = document.getElementById("Explanation")
            var explanation2 = document.getElementById("Explanation2")
            var explanation3 = document.getElementById("Explanation3")
            var explanation4 = document.getElementById("Explanation4")
            var explanation5 = document.getElementById("Explanation5")
            var explanation6 = document.getElementById("Explanation6")
            var radioInputs = document.getElementsByClassName("form-check-input")

            if ('{{ player.timesInstruction4 }}' == '0') {//INITIAL FIRST TRY
                checkButton.style.background = "#8d8d8d";
                checkButton.style.marginLeft = "80%";
                checkButton.style.width = "120px";
            } else {                                       //SECOND TRY
                checkButton.style.background = "#8d8d8d";
                checkButton.style.marginLeft = "80%";
                checkButton.style.width = "120px";


                for (i = 0; i < radioInputs.length; i++) {
                    var currentRadio = radioInputs.item(i)
                    switch (i) {
                        case 0:
                        case 1:
                        case 2:
                            if (radioInputs.item(1).checked) {
                                if (!currentRadio.checked) currentRadio.disabled = true
                                explanation.innerHTML = "<e style=\"color:green\">Correct!</e> "
                            } else {
                                currentRadio.checked = false;
                            }
                            break;
                        case 3:
                        case 4:
                        case 5:
                            if (radioInputs.item(3).checked) {
                                if (!currentRadio.checked) currentRadio.disabled = true
                                explanation2.innerHTML = "<e style=\"color:green\">Correct!</e> "
                            } else {
                                currentRadio.checked = false;
                            }
                            break;
                        case 6:
                        case 7:
                        case 8:
                            if (radioInputs.item(8).checked) {
                                if (!currentRadio.checked) currentRadio.disabled = true
                                explanation3.innerHTML = "<e style=\"color:green\">Correct!</e> "
                            } else {
                                currentRadio.checked = false;
                            }
                            break;
                        case 9:
                        case 10:
                        case 11:
                            if (radioInputs.item(10).checked) {
                                if (!currentRadio.checked) currentRadio.disabled = true
                                explanation4.innerHTML = "<e style=\"color:green\">Correct!</e> "
                            } else {
                                currentRadio.checked = false;
                            }
                            break;
                        case 12:
                        case 13:
                        case 14:
                            if (radioInputs.item(12).checked) {
                                if (!currentRadio.checked) currentRadio.disabled = true
                                explanation5.innerHTML = "<e style=\"color:green\">Correct!</e> "
                            } else {
                                currentRadio.checked = false;
                            }
                            break;
                        case 15:
                        case 16:
                        case 17:
                            if (radioInputs.item(1).checked) {
                                if (!currentRadio.checked) currentRadio.disabled = true
                                explanation6.innerHTML = "<e style=\"color:green\">Correct!</e> "
                            } else {
                                currentRadio.checked = false;
                            }
                            break;
                        default:
                            currentRadio.checked = false;
                    }
                }
            }

            checkButton.onclick = function () {

                var radioInputs = document.getElementsByClassName("form-check-input")
                var answerSelected = ""
                var answerSelected2 = ""
                var answerSelected3 = ""
                var answerSelected4 = ""
                var answerSelected5 = ""
                var answerSelected6 = ""

                for (let i = 0; i < radioInputs.length; i++) {
                    let currentRadio = radioInputs.item(i)

                    switch (i) {
                        case 0:
                        case 1:
                        case 2:
                            if (currentRadio.checked) answerSelected = currentRadio.value;
                            break;
                        case 3:
                        case 4:
                        case 5:
                            if (currentRadio.checked) answerSelected2 = currentRadio.value;
                            break;
                        case 6:
                        case 7:
                        case 8:
                            if (currentRadio.checked) answerSelected3 = currentRadio.value;
                            break;
                        case 9:
                        case 10:
                        case 11:
                            if (currentRadio.checked) answerSelected4 = currentRadio.value;
                            break;
                        case 12:
                        case 13:
                        case 14:
                            if (currentRadio.checked) answerSelected5 = currentRadio.value;
                            break;
                        case 15:
                        case 16:
                        case 17:
                            if (currentRadio.checked) answerSelected6 = currentRadio.value;
                            break;
                        default:
                        //DO NOTHING
                    }
                }

                if (answerSelected != "" && answerSelected2 != "" && answerSelected3 != "" && answerSelected4 != "" && answerSelected5 != "" && answerSelected6 != "") {
                    nextButton.style.display = "block";
                    nextButton.style.background = "#8d8d8d";
                    nextButton.style.marginLeft = "80%";
                    nextButton.style.width = "100px";
                    checkButton.style.display = "none";

                    var answers = [answerSelected, answerSelected2, answerSelected3, answerSelected4, answerSelected5, answerSelected6]
                    var correct_answers = ["{{ correct_answer }}", "{{ correct_answer2 }}", "{{ correct_answer3 }}",
                        "{{ correct_answer4 }}", "{{ correct_answer5 }}", "{{ correct_answer6 }}"]
                    var explanations = [explanation, explanation2, explanation3, explanation4, explanation5, explanation6]
                    var textExplain = [
                        "The correct answer is $1.00. You are paid $0.10 for each of the 10 energy tokens left in your private account.",
                        "The correct answer is $18.18. The 2000 energy tokens meets the conservation goal, so they are doubled to 4000 tokens and then distributed equally to all 22 players, resulting in $18.18 bonus pay per player.",
                        "The correct answer is $19.18. Add the energy token values in your personal account ($1.00) and the bonus ($18.18) to get your final pay of $19.18.",
                        "The correct answer is $1.00. You are paid $0.10 for each of the energy tokens left in your private account, even if the group does not meet the conservation goal of 1,584 tokens.",
                        "The correct answer is $0.00. The 1000 energy tokens do not meet the group conservation goal of 1,584 energy tokens, so no group bonus is paid.",
                        "The correct answer is $1.00. Add the energy token values in your private account ($1.00) and the bonus from the group conservation account ($0.00) to get your final pay of $1.00”"
                    ]

                    for (let i = 0; i < radioInputs.length; i++) {
                        let currentRadio = radioInputs.item(i)
                        if (!currentRadio.checked) {
                            currentRadio.disabled = true;
                        }
                    }

                    for (i = 0; i < 6; i++) {
                        explanations[i].style.display = "block"
                        explanations[i].style.whiteSpace = "normal"

                        if ('{{ player.timesInstruction4 }}' == '0') {
                            if (answers[i] == correct_answers[i]) {
                                explanations[i].innerHTML = "<e style=\"color:green\">Correct!</e> "
                            } else {
                                explanations[i].innerHTML = "<e style=\"color:red\">Wrong!</e> <e style=\"color:gray\">Proceed to introduction to revise the rules of the game.</e>"
                            }
                        } else {
                            if (answers[i] == correct_answers[i]) {
                                explanations[i].innerHTML = "<e style=\"color:green\">Correct!</e> "
                            } else {
                                explanations[i].innerHTML = "<e style=\"color:red\">Wrong!</e> "
                            }
                            explanations[i].innerHTML += "<e style=\"color:gray\">" + textExplain[i] + "</e>"
                        }

                    }
                }
            }
        </script>
    </div>
</div>
{% endblock %}