{% load otree %}

<div class="card bg-light m-3">
    <div class="card-body">

    <h3>
        Instructions
    </h3>

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

    <p>
        これは１対１の取引です。<br>
        同じ相手と再度取引を行うことはありません。<br>
        各プレイヤーは<b>"P"</b>か、<b>"Q"</b>のいずれかを選択します。<br>
        そして両者の選択の組み合わせによって両者の獲得ポイントが決まります。
        具体的には下表のように決まります。
    </p>
    <p>それぞれのセルにおいて、<b>左側に示されている数字があなたが得るポイント</b>で、
        <b>右側に示されている数字が相手が得るポイント</b>です。<br>
        （例）あなたが"Q"、相手が"P"を選択した場合、
        あなたは100ポイントを得て、相手は50ポイントを失います（表の左下のセル参照）。
    </p>

    <table class='table table-bordered text-center'
           style='width: auto; margin: auto'>
        <tr>
            <th colspan=2 rowspan=2></th>
            <th colspan=2>相手</th>
        </tr>
        <tr>
            <th>P</th>
            <th>Q</th>
        </tr>
        <tr>
            <th rowspan=2><span style="transform: rotate(-90deg);">あなた</span></th>
            <th>P</th>
            <td>50, 50</td>
            <td>-50, 100</td>
        </tr>
        <tr>
            <th>Q</th>
            <td>100, -50</td>
            <td>0, 0</td>
        </tr>
    </table>

</div>
</div>