{{ 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 B is given 0 tokens.
        Participant C is given {{ Constants.num_tokens }} tokens.
        Participant A decides whether to re-allocate the
        {{ Constants.num_tokens }} tokens by taking tokens from Participant C and giving them to Participant B.</p>
    <p>
        For each token Participant A re-allocates, Participant C
        loses 1 token and Participant B earns 1 token.
        Each token is worth {{ Constants.token_b }} points to Participant B
        and {{ Constants.token_c|cu }} to Participant C.
        Participants B and C make no decisions.
    </p>
    <p>
        Participant A earns  {{ Constants.payoff_a|cu }} from this task, 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 tokens Participant A
            takes from Participant C
            to give to Participant B)
        </li>
        <li>Participant C's earnings = {{ Constants.num_tokens }}
            <span>&#8722;</span> (number of tokens Participant A takes from Participant C to give to Participant B)
        </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 B is given 0 tokens.
        Participant C is given {{ Constants.num_tokens }} tokens.
        Participant A decides how many tokens to take
        from Participant C and give to Participant B.
        Each token is worth {{ Constants.token_b }} points to Participant B and
        {{ Constants.token_c }} point to Participant C. Participant A earns  {{ Constants.payoff_a|cu }}
        independent of their choice.
    </p>
    <p>Please answer the practice questions below to proceed.</p>
    <ul>
        <li>Suppose Participant A takes 125 tokens from Participant C and give these to Participant B.
            <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>
    </ul>

    <p>As you can see, tokens are worth more to Participant C than to Participant B.
        <strong>Therefore, if Participant A wants to make a more generous and efficient allocation of the tokens,
            they should not take points from Participant C.</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 }}