{{ block title }} 第 {{player.num_subsession}} 輪 {{ endblock }}
{{ block content }} 

{{if player.is_fifth_game_round}}

<p style="font-size: 23px;color:black;">遊戲回合（ <span style="color: green;font-size: 23px">B</span> ）</p>

{{else}}

<p style="font-size: 23px;color:black;">遊戲回合（ <span style="color: blue;font-size: 23px">B</span> ）</p>
{{endif}}
<div>
  <p>若有需要，可以 <input id="show_instruction_btn" type="button" value="按此展開" onclick="show_instruction(value)"> 實驗說明。</p>
</div>
<hr>
<div id="instruction_div">
  {{ include Constants.instructions_template2}}
</div>



<div id='table_explain'>
<p>你有 {{Constants.timeout_seconds_write}} 秒鐘的時間填寫表格，每格皆須填寫，數字不可重複。時間結束後，重複的格子即使填對也無效。</p>
</div>

<!-- <input type="button" id="mybutton" value="Yes"> -->

<table id="displaytable" style="border:3px #cccccc solid;" cellpadding="10" border='1'>
  <tr>
    <td><input type="number" name="game_cell1_input" id="game_cell1_input"  /></td>
    <td><input  type="number" name="game_cell2_input" id="game_cell2_input" /></td>
    <td><input  type="number" name="game_cell3_input" id="game_cell3_input" /></td>
  <td><input  type="number" name="game_cell4_input" id="game_cell4_input" /></td>
  </tr>
  <tr>
    <td><input  type="number" name="game_cell5_input" id="game_cell5_input" /></td>
    <td><input  type="number" name="game_cell6_input" id="game_cell6_input" /></td>
    <td><input  type="number"name="game_cell7_input" id="game_cell7_input" /></td>
  <td><input  type="number" name="game_cell8_input" id="game_cell8_input" /></td>
  </tr>
  <tr>
    <td><input  type="number" name="game_cell9_input" id="game_cell9_input" /></td>
    <td><input  type="number" name="game_cell10_input" id="game_cell10_input" /></td>
    <td><input  type="number" name="game_cell11_input" id="game_cell11_input" /></td>
  <td><input  type="number" name="game_cell12_input" id="game_cell12_input" /></td>
  </tr>

  <tr>
    <td><input  type="number" name="game_cell13_input" id="game_cell13_input" /></td>
    <td><input  type="number" name="game_cell14_input" id="game_cell14_input" /></td>
    <td><input  type="number" name="game_cell15_input" id="game_cell15_input" /></td>
  <td><input  type="number" name="game_cell16_input" id="game_cell16_input" /></td>
  </tr>
</table>


<br>
<p>
  你可以按 Check 確認所填的 16 格數字符合規則。
</p>
<input class="OptionBtn" type="button" id="Check" value="Check" >





<!-- <button id="next_button" class="otree-btn-next btn btn-primary" style="display:none"> Next </button> -->



<div id="result_block">

  <div id="ans_int">
      <p><strong>請填整數!</strong></p>
  </div>
  
  <div id="ans_no_repeat">
      <p><strong>數字不可重複!</strong></p>
  </div>

  <div id="empty_ans">
      <p><strong>請選擇 1 到 16 整數!</strong></p>
  </div>

  <div id="ans_correct">
    <p><strong>所填的 16 格數字皆符合規則!</strong></p>
  </div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>	

<div class="progessbar" id="progessbar">
  <div class="text"></div>
  <div class="bar"></div>
</div>

<div class="msg"></div>
<style>
    #ans_int {
        display: none;
    }
    #ans_no_repeat {
        display: none;
    }
    #empty_ans {
        display: none;
    }
    #ans_correct {
        display: none;
    }

  
</style>

</div>


<script>

  // function clickSubmit() {
  //   var table = document.getElementById('displaytable');
  //   for (var r = 0, n = table.rows.length; r < n; r++) {
  //       for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
  //         if(table.rows[r].cells[c].innerHTML== ""){
  //           document.getElementById("empty_ans").style.display = "block";
  //         }
  //         if(table.rows[r].cells[c].innerHTML < 1 && table.rows[r].cells[c].innerHTML > 16){
  //           document.getElementById("ans_wrong").style.display = "block";
  //         }
  //       }
  //   }
  // }
  
  var Check = document.getElementById("Check");
  Check.onclick = function() {


    

      var arr=[document.getElementById("game_cell1_input").value ,document.getElementById("game_cell2_input").value,document.getElementById("game_cell3_input").value,document.getElementById("game_cell4_input").value,
               document.getElementById("game_cell5_input").value,document.getElementById("game_cell6_input").value,document.getElementById("game_cell7_input").value,document.getElementById("game_cell8_input").value,
               document.getElementById("game_cell9_input").value,document.getElementById("game_cell10_input").value,document.getElementById("game_cell11_input").value,document.getElementById("game_cell12_input").value,
               document.getElementById("game_cell13_input").value,document.getElementById("game_cell14_input").value,document.getElementById("game_cell15_input").value,document.getElementById("game_cell16_input").value
               ];

      
      
          
      
      var tempbool = false; //默认无重复
      var temp = false;
      var is_decimal=false;
        for (let index = 0; index < arr.length; index++) {
          if ( arr[index] < 1 || arr[index] > 16  ) {
                temp = true;
            }
          if ( String(arr[index]).indexOf(".") + 1 > 0) {
                is_decimal = true;
            }
          for (let i = index+1; i < arr.length; i++) {
            if ( arr[index]!= "" ) {
            
            if ( arr[index]== arr[i] ) {
              tempbool = true;
            }}
          }
        }
        if (tempbool) {
         document.getElementById("ans_no_repeat").style.display = "block";
        //  console.log('存在重复数据！');
        } else {
        document.getElementById("ans_no_repeat").style.display = "none";
        }

        if (temp) {
         document.getElementById("empty_ans").style.display = "block";
        //  console.log('存在重复数据！');
        } else {
        document.getElementById("empty_ans").style.display = "none";
        }

        if (is_decimal) {
         document.getElementById("ans_int").style.display = "block";
        //  console.log('存在重复数据！');
        } else {
        document.getElementById("ans_int").style.display = "none";
        }

        if (temp === false && tempbool === false  && is_decimal === false) {
         document.getElementById("ans_correct").style.display = "block";
        //  console.log('存在重复数据！');
        } else {
        document.getElementById("ans_correct").style.display = "none";
        }
      

        
      // let tbody = document.getElementById("displaytable").innerHTML;
      // if (tbody === '') {
      //     document.getElementById("empty_ans").style.display = "block";
      //   } 
      
      }

      document.getElementById("instruction_div").style.display = "none"
      function show_instruction(value) {
      if (value == "按此展開") {
        document.getElementById("instruction_div").style.display = "block";
        document.getElementById("show_instruction_btn").value = "按此收起";
      } else {
        document.getElementById("instruction_div").style.display = "none";
        document.getElementById("show_instruction_btn").value = "按此展開";
      }
    }

 
  
</script>



{{ endblock }}