{% 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 %}
    Comprehension 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>Is the following statement true?: An agreement is reached immediately if two offers match on the negotiation screen. </p>
{% formfield player.quiz1 %}

<p>Is the following statement true?: All three players have to enter the same proposal to reach an agreement. </p>
{% formfield player.quiz4 %}

<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 for one iteration</button>
<div class="content">
    <p>You will be randomly placed in groups of three.
    <b>The task of this experiment is for the three of you to decide on how to split €{{ Constants.start_money }}.</b></p>
<h4>Group members</h4>
<p>Each player in the group will be identified by a color - Orange, Blue and Yellow. Please pay close attention to the identity of each player.</p>

{% if player.treatment > 0 %}
<p>After you finish with the instructions, we will assign each group to a separate break-out room.
    You might have to wait a few minutes until the experimenter assigns you to the break-out room.
    The experimenter will ask all of you to state their color to ensure that everyone is aware of the identifying color.
    You will have to use your microphone but no camera for this step.
    After everyone confirmed their color, the experimenter will allow you to proceed to the negotiation.
</p>
{% endif %}

<h4>Negotiation</h4>
<p>You will see a screen on the computer where you can submit proposals on how to split the €{{ Constants.start_money }} among the three of you (only integers numbers are allowed).
    You can also observe the proposals of the other two participants on-screen. <b>Negotiation will last for 4 minutes</b>.
    At any time during these 4 minutes, you can make a new proposal on how to split the money and so can the other two participants.
    You can only have one standing proposal. The computer will automatically delete an old proposal once you submit a new one. </p>

{% if player.treatment == 2 %}

<p>At the bottom of the negotiation page, you will find chat windows. You can use those to exchange messages with the other players.
Please note that you will see <b>three chats</b>. In the first, you can send messages to both other members in the group.
The other two can be used to send a message only to one other player of the group.</p>

{% endif %}

<h4>End of round</h4>
<p>When four minutes have passed two scenarios may occur: (1) Agreement or (2) Disagreement.</p>
<ol>
    <li><b>Agreement: Occurs only if there are at least two identical proposals at the end of the 4 minute negotiation.</b>
      Thus, if you want to support the proposal of another participants, you need to enter the exact same proposal during negotiation.
        If two proposals match during the negotiation but one of the players changes his or her proposal before the end of the negotiation, this does not count as an agreement.
        It only counts whether there is a match <b>at the end of the 4 minutes</b>.
      If an agreement is reached, the €{{ Constants.start_money }} are distributed according to the matching proposals.
      In this case, you will be asked to answer a final questionnaire.   </li>
    <li><b>Disagreement: Occurs when there are no matching proposals at the 4 minute mark</b>.
        In this case, the process repeats itself with a new negotiation stage.
        However, the total money to divide will shrink by €{{ Constants.round_loss }} with each disagreement.
        Thus, after {{ Constants.zero_rounds }} rounds without agreement, the experiment ends and everyone in the group earns €0. </li>
</ol>

<p><b>Total earnings:</b> your total earnings consist of your share from the negotiations plus your participation fee of €{{ Constants.participation_fee }}. </p>

</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 %}