{% extends "global/Page.html" %}
{% load otree %}

{% block content %}

<div class="card bg-light m-3" style="max-width: 650px; margin: auto;">
    <div class="card-body">

        {% if curcond == 'mast' %}

            <h3><strong>Task Instructions</strong></h3>
            <hr>
            <p>
                <ul>
                    <li>
                        <p>
                            The "trials" will be between <strong>45 to 90 seconds</strong>.
                        </p>
                    </li>
                    <li>
                        <p>
                            The computer will let you know when the session is over.
                        </p>
                    </li>
                    <li>
                        <p> 
                            During the periods in which you <i>do not</i>
                        have to hold your hand in water, you will be asked 
                        to count backwards <u>as fast and accurate as 
                            possible</u> in steps of <strong>17</strong>
                            starting at <strong>2043 or the number correctly mentioned last by you.</strong>
                        </p>
                        <p>
                            - Example: counting backwards in steps of 2 starting 
                            at 50 would imply: 50 – 48 – 46 – 44 – 42 – 40 – …
                        </p>
                    </li>
                    <li>
                        <p>
                            Whenever you make an error, you will be told so by the experimenter 
                            and you will have to start over at 2043.
                        </p>
                    </li>
                    <li>
                        <p>
                            Please start counting <u>immediately</u> after you 
                            see this instruction on the screen:
                        </p>
                    </li>
                </ul>
            </p>
            <p style="font-size: 1.5rem; color: red; font-weight: bold; text-align: center;">
                Count backwards in steps of <strong>17</strong> from <strong>2043</strong>.
            </p>
            <p>
                If you've finished the instructions above and do not
                have questions, press the Next button.
            </p>
        {% elif curcond == 'control' %}

            <h3><strong>Task Instructions</strong></h3>
            <hr>
            <p>
                <ul>
                    <li>
                        <p>
                            The "trials" will be between <strong>45 to 90 seconds</strong>.
                        </p>
                    </li>
                    <li>
                        <p>
                            The computer will let you know when the session is over.
                        </p>
                    </li>
                    <li>
                        <p> 
                            During the periods in which you <i>do not</i>
                            have to hold your hand in water, you will be asked 
                            to simply count from <strong>1</strong> to <strong>25
                            or the number correctly mentioned last by you</strong>,
                            and you can <u>choose the speed at which you count</u>.
                        </p>
                        <p>
                            - Example: 1 – 2 – 3 – 4 – 5 – 6 – …
                        </p>
                    </li>
                    <li>
                        <p>
                            Whenever you arrive at 25, please just start over at 1.
                        </p>
                    </li>
                    <li>
                        <p>
                            Please start counting <u>immediately</u> after you 
                            see this instruction on the screen:
                        </p>
                    </li>
                </ul>
            </p>
            <p style="font-size: 1.5rem; color: red; font-weight: bold; text-align: center;">
                Count from <strong>1</strong> to <strong>25</strong>.
            </p>
            <p>
                If you've finished the instructions above and do not
                have questions, press the Next button.
            </p>
        {% endif %}

    </div>
</div>

{% next_button %}

{% endblock %}