{{ 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>
    
    {{if hot_treatment == 1}}
        <audio autoplay controlslist="nodownload noplaybackrate" id="my_audio">
            <source src="{{ static 'experiment/H1.m4a' }}">
            Your browser does not support the audio element.
        </audio>
    {{else}}
        <audio autoplay controlslist="nodownload noplaybackrate" id="my_audio">
            <source src="{{ static 'experiment/HLC1_1.m4a' }}">
            Your browser does not support the audio element.
        </audio>
    {{endif}}

    <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>

    {{ include C.INSTRUCTION_TEMPLATE }}
    {{ include C.TEST_ONE_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;
    }
</style>

<script>
    var count = 0;
    var record = ''
    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_ans1").value = ans;
        var treatment = document.getElementById("treatment").value;

        if ((treatment == '1/' && ans == '1') || (treatment == '0/' && ans == '4')) {
            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 = "block";
        } 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 }}