{% 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>In this stage of the study, you will read a performance contract and then make a decision about the level of effort you wish to expend under that contract. The effort level you choose will affect the probability of achieving a high or low performance outcome under this contract.</p>

        <p>At the end of the study today, your performance outcome will be determined by randomly drawing of <strong>one chip</strong> from a bag that <strong>always</strong> contains <strong>20 chips</strong>. Initially, the bag contains:</p>
        <ul>
            <li><strong>5 <span style="color:red;">red</span> chips</strong> – If a <strong><span style="color:red;">red</span></strong> chip is drawn, your performance outcome will be <strong><span style="color:red;">high</span></strong>.</li>
            <li><strong>15 <span style="color:blue;">blue</span> chips</strong> – If a <strong><span style="color:blue;">blue</span></strong> chip is drawn, your performance outcome will be <strong><span style="color:blue;">low</span></strong>.</li>
        </ul>

        <p>Your chosen effort level will determine how many <strong>additional <span style="color:red;">red</span> chips</strong> are placed into the bag. Any additional <strong><span style="color:red;">red</span></strong> chips placed into the bag will replace existing <strong><span style="color:blue;">blue</span></strong> chips. Because the total number of chips in the bag will always be 20 chips, the higher effort level you choose, the higher the likelihood you will achieve a <strong><span style="color:red;">high</span></strong> performance outcome. Here is why:</p>

        <div style="margin-left: 2em;">
            <p>
                <strong>Higher</strong> Effort<br>
                = <strong>More <span style="color:red;">red</span></strong> chips <strong>added</strong> to the bag <strong>replacing</strong> existing <strong><span style="color:blue;">blue</span></strong> chips<br>
                = <strong>Higher</strong> likelihood of drawing a <strong><span style="color:red;">red</span></strong> chip<br>
                = <strong>Higher</strong> likelihood of achieving a <span style="color:red;"><strong>high</strong></span> performance outcome.
            </p>
        </div>

        <p>But note, the higher the effort level you choose, <strong>the greater personal cost to you</strong>. Please read the performance contract carefully before making your decision.</p>
        <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>