{{ block title }}
Part II - Task #2 instructions
{{ endblock }}
{{ block content }}

<style>
    .tab {
        display: none;
        margin-bottom: 30px;
    }
    table {
        border: none;
    }
    table td {
    border: none;
    }
</style>

<div class="tab">
    <p>In this task, you will read a series of statements and
        will be asked to indicate whether you would engage in the actions described in these statements.
    </p>

    <p>In each statement, you can answer "Definitely no", "No", "Maybe", "Yes", or "Definitely yes", where it costs you
    </p>

    <ul>
        <li>
            5 points to answer "Definitely no"
        </li>
        <li>
            10 points to answer "No"
        </li>
        <li>
            15 points to answer "Maybe"
        </li>
        <li>
            20 points to answer "Yes"
        </li>
        <li>
            25 points to answer "Definitely yes"
        </li>
    </ul>
    <p>Please answer as truthfully as possible.</p>


    <p>You are endowed with {{ Constants.section2_endowment|cu }} for this part.
        <strong>After the end of the experiment, we will randomly choose 20 statements
            and use these to determine your earnings in Part II.</strong></p>
    <p>This means that, <strong>for each of the 20 selected statements</strong>, we will look at your response and calculate its cost
    as described above. We will then calculate the total cost of your answers in these 20 selected statements and
    subtract this amount from your endowment of {{ Constants.section2_endowment|cu }}.
    The remaining amount will be your earnings for this task. <strong>Your earnings from this task will therefore be
            between 750 and 1150 points depending on your answers in the 20 selected statements.</strong></p>

    <p><i>We will go through example statements on the next page.</i></p>

<p>
<center><button type="button" class="btn btn-primary btn-tab" data-offset="1"><strong>NEXT</strong></button></center>
</p>
</div>
<div class="tab">
    <p>The statements will be of the following form. </p>
    <br>

    <center><p><i>"I would help my parents with the household chores when I visit them."</i></p></center>
    <br>

    <p>You will be then asked to indicate how likely you are to engage in the action described in the statement.
        In this example, you will be indicating <strong>how likely you
            are to help</strong> your parents with the household chores when you visit them, where you can answer
        "Definitely no", "No", "Maybe", "Yes", "Definitely yes". </p>
    <br>
    <p>Another example statement is given below. </p>
    <br>

    <center><p><i>"I would refrain from gossiping about my friends."</i></p></center>
    <br>

    <p>
        In this example, you will be indicating <strong>how likely you
        are to <u>refrain from</u> gossiping</strong> about your friends, where you can answer
        "Definitely no", "No", "Maybe", "Yes", "Definitely yes".</p>
    <center>
        <br>
        <p>
            <button type="button" class="btn btn-primary btn-tab" data-offset="-1"><strong>BACK</strong></button>
            <button type="button" class="btn btn-primary btn-tab" data-offset="1"><strong>NEXT</strong></button>
        </p>
    </center>
</div>
<div class="tab">

    <p>Please answer the practice questions below to proceed.</p>

    <p>Suppose that a statement is chosen for your payment for this task. How many points does it cost you</p>
            <table class="table" style="width: 65%;">
                <tr>
                    <td style='text-align:left; vertical-align:middle'>if you answered "Definitely no" to that statement?</td>
                    <td><div class="frame" style="width: 100%; padding: 0px 0px 0px 0px; margin:0;">
                        {{ formfield player.ex1 }}
                    </div>
                    </td>
                </tr>
                <tr>
                    <td style='text-align:left; vertical-align:middle'>if you answered "Yes" to that statement?</td>
                    <td><div class="frame" style="width: 100%; padding: 0px 0px 0px 0px; margin:0;">
                        {{ formfield player.ex2 }}
                    </div>
                    </td>
                </tr>
            </table>

    <p><strong><i>Note: There will be some attention check questions throughout the task.
        Please make sure to answer them correctly.</i></strong></p>

    <center><button type="button" class="btn btn-primary btn-tab" data-offset="-1"><strong>BACK</strong></button>
        <button class="btn btn-primary"><strong>Proceed to Part II</strong></button></center>
    </p>
</div>

<script>

    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

{{ endblock }}