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

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

<div class="tab">

    <p>Participant A is assigned the task of distributing {{Constants.num_tokens|cu}} between
        Participant B and Participant C. Every point Participant A sends to
        Participant B is multiplied by {{ Constants.token_b }}.
        Every point Participant A sends to Participant C is multiplied by {{ Constants.token_c }}.
        Participants B and C make no decisions.
    </p>
    <p>Participant A has to divide all {{Constants.num_tokens|cu}} between Participants B and C,
        and cannot keep any points to themself.
        Participant A earns  {{ Constants.payoff_a|cu }}, independent of their choice.</p>
    <p><strong>Final earnings are calculated as follows:</strong></p>

    <ul>
        <li>Participant A's earnings = {{ Constants.payoff_a }}
        </li>
        <li>Participant B's earnings = {{ Constants.token_b }} <span>&#215;</span> (number of points Participant A sends to Participant B)
        </li>
        <li>Participant C's earnings = {{ Constants.token_c }} <span>&#215;</span> (number of points Participant A sends to Participant C)
        </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 decides how to distribute
        {{Constants.num_tokens|cu}} between Participant B and Participant C.
        Every point sent to Participant B is multiplied by {{ Constants.token_b }}.
        Every point sent to Participant C is multiplied by {{ Constants.token_c }}.
        Participant A earns {{ Constants.payoff_a|cu }} independent of their decision.</p>
    <p>Please answer the practice questions below to proceed.</p>
    <ul>
        <li>Suppose Participant A sends 20 points to Participant B and 80 points to Participant C.
            <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.ex4 }}
                    </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.ex5 }}
                    </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.ex6 }}
                    </div>
                    </td>
                </tr>
            </table>
    </ul>

    <p>As you can see above, Participant C needs to receive a higher
        amount of points than Participant B for the two participants to
        earn equitable amounts of points. <strong>Therefore, if Participant A wants to be more fair,
            they should send more points to Participant C than to Participant B.</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>NEXT</strong></button></center>
</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 }}