{{ 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 === 180) {
                    $('.otree-timer').show();
                }
            });
        });
    </script>

    {{ include C.INSTRUCTION_TEMPLATE }}

    <p></p>
    <div id="next_page">
        <button id="next_button" class="otree-btn-next btn btn-primary">下一頁</button>
        <!-- <span id="wait_text"><small>（音檔播放完畢後即可點擊按鈕）</small></span> -->
    </div>
</div>
</div>

<style>
    #ans_correct {
        display: none;
    }
    #ans_wrong {
        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>
    document.getElementById("next_page").style.display = "block";
</script>    

{{ endblock }}