{% 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;
    }
    p.dem {
      color: red;
    }
    p.rep {
      color: blue;
    }
</style>

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

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


<div class="wrapper instructions">
    <P>
        In this part of the study, there are <b>four payment opportunities</b>,
        out of which, one will be <b>randomly selected for payment</b> at the end of the study. 
    </P>

    <p>
        {% if player.r_aux_g2 >= 0.5 %} Each member of your 
        team, 
        including you, {% else %} 
        You and the other two participants {% endif %} will each get a 
        <b>random number between 0 and 100</b>. 
        Each number is equally likely. You will only see your number.<br>
    </p>

    <p>
        The <b>first payment opportunity</b> depends on the average of these three numbers.
        If the average is 
        {% if player.r_aux_g1 == 1 %} <b>larger than 54</b>, 
        {% elif player.r_aux_g1 == 2 %} <b>smaller than 46</b>, 
        {% else %} <b>an even number (a multiple of 2)</b>, 
        {% endif %} 
        {% if player.r_aux_g2 >= 0.5  %}
        you and your fellow <b>team members</b> will each get a <b>payment of $2.00</b>,
        {% else %}
        you will get a <b>payment of $2.00</b>,
        {% endif %} otherwise nothing ($0.00).<br>
    </p>    

    <p>
        Please click "Next" to continue.
    </p>

</div>

    {% next_button %}

{% endblock %}