{{ block title }}
    Practice Round
{{ endblock }}
{% block styles %}
   <style>
      input[type=radio] {
        transform: scale(1.8);
        margin:10px;
      }
   </style>
{% endblock %}
{{ block content }}
<div class="card m-3">
    <div class="card-header">
        <h3>How to Play</h3>
    </div>
    <div class="card-body" id="guide">
        <p>
            You can see ten radio buttons in the gray area.<br>
            The computer will draw a number from the choices of former participants.<br>
            With your number and the drawn number, a target number is compute folloing:<br>
            <span style="color: red;margin-top: 20pt;margin-bottom: 20pt;">target number = 0.9 * (your number + the drawn number)/2</span><br>
            If your number is closer to the target than the drawn number is, you win and get a payoff of {{ Constants.win_payoff }}.<br>
            If the game ended in a tie, you get 5 game points.<br>
            Choose a number and click "Next".
        </p>
    </div>
    <!-- <div class="card-footer">
        <button id="got_it" type="button" class="btn btn-info" onclick="liveSend('got_it')">Got it</button>
    </div> -->
</div>

<p>
    Choose a number
</p>
<div class="card bg-light m-3">
    <div class="card-body">
    <div class="grid" id='choices'></div>
    {{ formfield_errors 'number' }}
</div>
</div>

<style>
    p {font-size: 18px;}
    .card {background-color: lightyellow;}
</style>

<script>
    let choices = document.getElementById('choices');
    for (let i = 1; i < 11; i++) {
        var rd = document.createElement("div");
        rd.innerHTML = "<input type='radio' name='number' value='"
        +i+"' id='"
        +i+"'><label for='choice-10'>"+i+"</label>";
        choices.appendChild(rd);
    }
</script>

    {{ next_button }}

{{ endblock }}