{{ block title }} 第 {{player.num_subsession}} 輪 {{ endblock }}
{{ block content }} 
<p style="font-size: 23px;color:black;">選擇階段</p>
<div class="card bg-light m-3">
<div>
  <p>
  每次選擇階段，實驗參與者都需在 X 與 Y 兩方案中選擇一個，較多組員選擇的方案將在接下來的 {{Constants.num_game_round}} 個回合遊戲中於組內被執行，該方案將適用於所有同組組員。在同一輪中，若兩種選擇方案選擇的人數一樣多，則按照上一次的選擇結果執行。
  以下分別敘述兩個方案：
    <ol>
      <li>
      <strong><span style="color:black;font-weight:bold;font-size: 16px">X 方案：</span></strong>每位組員有獨立的 20% 的機率「被選中」，被選中的組員會損失20%的本輪累積報酬。
      </li>
      <li>
      <strong><span style="color:black;font-weight:bold;font-size: 16px">Y 方案：</span></strong>所有同組組員有 8% 的機率「被選中」，被選中的所有同組組員會損失100%的本輪累積報酬。		
      </li>
    </ol>
  </p>

  <p><span style="color: red;font-size: 16px"> 每次選擇後第 {{Constants.num_game_round}} 個遊戲回合結束時，將會個別告知方案執行結果，
    參與者在方案執行「被選中」後，將無法參與本輪的剩餘的選擇階段。 </span></p>
</div>
</div>

<p>確認以上實驗規則了解後，請按下 Yes 做選擇。</p>

<input type="button" id="mybutton" value="Yes"></br>


<table  id="displaytable" style="display:none" width="100%" cellpadding="1" cellspacing="0" border="3"><tr>
  <td> 1 </td>
  <td> 2 </td>
 <td> 3 </td>
</tr>
<tr>
  <td> 4 </td>
  <td> 5 </td>
 <td> 6 </td>
</tr>
<tr>
  <td> 7 </td>
  <td> 8 </td>
 <td> 9 </td>
</tr>
</table>



<div class="card bg-light m-3" id="vote" style="display:none">
<p style="font-size: 20px;color:black;">你想要投X或Y方案?</p>
    
  {{ formfield 'vote' }}
    <br>

    

    <script src="{{ static 'persist-raw.js' }}"></script>

  </div>    

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

  <script>



  //var mybutton = document.getElementById("mybutton");
  //mybutton.onclick = function() {
      //mybutton.disabled = true;
      //document.getElementById("displaytable").style.display = "block";
      //document.getElementById("start_timestamp").value = performance.now();
      
  //};



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


<script>

  var mybutton = document.getElementById("mybutton");
  mybutton.onclick = function() {
      mybutton.disabled = true;
      document.getElementById("displaytable").style.display = "block";
      setTimeout(function() {
          mybutton.disabled = true;
          document.getElementById("displaytable").style.display = "none";
      }, 6000);
  };
</script>


{{ next_button }}
 
{{ endblock }}



{{ for image in image_data }}
        <label style="text-align: center">
            <center><img src="{{ static image.path }}" width="400px"></center>
            <br>
            <input type="radio" name="img_choice" value="{{ image.name }}" class="persist" id="vote">
        </label>
    {{ endfor }}
    {{ formfield_errors 'img_choice' }}