{% load otree %}

<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>
            You will be anonymously matched with another player. You will interact only via the computer
            and will not know which other student you are matched with. Each player will be randomly assigned a role:
            <b>Row</b> or <b>Column</b>. You will each simultaneously choose between four possible playing cards: Joker, Ace, Two, or
            Three. One player will then win 5 points while the other loses 5 points. Who wins and who loses depends on
            the combination of cards chosen. You will learn of the other player’s decision after both of you have made your choices.
            <br>
            <ul>
            <li>If both players select Joker, then Row wins </li>
            <li>If one player selects Joker, then Column wins</li>
            <li>If neither player selects Joker, then Column wins if the cards match and Row wins if they mismatch </li>
            </ul>
        </p>

        <table class="table table-md table-bordered">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="5" scope="col" class="text-center">Column<br></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="5" scope="row" class="align-middle text-center">Row</th>
                    <td></td>
                        <th>Joker</th>
                        <th>Ace</th>
                        <th>Two</th>
                        <th>Three</th>
                </tr>
                <tr>
                    <th>Joker</th>
                        <td>(5, -5)</td>
                        <td>(-5, 5)</td>
                        <td>(-5, 5)</td>
                        <td>(-5, 5)</td>
                </tr>
                <tr>
                    <th>Ace</th>
                        <td>(-5, 5)</td>
                        <td>(-5, 5)</td>
                        <td>(5, -5)</td>
                        <td>(5, -5)</td>
                </tr>
                <tr>
                    <th>Two</th>
                        <td>(-5, 5)</td>
                        <td>(5, -5)</td>
                        <td>(-5, 5)</td>
                        <td>(5, -5)</td>
                </tr>
                <tr>
                    <th>Three</th>
                        <td>(-5, 5)</td>
                        <td>(5, -5)</td>
                        <td>(5, -5)</td>
                        <td>(-5, 5)</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>