{{ block title }}
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>This situation involves <strong>the community task</strong>
        with three participants: <strong>citizen 1, citizen 2, and the judge.</strong></p>

    <p>Citizen 1 and citizen 2 each have {{ Constants.endowment_dictator|cu }}.
        The judge has {{ Constants.endowment_punisher|cu }}.</p>

    <p>Citizen 1 decides whether to give points to or steal points from citizen 2.
        They can give or steal a number of points between 0 and {{ Constants.endowment_dictator }}
        in a multiple of 50 (0, 50, 100, 150, 200, or 250 points).
        Citizen 2 makes no decisions.</p>

    <p>
        The judge then decides how many penalty points to charge citizen 1 <strong>to restore
        the justice in the community</strong>. Each penalty point charged to citizen 1 decreases
        citizen 1's earnings by {{ Constants.rate_punishment }}, and the judge's earnings by 1.</p>
    <p>So, if citizen 1 gave X points to citizen 2, the judge can
        charge a number of penalty points between 0 and
        ({{ Constants.endowment_dictator }}<span>&#8722;</span> X)/{{ Constants.rate_punishment }}.
        Or, if citizen 1 stole Z points from citizen 2, the judge can
        charge a number of penalty points between 0 and
        ({{ Constants.endowment_dictator }}+Z)/{{ Constants.rate_punishment }}.</p>

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

    <ul>
        <li style="text-decoration: underline;">
            If citizen 1 steals points from citizen 2:
        </li>
        <ul>

            <li class="hangingindent">Citizen 1's earnings = {{ Constants.endowment_dictator }}
                <span>&#43;</span> (number of points citizen 1 stole from citizen 2)
                <br>
                <span>&#8722;</span>  {{ Constants.rate_punishment }} <span>&#215;</span>
                (number of penalty points charged by the judge)</li>

            <li>Citizen 2's earnings = {{ Constants.endowment_dictator }}
                <span>&#8722;</span> (number of points citizen 1 stole from citizen 2)</li>

            <li>The judge's earnings = {{ Constants.endowment_punisher }}
                <span>&#8722;</span> (number of penalty points the judge charged to citizen 1)</li>
        </ul>
        <br>
        <li style="text-decoration: underline;">
            If citizen 1 gives points to citizen 2:
        </li>
        <ul>

            <li class="hangingindent">Citizen 1's earnings = {{ Constants.endowment_dictator }}
                <span>&#8722;</span> (number of points citizen 1 gave to citizen 2)
                <br>
                <span>&#8722;</span>  {{ Constants.rate_punishment }} <span>&#215;</span>
                (number of penalty points charged by the judge)</li>

            <li>Citizen 2's earnings = {{ Constants.endowment_dictator }}
                <span>&#43;</span> (number of points citizen 1 gave to citizen 2)</li>

            <li>The judge's earnings = {{ Constants.endowment_punisher }}
                <span>&#8722;</span> (number of penalty points the judge charged to citizen 1)</li>
        </ul>
    </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>
    <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>

</div>
<div class="tab">
    <p>Citizen 1 and citizen 2 each have {{ Constants.endowment_dictator|cu }}.
        The judge has {{ Constants.endowment_punisher|cu }}. Citizen 1 decides to give points to or steal points
        from citizen 2. The judge can then charge penalty points to citizen 1 to restore
        the justice in the community. Each penalty point decreases citizen 1's earnings by {{ Constants.rate_punishment|cu }}
        and the judge’s earnings by 1 point.</p>
    <br>
    <p>Please answer the practice questions below to proceed.</p>
    <ul>
        <li>Suppose citizen 1 steals 50 points from citizen 2. The judge charges 12 penalty points to citizen 1.
            <table class="table" style="width: 60%;">
                <tr>
                    <td style='text-align:left; vertical-align:middle'>How many points does citizen 1 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 citizen 2 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 the judge 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 citizen 1 steals 100 points from citizen 2. How many penalty points can the judge charge
            citizen 1 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>
</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 }}