{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}


{% endblock %}

{% block content %}
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
We now will ask you to answer 6 comprehension questions, one at a time. The second question will appear if you answer the first question correctly; the third will appear if you answer correctly the second question, and so on. If you have a question, please raise your hand.
<p>
    <br>
</p>

<p><b>Questions 1</b></p>
<p>Assume you currently are in Subgroup 1 with cost coefficient equal to 3. Which of the following aspects can change in the next round: group, subgroup, group members, subgroup members, or cost coefficient?</p>

{{ form.try1.errors }}
<input type="hidden" name="try1" id="try1" value="0" />



<input type="radio" name="q1" value="1"> Only subgroup, and cost coefficient<br>
<input type="radio" name="q1" value="2"> Only group, and subgroup<br>
<input type="radio" name="q1" value="3"> Everything except for cost coefficient<br>
<input type="radio" name="q1" value="4"> All of them<br>

<p>
    <br>
</p>
<button onclick="check()" class="btn btn-info btn-large" type = "button">Check answer</button>

<p>
    <br>
</p>
<button class="btn btn-primary btn-large" , id = "next" style="display:none">
    Correct. Please answer Question 2.
</button>

<script>

function check() {
$("#try1").attr("value", (parseInt(try1.value)+1).toString());
a =  $("input[name='q1']:checked").val();
if ( a == "4") {
    $("#next").attr("style", "display:block;");
}else{
    $("#next").attr("style", "display:none;");
    alert("Wrong! Do it again, or ask the experimenter.");

}
};

</script>

{% endblock %}