prisoner/instructions.html

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

    <h3>Prisoner’s Dilemma — Rules</h3>
    <ul>
      <li>You are randomly paired; choices are made simultaneously and privately.</li>
      <li>Choose between <strong>Choice A</strong> and <strong>Choice B</strong>.</li>
      <li>Payoffs depend on both choices according to the matrix below.</li>
      <li>One shot (no repeated rounds in this demo).</li>
    </ul>
    <p><i>In each cell, the amount to the left is your payoff; to the right is the other participant’s.</i></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>Choice A</th>
            <th>Choice B</th>
        </tr>
        <tr>
            <th rowspan=2><span style="transform: rotate(-90deg);">You</span></th>
            <th>Choice A</th>
            <td>{{ C.PAYOFF_B }}, {{ C.PAYOFF_B }}</td>
            <td>{{ C.PAYOFF_D }}, {{ C.PAYOFF_A }}</td>
        </tr>
        <tr>
            <th>Choice B</th>
            <td>{{ C.PAYOFF_A }}, {{ C.PAYOFF_D }}</td>
            <td>{{ C.PAYOFF_C }}, {{ C.PAYOFF_C }}</td>
        </tr>
    </table>

</div>
</div>