{% load otree %}
<div class="card bg-light m-3">   
    <div class="card-body">
    
    <p>{{ formfields }}</p>
    
    <p>The table from the previous instructions is presented below:

        <div class="table-responsive">
            <table class="table table-bordered text-center align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Effort Level</th>
                        <th>Additional <span style="color:red;">Red</span> Chips Added</th>
                        <th>Total Number of <span style="color:red;">Red</span> Chips</th>
                        <th>Total Number of <span style="color:blue;">Blue</span> Chips</th>
                        <th>Total Cost of Effort</th>
                        <th>Probability of Drawing a <span style="color:red;">Red</span> Chip and Achieving a <span style="color:red;">High</span> Performance Outcome and Receiving the $10 Bonus</th>
                        <th>Probability of Drawing a <span style="color:blue;">Blue</span> Chip and Achieving a <span style="color:blue;">Low</span> Performance Outcome and <u>NOT</u> Receiving the $10 Bonus</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>1</td><td>6</td><td>14</td><td>$0.50</td><td>30%</td><td>70%</td></tr>
                    <tr><td>2</td><td>2</td><td>7</td><td>13</td><td>$1.00</td><td>35%</td><td>65%</td></tr>
                    <tr><td>3</td><td>3</td><td>8</td><td>12</td><td>$1.50</td><td>40%</td><td>60%</td></tr>
                    <tr><td>4</td><td>4</td><td>9</td><td>11</td><td>$2.00</td><td>45%</td><td>55%</td></tr>
                    <tr><td>5</td><td>5</td><td>10</td><td>10</td><td>$2.50</td><td>50%</td><td>50%</td></tr>
                    <tr><td>6</td><td>6</td><td>11</td><td>9</td><td>$3.00</td><td>55%</td><td>45%</td></tr>
                    <tr><td>7</td><td>7</td><td>12</td><td>8</td><td>$3.50</td><td>60%</td><td>40%</td></tr>
                    <tr><td>8</td><td>8</td><td>13</td><td>7</td><td>$4.00</td><td>65%</td><td>35%</td></tr>
                    <tr><td>9</td><td>9</td><td>14</td><td>6</td><td>$4.50</td><td>70%</td><td>30%</td></tr>
                    <tr><td>10</td><td>10</td><td>15</td><td>5</td><td>$5.00</td><td>75%</td><td>25%</td></tr>
                    <tr><td>11</td><td>11</td><td>16</td><td>4</td><td>$5.50</td><td>80%</td><td>20%</td></tr>
                    <tr><td>12</td><td>12</td><td>17</td><td>3</td><td>$6.00</td><td>85%</td><td>15%</td></tr>
                    <tr><td>13</td><td>13</td><td>18</td><td>2</td><td>$6.50</td><td>90%</td><td>10%</td></tr>
                </tbody>
            </table>
        </div>    
 
    </div>
</div>