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

    <ol>
        <li>完成實驗後，電腦會隨機選擇一個回合，所有參與者都將根據該回合獲得實驗報酬。
        </li>
        <li>您的實驗報酬取決於您在該回合的選擇以及另一位與您配對參與者的選擇。</li>
    </ol>

    實驗即將開始。 如果您有任何問題或需要幫助，請舉手，其中一名實驗者會幫助您。

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