{% load otree_tags staticfiles %}

<link rel="stylesheet" type="text/css" href="{% static 'global/matrix.css' %}" />

<div class="instructions well well-lg">

{% if player.role == "Person 1" or player.role == "Person 2" %}

    <h3 class="panel-sub-heading">
        Instructions
    </h3>

    <p>
         In this study, you will be paired randomly and anonymously with another participant. Together with this other participant
         you will play a task that consists of 20 to 40 rounds. In this task, you can earn maximally 20 points per round. These point are worth 
         real money, namely 1 euro per 100 points. The amount of points you earn in all rounds of the task, will be added up and exchanged for real money after the task is finished.
    </p>

    <p>
        <b>The roles of the participants</b>
    </p>

    <p>
        In this task, one of you will be randomly designated Person 1 and the other will be designated Person 2.
        Before the first round of the task, you will learn whether you are Person 1 or Person 2. You will keep the same role in all rounds of the task.
    </p>

    <p>
        <b>The rules of the task</b>
    </p>

    <p>
        In every round of the task, both Person 1 and Person 2 have to choose between 2 options: you can choose
        option A or option B. To both of you it is important to choose the same option.
        After all, if the two of you choose the same option, you will earn valuable points (which will later be exchanged for
        real money). However, if each of you chooses a different option, you both earn 0 points.
    </p>

    <p>
        Another important thing to know is that the two options do not yield the same number of points for each person.
        Namely, if both of you choose option A, Person 1 earns {{ Constants.A_player2_payoff }} and Person 2 earns
        {{ Constants.A_player1_payoff }}. By contrast, if both of you choose option B, Person 1 earns
        {{ Constants.B_player2_payoff }} and Person 2 earns {{ Constants.B_player1_payoff }}.
    </p>

    <p>
        In each round of the task, each of you must independently and simultaneously make a decision, without being
        able to communicate with one another. Your payoffs will be determined by both persons' choices, as shown below:
    </p>

    <div class="row">
        <div class="col-md-7 col-md-offset-2">
            <table class="table table-hover">
                <tr>
                    <th colspan="2"></th>
                    <th colspan="2"><text style="color:blue">Person 1</text></th>
                </tr>
                <tr>
                    <th colspan="2"></th>
                    <th><text style="color:blue">Option A</text></th>
                    <th><text style="color:blue">Option B</text></th>
                </tr>
                <tr>
                    <th rowspan="2"><span class="rotate90"><text style="color:red">Person 2</text></span> </th>
                    <th><text style="color:red">Option A</text></th>
                    <td><text style="color:red"> {{ Constants.A_player1_payoff }}</text>, <text style="color:blue">{{ Constants.A_player2_payoff }}</text></td>
                    <td><text style="color:red">{{ Constants.mismatch_payoff }}</text>, <text style="color:blue">{{ Constants.mismatch_payoff }}</text> </td>
                </tr>
                <tr>
                    <th><text style="color:red">Option B</text></th>
                    <td><text style="color:red"> {{ Constants.mismatch_payoff }}</text>, <text style="color:blue">{{ Constants.mismatch_payoff }}</text></td>
                    <td><text style="color:red"> {{ Constants.B_player1_payoff }}</text>, <text style="color:blue">{{ Constants.B_player2_payoff }}</text></td>
                </tr>
            </table>
        </div>
    </div>

    <p>
        <em>In each cell, the amount to the left is the payoff for Person 2 and to the right for Person 1.</em>

    <p>

{% endif %}

{% if player.role == "Leader" or player.role == "Subordinate" %}

    <h3 class="panel-sub-heading">
        Instructions
    </h3>

    <p>
         In this study, you will be paired randomly and anonymously with another participant. Together with this other participant
         you will play a task that consists of 20 to 40 rounds. In this task, you can earn maximally 20 points per round. These point are worth 
         real money, namely 1 euro per 100 points. The amount of points you earn in all rounds of the task, will be added up and exchanged for real money after the task is finished.
    </p>

    <p>
        <b>The roles of the participants</b>
    </p>

    <p>
        In this task, one of you will be randomly designated Leader and the other will be designated Subordinate.
        Before the first round of the task, you will learn whether you are the Leader or the Subordinate. You will keep the same role in all rounds of the task.
    </p>

    <p>
        <b>The rules of the task</b>
    </p>

    <p>
        In every round of the task, both the Leader and the Subordinate have to choose between 2 options: you can choose
        option A or option B. To both of you it is important to choose the same option.
        After all, if the two of you choose the same option, you will earn valuable points (which will later be exchanged for
        real money). However, if each of you chooses a different option, you both earn 0 points.
    </p>

    <p>
        Another important thing to know is that the two options do not yield the same number of points for each person.
        Namely, if both of you choose option A, the Leader earns {{ Constants.A_player2_payoff }} and the Subordinate
        earns {{ Constants.A_player1_payoff }}. By contrast, if both of you choose option B, the Leader earns
        {{ Constants.B_player2_payoff }} and the Subordinate earns {{ Constants.B_player1_payoff }}.
    </p>

    <p>
        In each round of the task, each of you must independently and simultaneously make a decision, without being
        able to communicate with one another. Your payoffs will be determined by both persons' choices, as shown below:
    </p>

    <div class="row">
        <div class="col-md-7 col-md-offset-2">
            <table class="table table-hover">
                <tr>
                    <th colspan="2"></th>
                    <th colspan="2"><text style="color:blue">Leader</text></th>
                </tr>
                <tr>
                    <th colspan="2"></th>
                    <th><text style="color:blue">Option A</text></th>
                    <th><text style="color:blue">Option B</text></th>
                </tr>
                <tr>
                    <th rowspan="2"><span class="rotate90"><text style="color:red">Subordinate</text></span> </th>
                    <th><text style="color:red">Option A</text></th>
                    <td><text style="color:red"> {{ Constants.A_player1_payoff }}</text>, <text style="color:blue">{{ Constants.A_player2_payoff }}</text></td>
                    <td><text style="color:red">{{ Constants.mismatch_payoff }}</text>, <text style="color:blue">{{ Constants.mismatch_payoff }}</text> </td>
                </tr>
                <tr>
                    <th><text style="color:red">Option B</text></th>
                    <td><text style="color:red"> {{ Constants.mismatch_payoff }}</text>, <text style="color:blue">{{ Constants.mismatch_payoff }}</text></td>
                    <td><text style="color:red"> {{ Constants.B_player1_payoff }}</text>, <text style="color:blue">{{ Constants.B_player2_payoff }}</text></td>
                </tr>
            </table>
        </div>
    </div>

    <p>
        <em>In each cell, the amount to the left is the payoff for the Subordinate and to the right for the Leader.</em>

    <p>

</div>

{% endif %}