{{ block title }}
Part I - Task #{{ Constants.sit }} instructions
{{ endblock }}
{{ block content }}

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

    .hangingindent {
      padding-left: 200px ;
      text-indent: -200px ;
    }
</style>

<div class="tab">
    <p>Participant A is given {{ Constants.endowment_dictator|cu }}.
        Participant B is given {{ Constants.endowment_not_dictator|cu }}.
        Participant C is given {{ Constants.endowment_punisher|cu }}.</p>

    <p>Participant A decides how many of their {{ Constants.endowment_dictator|cu }}
        they want to send to Participant B. They can send a number of points between 0 and {{ Constants.endowment_dictator }}
        in a multiple of 50 (0, 50, 100, ..., 450, or 500 points). Participant B makes no decisions.</p>

    <p>
        Participant C can then transfer deduction points to Participant A,
        based on Participant A's decision. Each deduction point transferred to Participant A
        decreases Participant A's remaining earnings by {{ Constants.rate_punishment|cu }}, and
        Participant C’s earnings by 1 point.</p>
    <p>
        So, if Participant A sends X points to Participant B and keeps (500 <span>&#8722;</span> X)
        points to themself, Participant C can choose a number
        of deduction points between 0 and (500 <span>&#8722;</span> X)/{{ Constants.rate_punishment }}.</p>

    <p><strong>Final earnings are calculated as follows:</strong></p>

    <ul>
        <li class="hangingindent">Participant A's earnings = {{ Constants.endowment_dictator }}
            <span>&#8722;</span> (number of points Participant A sent to Participant B)
            <br>
            <span>&#8722;</span> {{ Constants.rate_punishment }} <span>&#215;</span> (number of
            deduction points Participant C transferred to Participant A)</li>

        <li>Participant B's earnings = number of points Participant A sent to Participant B</li>

        <li>Participant C's earnings = {{ Constants.endowment_punisher }}
            <span>&#8722;</span> (number of deduction points Participant C transferred to Participant A)
        </li>
    </ul>
    <p>You will take part in this task for 3 rounds, once in each role. You will be matched
        with different participants in each round.</p>
    <i>This is the end of the instructions for this part. We will go through an example on the next page.</i><br>
    <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>Participant A is given {{ Constants.endowment_dictator|cu }},
        Participant B is given {{ Constants.endowment_not_dictator|cu }},
        Participant C is given {{ Constants.endowment_punisher|cu }}. Participant A decides
        how many of their {{ Constants.endowment_dictator|cu }} they want to send to Participant B.
        Participant C then decides how much of Participant A's remaining earnings to reduce.
        For each deduction point Participant C transfers, Participant C's earnings decrease by 1 point and
        Participant A's earnings decrease by {{ Constants.rate_punishment|cu }}.</p>

    <p>Please answer the practice questions below to proceed.</p>
    <ul>
        <li>Suppose Participant A sends 150 points to Participant B. Participant C transfers
            22 deduction points to Participant A.
            <table class="table" style="width: 60%;">
                <tr>
                    <td style='text-align:left; vertical-align:middle'>How many points does Participant A earn?</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'>How many points does Participant B earn?</td>
                    <td><div class="frame" style="width: 100%; padding: 0px 0px 0px 0px; margin:0;">
                        {{ formfield player.ex2 }}
                    </div>
                    </td>
                </tr>
                <tr>
                    <td style='text-align:left; vertical-align:middle'>How many points does Participant C earn?</td>
                    <td><div class="frame" style="width: 100%; padding: 0px 0px 0px 0px; margin:0;">
                        {{ formfield player.ex3 }}
                    </div>
                    </td>
                </tr>
            </table>
        </li>
        <li>Suppose Participant A sends 200 points to Participant B. How many deduction points can Participant C
            transfer to Participant A maximally?
            <div class="frame" style="width: 100%; padding: 0px 0px 0px 0px; margin:0;">
                {{ formfield player.ex4 }}
            </div>
        </li>
    </ul>

    <center><button type="button" class="btn btn-primary btn-tab" data-offset="-1"><strong>BACK</strong></button>
        <button class="btn btn-primary"><strong>NEXT</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 }}