{% load otree_tags staticfiles %}

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

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

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

    <p>
 
        In this study, you will be randomly and anonymously paired with another individual.
        In each round, your pairing will be randomly reassigned. Each of you simultaneously and privately chooses whether you want to play <strong>Up</strong>, <strong>Center</strong>, or <strong>Down</strong>.
        Your payoffs will be determined by the choices of both as illustrated in the example below:
    </p>
    <p><i>In each cell, the amount (in points) to the left is the payoff for you and to the right for the other individual. Please note that this is just a practice round and the payoffs will be different in the actual game.</i></p>

    <table class='table table-bordered text-center' style='width: auto; margin: auto'>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=3>The other individual</th>
        </tr>
        <tr>
            <th>Up</th>
      <th>Center</th>
      <th>Down</th>
        </tr>
        <tr>
            <th rowspan=3><span class=rotate90>You</span></th>
            <th>Up</th>
            <td>1, 2</td>
   <td>3, 4</td>
          <td>5, 6</td>
        </tr>
    <tr>
            <th>Center</th>
            <td>7, 8</td>
   <td>9, 10</td>         <td>11, 12</td>
        </tr>
      <tr>
            <th>Down</th>
            <td>13, 14</td>
   <td>15, 16</td>         <td>17, 18</td>
        </tr>
    </table>

</div>