{% extends "global/Page.html" %}
{% load static otree %}
{% block styles %}
<link href="{% static 'main_app/style.css' %}" rel="stylesheet">{% endblock %}
{% block title %} Quiz 1 {% endblock %}
{% block content %}
<div class="card bg-transparent">
    <div class="card-body">
        <h2 style="padding-left: 10px"><b>COMPREHENSION QUIZ 1/4</b></h2><br>
        <p>Q1:</p>
        <p><b>On average, how many tokens will each player need to invest into the group conservation account in each
                round in order to meet the 60% group conservation goal?</b></p>
        {% formfield player.Q1 %}
        <br>
        <p id="Explanation"></p><br>
        <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")
            if ('{{ player.timesInstruction1 }}' == '0') {
                /*nextButton.style.display = "block";
                nextButton.style.background = "#8d8d8d";
                nextButton.style.marginLeft = "80%";
                nextButton.style.width = "120px";
                checkButton.style.display = "none";*/
                checkButton.style.background = "#8d8d8d";
                checkButton.style.marginLeft = "80%";
                checkButton.style.width = "120px";
                for (i = 0; i < document.getElementsByClassName("form-check-input").length; i++) {
                    document.getElementsByClassName("form-check-input").item(i).checked = false;
                }
            } else {
                checkButton.style.background = "#8d8d8d";
                checkButton.style.marginLeft = "80%";
                checkButton.style.width = "120px";
                for (i = 0; i < document.getElementsByClassName("form-check-input").length; i++) {
                    document.getElementsByClassName("form-check-input").item(i).checked = false;
                }
            }
            checkButton.onclick = function () {
                var radioInputs = document.getElementsByClassName("form-check-input")
                var answerSelected = ""
                for (i = 0; i < radioInputs.length; i++) {
                    if (radioInputs.item(i).checked) {
                        answerSelected = radioInputs.item(i).value;
                    }
                }
                if (answerSelected != "") {
                    explanation.style.display = "block"
                    nextButton.style.display = "block";
                    nextButton.style.background = "#8d8d8d";
                    nextButton.style.marginLeft = "80%";
                    nextButton.style.width = "100px";
                    checkButton.style.display = "none";
                    for (i = 0; i < radioInputs.length; i++) {
                        if (!radioInputs.item(i).checked) {
                            radioInputs.item(i).disabled = true;
                        }
                    }

                    if ('{{ player.timesInstruction1 }}' == '0') {
                        if (answerSelected != '{{ correct_answer }}') {
                            explanation.innerHTML = "<e style=\"color:red\">Wrong!</e> <e style=\"color:gray\">Proceed to introduction to revise the rules of the game.</e>"
                        } else {
                            explanation.innerHTML = "<e style=\"color:green\">Correct!</e>"
                        }
                    } else {
                        if (answerSelected == '{{ correct_answer }}') {
                            explanation.innerHTML = "<e style=\"color:green\">Correct!</e> "
                        } else {
                            explanation.innerHTML = "<e style=\"color:red\">Wrong!</e> "
                        }
                        explanation.innerHTML += "<e style=\"color:gray\">To meet the 60% energy conservation goal, each player should donate on average 6 energy tokens each month to the group conservation account, resulting in at least 1,584 energy tokens at the end of the game.</e>"
                    }

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