{% 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, you will be asked to make an investment decision for yourself.</p>

        <p>You are given 1000 cents ($10) to invest. You must allocate the full 1,000 cents between two alternatives described below:</p>

        <ul>
            <li>
                <strong>Alternative 1 – Safe Investment:</strong><br>
                This option guarantees full repayment. Every cent you invest in Alternative 1 is guaranteed to be kept by you.
        </ul>

        <ul>
            <li>
                <strong>Alternative 2 – Risky Investment:</strong><br>
                This option introduces risk and the possibility of a higher return. Any amount you invest in Alternative 2 will be subject to the following rules: <strong>one chip</strong> will be randomly drawn from a <strong>new</strong> bag that contains exactly <strong>3 chips</strong>: <strong>1 <span style="color:red;">red</span> chip</strong> and <strong>2 <span style="color:blue;">blue</span> chips</strong>.
                <ul>
                    <li>
                        If a <strong><span style="color:red;">red</span></strong> chip is drawn, then your risky investment will be <strong>multiplied by 2.5</strong> and you will receive that amount – <strong>1 in 3 chance (33%)</strong>.
                    </li>
                    <li>
                        If a <strong><span style="color:blue;">blue</span></strong> chip is drawn, then your risky investment will be <strong>lost entirely</strong> and you will receive nothing – <strong>2 in 3 chance (67%)</strong>.
                    </li>
                </ul>
            </li>
        </ul>
        <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>