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

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="wrapper instructions">
            <div style="text-align: center">
                <p>
                    We now would like you to play an activity with <b>three other participants </b>.
                </p>
                <p>
                    This activity contains <b>four rounds</b>.
                </p>
            </div>
            <p>
                During each round, each participant in the activity submits a number between 0 and {{ Constants.guess_max }}. Single digit decimal numbers are allowed.
            </p>
            <p>
                The computer then calculates the average of the 4 proposed numbers, then multiplies this average by {{ treatment }}.
            </p>
            <p>
                This results in a <span style="color: red">target number </span>as shown below.<br>
                The member of the group whose proposed number is closest to the target number earns {{ Constants.jackpot }} credits.
            </p>
            <div style="position: relative">
                {% if player.treatment == '2/3' %}
                    <img src="{% static "guessing_game/guessing_two_third.png" %}"
                         width="80%" style="margin-right: auto; margin-left: auto; display: block">
                {% elif player.treatment == '1/3' %}
                    <img src="{% static "guessing_game/guessing_one_third.png" %}"
                         width="80%" style="margin-right: auto; margin-left: auto; display: block">
                {% elif player.treatment == '1/2' %}
                    <img src="{% static "guessing_game/guessing_one_half.png" %}"
                         width="80%" style="margin-right: auto; margin-left: auto; display: block">
                {% endif %}
            </div>
            <br>
            <p>
                After each round, when all participants have submitted their numbers, you will see a summary appear on the screen 
                indicating the average of the 4 numbers, the target number and whether or not you have won.
            </p>
            <p>
                The on-screen summary will be displayed for  {{ Constants.seconds_for_summary }} seconds and then you will start the next round by submitting a new number.
            </p>
            <p>When you are ready, please click on the "Start" button.</p>
        </div>

        <button class="otree-btn-next btn btn-primary">Start</button>
    </div>
{% endblock %}