{{ block title }}
    正式回合
{{ endblock }}


{{ block content }}
<p> <span style="color: red;" id="demo"></span></p>

<style>
    input[type=radio] {
      transform: scale(1.8);
      margin:10px;
    }
    p {font-size: 18px;}
</style>

<p>
    選擇一個整數
</p>
<div class="card bg-light m-3">
    <div class="card-body">
        <div class="grid" id="choices"></div>
        {{ formfield_errors 'number' }}
    </div>
</div>

<input type="hidden" name="start_timestamp" id="start_timestamp" />
<input type="hidden" name="end_timestamp" id="end_timestamp" />

<script>
    let choices = document.getElementById('choices');
    if (js_vars.commit == -1){
        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);
        }
    } else {
        var rd = document.createElement("div");
            let i = js_vars.commit;
            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>

<button id="next_button" class="otree-btn-next btn btn-primary" > Next </button>

<script>
      var id_currentTime = document.getElementById("choices");
      id_currentTime.onclick = function() {
      document.getElementById("start_timestamp").value=performance.now();

  };
      var Next = document.getElementById("next_button");
      Next.onclick = function() {
          document.getElementById("end_timestamp").value=performance.now();
      };
</script>

<script type="text/javascript">

    // window.addEventListener('beforeunload', function (e) {
    //         e.preventDefault();
    //         e.returnValue = '';
    //         var n = event.timeStamp;
    //         document.getElementById("demo").innerHTML = "You will lose your payment if you unload the browser during experiment.";
    //     });

    // var warning = function(e) { 
    //     e.preventDefault();
    //     e.returnValue = '';
    //     var n = event.timeStamp;
    //     document.getElementById("demo").innerHTML = "You will lose your payment if you unload the browser during experiment.";
    // };

    // window.addEventListener('beforeunload', warning)

    // document.getElementById('form').addEventListener("submit", function() {
    //     windo.removeEventListener('beforeunload', warning)
    // });

    // window.addEventListener("submit", function() {
    //     windo.removeEventListener('beforeunload', warning);
    // });

    // Method 1
    window.onbeforeunload = function(e){
        document.getElementById("demo").innerHTML = "注意，如果你在實驗期間刷新或關閉瀏覽器，你將失去所有報酬。";
        return 'Are you sure you want to leave?';
    };


    $('form').submit(function () {
        window.onbeforeunload = null;
    });


    // Method 2
    // $(window).bind('beforeunload',function(){
    //     return 'Are you sure you want to leave?';
    //     document.getElementById("demo").innerHTML = "You will lose your payment if you unload the browser during experiment.";

    // });

    // $('form').submit(function () {
    //     $(window).unbind('beforeunload');
    //     window.onbeforeunload = null;
    // });
    


    
</script>

{{ endblock }}