{% load otree static %}

<div class="card bg-light instructions">
    <div class="card-body">

    <h3>
        Instructions
    </h3>

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

    <p>
        In this game, you will be randomly and anonymously paired with another
        participant in this classroom.
    </p>
        <p>
        The game is called prisoners' dilemma. Suppose police have caught you and another participate, two suspected bank robbers, only have enough evidence to imprison each for 1 year.
        The police question each in separate rooms, offer each the following deal:
        If you confess and implicate your partner, you go free.
        If you do not confess but your partner implicates you, you get 20 years in prison.
        If you both confess, each gets 8 years in prison.
    </p>

        <p>
        In summary, each of you simultaneously and privately chooses whether you want to Confess or Remain Silent.

        Your payoffs will be determined by the choices of both as below:
    </p>
    <p><i> In each cell, the amount to the left is the payoff for
        you and to the right for the other participant.</i></p>

    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=2>The Other Participant</th>
        </tr>
        <tr>
            <th>Confess</th>
            <th>Remain Silent</th>
        </tr>
        <tr>
            <th rowspan=2><span class="rotate90">You</span></th>
            <th>Confess</th>
            <td>-8, -8</td>
            <td>0,-20</td>

        </tr>
        <tr>
            <th>Remain Silent</th>
            <td>-20,0</td>
            <td>-1,-1</td>
        </tr>
    </table>

</div>
</div>