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

{% block title %}

{% endblock %}

{% block content %}
    <p>
        You will now play against <b> {{ group_size }} other people</b>.
    </p>
    <div class="explain_block" style="background-color: #eeeeee; padding: 10px">
        <i>The rules are:</i> <br>
        Every player enters a number between 0 an 100. The average of all submitted numbers will then be calculated.
        The player whose number is closest to 2/3 of this average wins. <br>
        In the case where more than one player is closest to 2/3 of the average
        the winner is determined randomly among those who are closest.
    </div>

    {% formfield player.group_submission %}

    <input type="hidden" id="id_group_human_submitted" name="group_human_submitted" value="0">
    {% next_button %}

        <script>
        next_button = document.getElementsByClassName('otree-btn-next')[0];
        human_input = document.getElementById('id_group_human_submitted');

        next_button.onclick = function(){
            human_input.value = 1
        };

        // Hide the timer:
        otree_timer = document.getElementsByClassName('otree-timer')[0];
        window.onload = function() {
            otree_timer.style.display = 'none';
        }

    </script>


{% endblock %}