{% 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 payment opportunity will be explained, 
            which depends on guessing the average of the three numbers.
        </p>
        
        <p>
            You will make a guess about the average.
            {% if group.r_aux_g3 == 1 %}  The other team members will do the same. 
            Your guess may become visible to them later. 
            {% else %}
            Your guess may become visible to the other team members later.
            {% endif %}
        </p>
           
        {% if group.r_aux_g3 == 1 %}
            <p>    
                The <b>guess</b> of one of the team members will then be <b>chosen randomly</b>. 
                If this guess is <b>within three (3) units</b> of the average your team will get a <b>payment of $6.00</b> 
                which will be equally <b>divided</b> among the three members (<b>$2.00 each</b>, including you). 
                Otherwise, your team will get nothing. 
            </p>
            
        {% else %}    
            <p>    
                If your guess is <b>within three (3) units</b> of the actual average, you will get a <b>payment of $2.00</b>, otherwise, you will get nothing. 
            </p>
        
        {% endif %}
    
        
        <p>
            Please click "Next" to make your guesses. 
        </p>
    </div>
    
    {% next_button %}

{% endblock %}