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

{% block title %}

{% endblock %}

{% block content %}
    <p>
        You will now play against a <b>computer opponent</b> who will always submit the strategically optimal number.
    </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.computer_submission %}
    <input type="hidden" id="id_computer_human_submitted" name="computer_human_submitted" value="0">

    {% next_button %}

    <script>
        next_button = document.getElementsByClassName('otree-btn-next')[0];
        human_input = document.getElementById('id_computer_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 %}