{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
    <link href="{% static 'global/empty.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}
    Part 2 - Instructions
{% endblock %}

{% block content %}


<style>
    .otree-timer {
        display: none;
    }
    p.time {
      background-color: white;
      color: grey;
      text-align: right;
    }
</style>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 15) {
                $('.otree-timer').show();
            }
        });
    });
</script>

    <p class="time">
        Time: {{ time }} seconds. 
    </p>


    <div class="wrapper instructions"> 

        <p>
            Now that you have your number, the second and third payment opportunities will be explained. 
            Both payment opportunities depend on guessing the average of the three numbers.
        </p>
        
        <p>
            You will make two guesses about the average, one <b>private</b> and one <b>public</b>. 
            For each of the guesses this rule will apply: If your guess is <b>within three (3) units of the average</b>,
             you will <b>get a payment of $2.00</b>, otherwise, you will get nothing.
        </p>
        
        <p>
            The <b>private</b> guess will <b>only be visible to you</b>.   
        </p>
        <p>
            The <b>public</b> guess may become <b>visible to  
            {% if group.r_aux_g2 >= 0.5  %}
            your fellow team members
            {% else %}
            the other two participants
            {% endif %}</b>
            later. 
        </p>
        
    
        <p>
            Please click "Next" to make your guesses. 
        </p>
    </div>
    

    {% next_button %}

{% endblock %}