{{ block title }}
    <span style="color: red;">練習回合：鎖定階段</span>
{{ endblock }}
{{ block content }}
<div class="card m-3">
    <div class="card-header">
        <h3>實驗指引</h3>
    </div>
    <div class="card-body" id="guide">
        <p>
            在結果呈現之後，你會被問到是否在接下來的所有回合你都會選擇和現在相同的整數，並鎖定此整數為你接下來所有回合的唯一選擇。<br>
            如果你選擇鎖定，你將無法在接下來的回合中變更你所選擇的整數。<br>
            作為回報，從你選擇點擊「是」的那一輪開始，你將在每一回合獲得額外的 1 法幣。
        </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>

<div class="card bg-light m-3">
    <div class="card-body">
        
        <p>
            你剛剛選擇的是: {{ player.number }}
        </p>
        <p>
            你是否要鎖定 {{ player.number }} 作為你接下來所有回合的選擇?
        </p>
        <div id="voting" style="width:100%;height:180px; float:left; border:3px double; padding: 5px; margin:10px 0px">
            <p>
                <span style="color:red">請注意:</span><br>
                若選擇「是」，<br>
                你將無法在接下來的所有回合選擇其它整數。
            </p>
            <div>
                <!-- set checked="checked" so No is default -->
                <input class="form-check-input" type="radio" id="No" name="commit" checked="checked" style="font-size: 20px" required>
                <label style="font-size: 18px;">No</label>
            </div>
            <div>
                <input class="form-check-input" type="radio" id="Yes" name="commit" style="font-size: 20px" required>
                <label style="font-size: 18px;">Yes</label>
            </div>
        </div>
        
    </div>
</div>
    {{ formfield_errors 'commit' }}

{{ next_button }}

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

<script>
    document.getElementById('No').value = -1;
    document.getElementById('Yes').value = js_vars.number;
</script>

{{ endblock }}