{% load otree %}
<div class="card bg-light m-3">   
    <div class="card-body">
    
    <p>To ensure that you understand the earlier instructions, please answer a few questions. You will not be able to proceed to the next part unless you answer these questions correctly.</p>
    
    <button type="button" onclick="toggleContent()">Click to View the Previous Instructions Again</button>
    <div id="extraContent" style="display: none; margin-top: 10px;">
        <p>
        ********************************************************************************
        </p>
    <p><strong>You are currently under a performance contract with the following terms:</strong></p>
    
    <p>You will receive a <strong>base wage of $10</strong> with the possibility of receiving a <strong>$10 bonus</strong>. As a result, the <strong>maximum</strong> amount of earnings for this stage is <strong>$20</strong> ($10 base wage + $10 bonus). To receive this bonus, you must achieve a <strong><span style="color:red;">high</span></strong> performance outcome (rather than a <strong><span style="color:blue;">low</span></strong> performance outcome).</p>
    
    <p>Recall:
    <br>At the end of the study, your performance outcome will be determined by drawing <strong>one chip</strong> at random from a bag containing <strong>20 chips</strong>. You will achieve a <strong><span style="color:red;">high</span></strong> performance outcome if a <strong><span style="color:red;">red</span></strong> chip is drawn. Before your effort choice, you have a <strong>25%</strong> chance of drawing a <strong><span style="color:red;">red</span></strong> chip, achieving a <strong><span style="color:red;">high</span></strong> performance outcome and receiving the <strong>$10 bonus</strong>. 
    </p>
    
    <p>In this stage you will be asked to choose your effort level under the performance contract. The <strong>higher</strong> the effort level you choose, the <strong>more additional <span style="color:red;">red</span> chips</strong> will be added to the bag to <strong>replace <span style="color:blue;">blue</span> chips</strong>, the <strong>higher</strong> the likelihood you will <strong>receive the bonus</strong>.</p>    
    
    <p>However, effort is <strong>costly</strong>. The <strong>more additional <span style="color:red;">red</span> chips</strong> you want in the bag (i.e., the higher your effort level), the more you must pay in effort costs, which reduces your total earnings. The table below summarizes the effect from each effort level:</p>    

        <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>     
        <p>
        ********************************************************************************
        </p>    
    </div>
    <script>
        function toggleContent() {
            const content = document.getElementById("extraContent");
            const button = event.target;
            if (content.style.display === "none") {
                content.style.display = "block";
                button.textContent = "Click to Hide the Previous Instructions";
            } else {
                content.style.display = "none";
                button.textContent = "Click to View the Previous Instructions Again";
            }
        }
    </script>
    
    <p>{{ formfields }}</p>
    
    </div>
</div>