{% extends "global/Page.html" %}
{% load otree static %}
{% block styles %}
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
{% endblock %}

{% block title %}
    Quiz
{% endblock %}


{% block content %}
<p> To ensure your understanding of the instructions, we provide you with a brief quiz.
    If you have one or more wrong answers, you have to re-take the quiz.
    This quiz is only intended to check your understanding of the instructions.
    It will not affect your earnings. </p>

<p>??</p>
{% formfield player.quiz1 %}

<p>Suppose there is no agreement in your group in the first two rounds.
    Under this scenario, how much money is left to split at the start of round 3?</p>
{% formfield player.quiz2 %}

<p>Suppose there is no agreement in your group in the first five rounds.
    Under this scenario, how much money is left to split at the start of round 6?</p>
{% formfield player.quiz3 %}

    {% next_button %}

<button type="button" class="collapsible">Instruction reminder</button>
<div class="content">
    {% include Constants.instructions %}
</div>

{% endblock %}

{% block scripts %}
<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}


</script>
{% endblock %}