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

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

<style>
  .otree-timer {
      display: none;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function (event) {
      $('.otree-timer__time-left').on('update.countdown', function (event) {
          if (event.offset.totalSeconds === 300) {
              $('.otree-timer').show();
          }
      });
  });
</script>
  
<audio autoplay controlslist="nodownload noplaybackrate" id="my_audio">
  <source src="{{ static 'experiment/H_HLC2.m4a' }}">
  Your browser does not support the audio element.
</audio>

<div id="play_audio_div">
  <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
  <p>
      <font color="gray"><small>若實驗說明音檔沒有順利播放，或需要再播放一次，請點擊右方按鈕：</small></font>
      <button type="button" class="btn btn-primary btn-play-audio" onclick="playAudio()">
          <!-- <i class='fas fa-play' style='font-size:8px'></i> -->
          <small>播放</small>
      </button>
  </p>
</div> 
<hr>

<div>
  <p>若有需要，可以 <input id="show_instruction_btn" type="button" value="按此展開" onclick="show_instruction(value)"> 前頁之實驗說明。</p>
</div>
<hr>
<div id="instruction_div">
  {{ include C.INSTRUCTION_TEMPLATE}}
</div>

{{ include C.TEST_TWO_TEMPLATE }}

<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>
  #ans_correct {
      display: none;
  }
  #ans_wrong {
      display: none;
  }
  #empty_ans {
      display: none;
  }
  #next_page {
      display: none;
  }
  #show_explain {
      display: none;
  }
  .btn-play-audio {
        border: 2px solid #808080;
        background-color: white;
        color: 	#808080;
        padding: 2px 4px;
        border-radius: 40%;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0px 0px;
    }
    #instruction_div {
        display: none;
    }
</style>

<script>
  var count = 0;
  var record = ''
  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 = "按此展開";
    }
  }
  var ans = 0;
  var last_ans = 0;
  function clickOption(value) {
      last_ans = ans;
      ans = value;
      ans_id = "".concat("option", value);
      document.getElementById(ans_id).style.backgroundColor = "rgb(238, 163, 227)";
      if (last_ans != 0) {
          last_ans_id = "".concat("option", last_ans);
          document.getElementById(last_ans_id).style.backgroundColor = "white";
      }
  }
  function clickSubmit() {
      if (ans == 0) {
          document.getElementById("empty_ans").style.display = "block";
          return;
      };
      document.getElementById("empty_ans").style.display = "none";
      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 == '2')) {
          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");

  function playAudio() {
    aud.play();     
  }

  aud.onended = function() {
    document.getElementById("next_button").disabled = false;
    document.getElementById("wait_text").innerHTML = "";
  };

 
</script>


{{ endblock }}