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

    <h3 class="panel-sub-heading">
        Earnings for Task 2
    </h3>
    <p>
    Your points won are as follows:
    </p>

    <table class="table">
        <tr>
            <th>Points Won</th>
            <th>How to win them</th>
        </tr>

            <tr>
                <td> {{ Constants.deletelink }} </td>
                <td>
                    For each link that you choose to delete, you will win {{ Constants.deletelink }}.
                </td>
            </tr>
            <tr>
                <td> {{ Constants.remainlink }} </td>
                <td>
                    When the round ends, for every link that is kept between you and other participants, you will win {{ Constants.remainlink }}.
                </td>
            </tr>
    </table>
    <p>At the end of Task 2, one of these rounds will be selected at random to determine your points won for Task 2.

    </p>
    <p>
    For example, suppose you won 100 points, 110 points and 200 points in Rounds 1, 2 and 3 respectively.
        Suppose the randomly-selected rounds was Round 2. Your total points earned for the Task 2 will be 110 points.
    </p>

    <p>
    The conversion rate from points to cash is:
    </p>
    <p>
    <b> 1 point = 1 cent</b>
    </p>
    <p>
    In this example, you have earned USD1.10 for Task 2.
    </p>

    <p>
    Please click "Next" for an example of the Experiment.
    </p>


{% block scripts %}

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


<table border="0">
  <tr>
    <th><button type="button" class="btn btn-primary" onclick="document.getElementById('block3').style.display='none'; document.getElementById('block2').style.display='block'">Previous</button></th>

    <script>
    function timedText3() {
        var x = document.getElementById("next_button_3");
        var y = document.getElementById("wait_text_3");
        setTimeout(function(){ x.style.display='block'; y.style.display='none' }, 15000);
    }
    </script>

    <th><button id="next_button_3" type="button" class="btn btn-primary" style="display:none" onclick="timedText4(); document.getElementById('block3').style.display='none'; document.getElementById('block4').style.display='block'">Next</button></th>
  </tr>
</table>

{% endblock %}