{{ 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> -->
    
    <audio controlslist="nodownload noplaybackrate" id="my_audio">
        <source src="{{ static 'experiment/subject_id_revised.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" size="4"><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>    
    <!-- <button type="button" onclick="fake_on_ended()">假裝播完實驗說明</button> -->
    <hr>

    <div id="main_div">

        <p>
            你好，歡迎參加本場實驗。
    </p>
    
    <p>
        請先詳閱稍早已寄到信箱的郵件：「實驗前的注意事項」，並確認以下事項後，逐一勾選方格。
    </p>


    <div id="check_lst">
        <input type="checkbox" id="checkbox1" name="checkbox1" value="Bike">
        <label for="checkbox1">我了解若在今日{{ experiment_time }}前沒有按下「送出」與接下來出現的「報到」按鈕，送出本頁面，則將失去參與實驗的資格。</label><br>
        <input type="checkbox" id="checkbox2" name="checkbox2" value="Car">
        <label for="checkbox2">我已確認使用 Google Chrome 或 Microsoft Edge 瀏覽器開啟實驗連結。</label><br>
        <input type="checkbox" id="checkbox3" name="checkbox3" value="Boat">
        <label for="checkbox3">我了解若於實驗中遇到任何問題，可使用實驗畫面右下角按鈕與實驗者聯絡。</label><br><br>
    </div>
    <input type="button" onclick="clickSubmit()" value="送出" />
    
    <br>
    <!-- {{formfields}} -->
    <!-- <input type="hidden" id="real_subject_id" value={{ real_subject_id }}/> -->
    <!-- <label for="answer">你的ID：</label><br> -->
    <!-- <input id="subject_id" name="subject_id" onkeydown="return (event.keyCode!=13);"/> -->

    <div id="ans_correct">
        <p><strong>完成確認，請點擊「報到」開始實驗。</strong></p>
    </div>

    <div id="ans_wrong">
        <p><font color="red"><strong>請勾選所有方格！</strong></font></p>
    </div>

    <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>
</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: 100px;
      -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;
    }
    /* * .otree-timer {
        display: none;
    } */
    .otree-form-errors {
            display: none;
    }
    #ans_correct {
        display: none;
    }
    #ans_wrong {
        display: none;
    }
</style>

<script>
    var check_playaudio = 0;
    var check_checklst = 0;

    var aud = document.getElementById("my_audio");

    function show_next_page() {
        if (check_checklst == 0 && check_playaudio == 0) {
            document.getElementById("wait_text").innerHTML = "(請播放音檔並勾選所有方格)";
        } else if (check_checklst == 0) {
            document.getElementById("wait_text").innerHTML = "(請勾選所有方格)";
        } else if (check_playaudio == 0) {
            document.getElementById("wait_text").innerHTML = "(請播放音檔)";
        } else {
            document.getElementById("wait_text").innerHTML = "";
            document.getElementById("next_button").disabled = false;
        }
    }
    function playAudio() {
        aud.play();  
        check_playaudio = 1; 
        show_next_page();
        // 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 = "";
    // };

    function clickSubmit() {
        var c1 = document.getElementById("checkbox1");
        var c2 = document.getElementById("checkbox2");
        var c3 = document.getElementById("checkbox3");

        if (c1.checked && c2.checked && c3.checked) {
            document.getElementById("ans_correct").style.display = "block";
            document.getElementById("ans_wrong").style.display = "none";
            // document.getElementById("next_page").style.display = "block";
            check_checklst = 1;
            show_next_page();

        } else {
            document.getElementById("ans_wrong").style.display = "block";
            document.getElementById("ans_correct").style.display = "none";
            // document.getElementById("next_page").style.display = "none";
            check_checklst = 0;
            show_next_page();
        }

    }
</script>

{{ endblock }}