{{ block title }}
<span style="color: red;">練習回合</span>
{{ endblock }}

{{ block content }}
<link rel="stylesheet" href="{{ static 'CSS/background.css' }}">
<style>
    input[type=radio] {
      transform: scale(1.8);
      margin:10px;
    }
    p {font-size: 18px;}
    .card {background-color: lightyellow;}
</style>

<div class="card m-3">
    <div class="card-header">
        <h3>實驗指引</h3>
    </div>
    <div class="card-body" id="guide">
        <p>
            你可以在下方灰色區塊中看到十個單選按鈕。<br>
            電腦將從以前的參與者的選擇中抽出一個整數。<br>
            並根據你選擇的整數以及電腦抽出來的整數計算一個目標數值，其計算方式如下:<br>
            <span style="color: red;margin-top: 20pt;margin-bottom: 20pt;">目標數值 = 0.9 * (你選的數 + 抽出的數)/2</span><br>
            如果你選的數比抽出的數更接近目標數值的話， 你將獲得 {{ Constants.win_payoff }}。<br>
            如果兩數相同則平手, 你會獲得 5 法幣。<br>
            請選擇一個整數並按下「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>
    選擇一個整數
</p>
<div class="card bg-light m-3">
    <div class="card-body">
    <div class="grid" id='choices'></div>
    {{ formfield_errors 'number' }}
</div>
</div>


<script>
    let choices = document.getElementById('choices');
    for (let i = 0; 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 }}