{% load staticfiles otree %}

    <h3 class="panel-sub-heading">
        Experiment Set-up
    </h3>

    <p>
    In this Experiment, you will be given the task three different times, which we will call rounds.
    </p>

    <p>
    For each round, you will be interacting with other Participants. Each participant is assigned to a different letter.
    As you can see below, each participant may be connected to other participants by a link.
    </p>

<p>
    For example, if you are Participant N in this setting,
</p>
    <img src="{% static "instructions/inst.PNG" %}" height="280" width="240"/>
<p>
    your position in this configuration is such that you are linked to Participants P and L.
</p>

    <p>Each participant will take turns to make a decision in the Experiment separately. </p>

    <p>
    During your turn, you can make one of the following two possible decisions:
    <ul>
    <li>Delete one and only one of the links with a participant that is connected to you</li>
    <li>Do not delete any link</li>
    </ul>

    </p>

    <p>
    The sequence of turns is randomized. In other words, the timing of your turn relative to others is randomly decided.
        However, between your turn and your next turn, every other participants will have had a chance to make a choice.
    </p>

    <p>
    You have 60 seconds to make your decision. If you do not make your decision within 60 seconds, your turn will be skipped.
        If you do not make a decision, the default decision that you do not delete any link will be implemented.
    </p>
    <p>
    The following page explains how your earnings will depend on the decisions you make.
    </p>
    <p>
    After your turn, the other participants will get to make the same decisions based on the new configuration.
    </p>

    <p>
    The round ends when all participants consecutively decide not to delete any links, or if there are no links remaining in the configuration.
    </p>

    <p>
    Please click "Next" for more instructions about the Task.
    </p>


{% block scripts %}

    <div id="wait_text_1" style="display:block">The Next button will appear after 20 seconds on this page.</div>
    <button id="next_button_1" type="button" class="btn btn-primary" style="display:none" onclick="
    timedText2(); document.getElementById('block1').style.display='none'; document.getElementById('block2').style.display='block'">Next</button>
    <script>
    function timedText1() {
        var x = document.getElementById("next_button_1");
        var y = document.getElementById("wait_text_1");
        setTimeout(function(){ x.style.display='block'; y.style.display='none' }, 20000);
    }
    timedText1();
    </script>

{% endblock %}