{{ block title }}實驗說明{{ endblock }}

{{ block content }}
<div class="card bg-light m-3">
<div class="card-body">

<audio autoplay controlslist="nodownload noplaybackrate" id="my_audio">
  <source src="{{ static 'experiment/instruction2.m4a' }}">
  Your browser does not support the audio element.
</audio>

<p>
    二、參考下圖，以下四個情況，請問哪一個情況會讓<strong><font color="red">紅</font></strong>組玩家獲得 C 元法幣、<strong><font color="blue">藍</font></strong>組玩家獲得 D 元法幣？
</p>
<br>
    <center><img src="{{ static 'experiment/instruction_image6.png' }}" width="300px" /></center>
<br>

{{if C.HOT_TREATMENT == 1}}
<button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=1><strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「停下」。</button>
<button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=2><strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「繼續」，接著<strong><font color="red">紅</font></strong>組玩家選擇「停下」。</button>
<button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=3><strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「繼續」，接著<strong><font color="red">紅</font></strong>組玩家選擇「繼續」，接著<strong><font color="blue">藍</font></strong>組玩家選擇「停下」。</button>
<button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=4><strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「繼續」，接著<strong><font color="red">紅</font></strong>組玩家選擇「繼續」，接著<strong><font color="blue">藍</font></strong>組玩家選擇「繼續」。</button>

{{else}}

<button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=1><strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「停下」，接著<strong><font color="red">紅</font></strong>組玩家選擇「繼續」。</button>
<button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=2><strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「停下」，接著<strong><font color="red">紅</font></strong>組玩家選擇「停下」。</button>
<button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=3><strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「繼續」，接著<strong><font color="red">紅</font></strong>組玩家選擇「停下」。</button>
<button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=4><strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「繼續」，接著<strong><font color="red">紅</font></strong>組玩家選擇「繼續」。</button>

{{endif}}

<input type="hidden" name="test2_ans2" id="test2_ans2"/>
<input type="hidden" id="treatment" value={{ C.HOT_TREATMENT }}/>
<input type="hidden" name="count_test2_ans2" id="count"/>
<input type="hidden" name="test2_ans2_choice_record" id="record"/>

<div id="ans_correct">
  <p><strong>回答正確，請點擊「下一頁」繼續進行實驗。</strong></p>
</div>

<div id="ans_wrong">
  <p><strong>回答錯誤，請重新選擇！</strong></p>
</div>

<div id="show_explain">
    <p>
      參考下圖，我們的目標是讓實驗在第二個決策點停下，<strong><font color="red">紅</font></strong>組玩家才能獲得 C 元法幣，故<strong><font color="blue">藍</font></strong>組玩家在圖中第一個決策點選擇「繼續」，接著<strong><font color="red">紅</font></strong>組玩家選擇「停下」。
    </p>
    <br>
    <center><img src="{{ static 'experiment/instruction_image7.png' }}" width="300px" /></center>
</div>

<p></p>
<div id="next_page">
  <button id="next_button" class="otree-btn-next btn btn-primary" disabled>下一頁</button>
  <span id="wait_text"><small>（音檔播放完畢後即可點擊按鈕）</small></span>
</div>

</div>
</div>


<style>
  .OptionBtn {
    display: inline-block;
    background-color: white;
    border-radius: 10px;
    border: 4px double #cccccc;
    color: black;
    text-align: left;
    font-size: 15px;
    padding: 10px;
    width: 400px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
  .OptionBtn:hover {
    background-color: rgb(238, 163, 227);
  }
  #ans_correct {
      display: none;
  }
  #ans_wrong {
      display: none;
  }
  #next_page {
      display: none;
  }
  #show_explain {
      display: none;
  }
</style>

<script>
  var count = 0;
  var record = ''
  function clickSubmit(ans) {
      count += 1;
      record = record + ans + ',';
      document.getElementById("count").value = count;
      document.getElementById("record").value = record;
      document.getElementById("test2_ans2").value = ans;
      var treatment = document.getElementById("treatment").value;

      if ((treatment == '1/' && ans == '2') || (treatment == '0/' && ans == '3')) {
          document.getElementById("ans_correct").style.display = "block";
          document.getElementById("ans_wrong").style.display = "none";
          document.getElementById("show_explain").style.display = "block";
          document.getElementById("next_page").style.display = "inline";
      } else {
          document.getElementById("ans_wrong").style.display = "block";
          document.getElementById("ans_correct").style.display = "none";
          document.getElementById("show_explain").style.display = "block";
          document.getElementById("next_page").style.display = "none";
      }
      // document.getElementById('showAns').style.display= 'block' ;
      // document.getElementById("form").submit();
  }
  document.getElementById('my_audio').play();
  var aud = document.getElementById("my_audio");
    aud.onended = function() {
      aud.play();
      document.getElementById("next_button").disabled = false;
      document.getElementById("wait_text").innerHTML = "";
  };

 
</script>


{{ endblock }}