{{ block title }}線上實驗{{ endblock }}

{{ block content }}


<div class="card bg-light m-3">
<div class="card-body">

    <audio controlslist="nodownload noplaybackrate" id="my_audio">
        <source src="{{ static 'experiment/subject_id2.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="red"><strong>請將你的電腦音源打開，並點擊「播放實驗說明」！</strong></font>
            <!-- <input type="button" onclick="playAudio()" value="播放實驗說明"/> -->
            <button type="button" class="btn btn-primary btn-play-audio" onclick="playAudio()">
                播放實驗說明 <i class='fas fa-play' style='font-size:14px;padding:4px;'></i>
            </button>
        </p>
    </div>    
    <hr>

    <div id="main_div">

        <p>
            你好，歡迎參加本場實驗。
    </p>
    
    <p>
        請先詳閱稍早已寄到信箱的郵件：「實驗前的注意事項」，並輸入你的ID後按下「報到」，以開始實驗。
    </p>
    
    <p>
        請注意：<br>
        一、你需要在<strong>今日{{ experiment_time }}前按下「報到」</strong>，否則將失去參與實驗的資格。<br>
        二、<strong>此ID用於支付實驗報酬，請謹慎填寫。</strong>
    </p>
    
    <br>
    {{formfields}}
    <div>
        <button id="next_button" class="otree-btn-next btn btn-primary" style="width:90px" disabled>報到</button>
        <span id="wait_text"><small>（音檔播放完畢後即可點擊按鈕）</small></span>
    </div>
    
</div>
</div>
</div>

<style>
    button {
      display: inline-block;
      background-color: white;
      border-radius: 10px;
      border: 4px double #cccccc;
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 10px;
      width: 200px;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    .btn-play-audio {
        width: 140px;
        border: 2px solid #808080;
        background-color: white;
        color: 	#808080;
        padding: 2px 4px;
        border-radius: 10px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0px 0px;
    }
</style>

<script>
    var aud = document.getElementById("my_audio");
    function playAudio() {
        aud.play();     
        // document.getElementById("play_audio_div").style.display = "none";
        // document.getElementById("main_div").style.display = "block";
    }
    aud.onended = function() {
        document.getElementById("next_button").disabled = false;
        document.getElementById("wait_text").innerHTML = "";
    };
</script>
{{ endblock }}