{% load staticfiles otree %}
{% load static %}

{% block content %}
    <h3 class="panel-sub-heading">
        Example
    </h3>
<p>
    Suppose you are Participant N and you are placed in this configuration:
</p>
    <img src="{% static "instructions/example1.PNG" %}" height="240" width="200"/>
<p>
    Suppose the round starts with Participant P's turn. As an example, Participant P decides not to delete any link. The configuration remains unchanged:
</p>
    <img src="{% static "instructions/example1.PNG" %}" height="240" width="200"/>
 <p>
    Suppose it is now your turn. As an example, suppose you decide to delete the link with Participant P. The configuration is now changed because you have deleted a link:
</p>
    <img src="{% static "instructions/example2.PNG" %}" height="240" width="200"/>
    <p>Suppose it is now Participant L's turn. As an example, Participant L decides not to delete any link. The configuration remains unchanged:</p>

    <img src="{% static "instructions/example2.PNG" %}" height="240" width="200"/>

    <p>Suppose it is now Participant K's turn. As an example, Participant K decide to delete the link with Participant P. This gives us the following configuration: </p>

    <img src="{% static "instructions/example3.PNG" %}" height="240" width="200"/>

    <p>Suppose it is now Participant U's turn. As an example, Participant U decide to delete the link with Participant L. This gives us the following configuration: </p>

    <img src="{% static "instructions/example4.PNG" %}" height="240" width="200"/>

    <p> Suppose that from this turn onwards, everybody decides not to delete any link, and therefore the round ends.</p>

    <p> These are the points that you won for the round: </p>

    <b>Participant N (You)</b>
    <table class="table">
        <tr>
            <th><i>Points from</i></th>
            <th><i>Amount of Points</i></th>
        </tr>

            <tr>
                <td> Deleting links with others </td>
                <td>
                    {{ Constants.deletelink }}
                </td>
            </tr>
            <tr>
                <td> Links kept at the end of the round </td>
                <td>
                    2 &times; {{ Constants.remainlink }} = 200 points
                </td>
            </tr>
             <tr>
                <td> Total Points </td>
                <td>
                    310 points
                </td>
            </tr>
    </table>

    <p>
    Notice that some of the participants have earned points solely by deleting links with others. An example is Participant U:
    </p>

    <b>Participant U</b>
    <table class="table">
        <tr>
            <th><i>Points from</i></th>
            <th><i>Amount of Points</i></th>
        </tr>

            <tr>
                <td> Deleting links with others </td>
                <td>
                    {{ Constants.deletelink }}
                </td>
            </tr>
            <tr>
                <td> Links kept at the end of the round </td>
                <td>
                    0 points
                </td>
            </tr>
             <tr>
                <td> Total Earnings </td>
                <td>
                    110 points
                </td>
            </tr>
    </table>

    <p>Notice also that some participants have earned points even without deleting any link. An example is Participant L: </p>

    <b>Participant L</b>
    <table class="table">
        <tr>
            <th><i>Points from</i></th>
            <th><i>Amount of Points</i></th>
        </tr>

            <tr>
                <td> Deleting links with others </td>
                <td>
                    0 points
                </td>
            </tr>
            <tr>
                <td> Links kept at the end of the round </td>
                <td>
                    2 &times; {{ Constants.remainlink }} = 200 points
                </td>
            </tr>
             <tr>
                <td> Total Earnings </td>
                <td>
                    200 points
                </td>
            </tr>
    </table>

<p>   It is not possible for participants to lose points. However, a participant may win zero points in a round. An example is Participant P:</p>


    <b>Participant P</b>
    <table class="table">
        <tr>
            <th><i>Points from</i></th>
            <th><i>Amount of Points</i></th>
        </tr>

            <tr>
                <td> Deleting links with others </td>
                <td>
                    0 points
                </td>
            </tr>
            <tr>
                <td> Links kept at the end of the round </td>
                <td>
                    0 points
                </td>
            </tr>
             <tr>
                <td> Total Earnings </td>
                <td>
                    0 points
                </td>
            </tr>
    </table>




    <p>
    Please click "Next" for a Quiz to test your understanding of the Experiment.
    </p>

    <div id="wait_text_4" style="display:block">The Next button will appear after 35 seconds on this page.</div>


    <table border="0">
  <tr>
    <th>
    <button type="button" class="btn btn-primary" onclick="document.getElementById('block4').style.display='none'; document.getElementById('block3').style.display='block'">Previous</button>
    <script>
    function timedText4() {
        var x = document.getElementById("next_button_4");
        var y = document.getElementById("wait_text_4");
        setTimeout(function(){ x.style.display='block'; y.style.display='none' }, 35000);
    }
    </script>

    </th>
      <th>
          <div id="next_button_4" style="display:none">{% next_button %}</div>
    </th>
  </tr>
</table>

{% endblock %}