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

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


{% block title %}
    Part 3 - 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 === 25) {
                $('.otree-timer').show();
            }
        });
    });
</script>

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

<div class="wrapper instructions">
    <p>  
    In the third part of this study, 
    {% if group.r_aux_g2 >= 0.5  %}
    the members of your team, including you, 
    {% else %}
    you and the other two participants
    {% endif %}
    will have <b>different</b> roles: <b>Role A</b> or <b>Role B</b>. There will be <b>one</b>
    {% if group.r_aux_g2 >= 0.5  %}
    team member
    {% else %}
    participant
    {% endif %} 
    <b>in Role A</b> and <b>two in Role B</b>. 
    </p>
    <p>
        Role A gets 73 cents, and then decides how many cents to send to be equally divided among the two 
        {% if group.r_aux_g2 >= 0.5  %}
        team members 
        {% else %}
        participants
        {% endif %}
        in role B. Role A keeps the remainder. 
        </p>
    
    <p>
    Please click "Next" to continue. 
    </p>  
</div>
    
    {% next_button %}


{% endblock %}