{% 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 === 15) {
                $('.otree-timer').show();
            }
        });
    });
</script>

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


<div class="wrapper instructions">
    <P>
        In this part of the study, you will <b>make four decisions</b>. 
        Each decision is associated with a potential payment opportunity. 
        <b>One of the four decisions will be randomly selected for payment</b>
        at the end of the study.
    </P>

    <p>
        {% if group.r_aux_g2 >= 0.5 %} Each member of your
        {% if pet == 0 %} 
        <span style="color:red">R team</span>, 
        {% elif pet == 1 %} 
        <span style="color:blue">D team</span>, 
        {% endif %}
        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>
        <br>
    </p>

    <p>
        The <b>first payment opportunity</b> depends on the average of these three numbers.
        Here are the rules that apply to 
        {% if group.r_aux_g2 >= 0.5 %} your team: {% else %} 
        you and the other two participants: 
        {% endif %} 
        <br>
    </p>
    <p  style="margin-left: 40px"  >
        If the average is {% if group.r_aux_g1 >= 0.5 %} below {% else %} above {% endif %} 50, 
        {% if group.r_aux_g2 >= 0.5  %}
        you and your fellow 
            {% if pet == 0 %} 
            <span style="color:red">R team</span>
            {% elif pet == 1 %} 
            <span style="color:blue">D team</span> 
            {% endif %}
        members will each get a payment of $0.
        {% else %}
        you will get a payment of $0.
        {% endif %}<br>
        If the average is between {% if group.r_aux_g1 >= 0.5 %} 50 and 70, {% else %} 30 and 50, {% endif %}
        {% if group.r_aux_g2 >= 0.5  %}
        you and your fellow 
            {% if pet == 0 %} 
            <span style="color:red">R team</span>
            {% elif pet == 1 %} 
            <span style="color:blue">D team</span>
            {% endif %}
        members will each get a payment of $1.
        {% else %}
        you will get a payment of $1.
        {% endif %}<br> 
        If the average is 
        {% if group.r_aux_g1 >= 0.5 %} larger than 70, {% else %} smaller than 30, {% endif %} 
        {% if group.r_aux_g2 >= 0.5  %}
        you and your fellow 
            {% if pet == 0 %} 
            <span style="color:red">R team</span>
            {% elif pet == 1 %} 
            <span style="color:blue">D team</span>
            {% endif %}
        members will each get a payment of $2.
        {% else %}
        you will get a payment of $2.
        {% endif %}<br>
    </p>

    <p>
        The second, third and fourth payment opportunities will be explained later.
    </p>

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

</div>

    {% next_button %}

{% endblock %}