{{ 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 id= "audio_clicked" 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>

    {{ for field in C.requirements }}
    <label><input type="checkbox" name="{{ field.name }}" value="1">
    {{ field.label }}</label><br>
    {{ endfor }}

    <!-- <div id="check_lst">
        <input type="checkbox" id="checkbox1" name="checkbox1" value="Bike">
        <label for="checkbox1">我了解若在本頁面的倒計時結束前未按下「報到」按鈕，將失去參與實驗的資格。</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>
    </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" onclick="show_next_page()" 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: 130px;
        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 {
        width: 910px;
        margin-left: 18px;
        position: sticky;
        bottom: 0px;
        display: block;
    } */
    #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() {
        // var c1 = document.getElementById("checkbox1");
        // var c2 = document.getElementById("checkbox2");
        // var c3 = document.getElementById("checkbox3");
        // var c4 = document.getElementById("audio_clicked");

        // if (c1.checked && c2.checked && c3.checked) {
        //     check_checklst = 1;
        // }
        // if (c4.checked) {
        //     check_playaudio = 1;
        // }

        // 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 = "(請勾選所有方格)";
        if (check_playaudio == 1) {
            document.getElementById("next_button").disabled = false;
        }
        // if (c1.checked == false || c2.checked == false || c3.checked == false) {
        //     document.getElementById("ans_wrong").style.display = "block";
        // }
    }
    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 }}