{{ 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>
    <!-- <button type="button" onclick="fake_on_ended()">假裝播完實驗說明</button> -->

    <audio autoplay controlslist="nodownload noplaybackrate" id="my_audio">
        <source src="{{ static 'experiment/payoff_v3.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="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>
    <p>
    <strong>請注意，在各頁面按下「下一頁」後無法回顧任何前一頁說明，請仔細閱讀每頁內容！</strong></p>
    <p>
        實驗結束後，你將得到定額出席費新台幣 50 元，以及你在實驗中獲得的「法幣」所兌換成之新台幣。（「法幣」為本實驗的實驗貨幣單位。）你在實驗中能獲得的「法幣」會根據你所做的決策、別人的決策、以及隨機亂數決定。
    </p>

    <p>
        每個人都會個別獨自領取報酬，你沒有義務告訴其他人你的報酬多寡。
    </p>

    <p>
        為確保無記名原則，你在實驗過程中的抉擇將只會連結至你的ID。雖因會計作業需要，會請你提供姓名，但後續研究者無法連結你的姓名與你的ID，也就是說你在實驗中的抉擇仍是保密的。
    </p>

    <p>
        <strong>請注意：本實驗中的「法幣」與新台幣兌換匯率為 1:1。（法幣 1 元 = 新台幣 1 元）</strong>
    </p>
    

    <hr>

    <p>
        這裡有一個小測驗，測驗題目共有一題填空題：
    </p>

    <p>
        假若你在本實驗總共獲得「法幣」10 元，在不包含 50 元出席費的情況下，請問你會獲得多少新台幣作為實驗報酬？（請輸入整數）
    </p>  

    <!-- {{formfields}} -->
    <label for="answer">你的回答：</label><br>
    <!-- <input type="number" id="test1_ans" name="test1_ans"/> -->
    <input type="number" id="test1_ans" name="test1_ans" onkeydown="return (event.keyCode!=13);"/>

    <input type="hidden" name="count_test1_ans" id="count"/>
    <input type="hidden" name="test1_ans_choice_record" id="record"/>
    <input type="button" onclick="clickSubmit()" value="提交答案" />


    <div id="ans_correct">
        <p><strong>回答正確，請點擊「下一頁」繼續進行實驗。</strong>本實驗中的「法幣」與新台幣兌換匯率為 1:1。（法幣 1 元 = 新台幣 1 元）</p>
    </div>

    <div id="ans_wrong">
        <p><strong>回答錯誤，請重新作答！</strong>本實驗中的「法幣」與新台幣兌換匯率為 1:1。（法幣 1 元 = 新台幣 1 元）</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>

<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: 200px;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    button:hover {
      background-color: rgb(216, 84, 22);
    } */
    #ans_correct {
        display: none;
    }
    #ans_wrong {
        display: none;
    }
    #next_page {
        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 = ''
    function clickSubmit() {
        var ans = document.getElementById("test1_ans").value;
        record = record + ans + ',';
        count += 1;
        document.getElementById("record").value = record;
        document.getElementById("count").value = count;
        if (ans == 10) {
            document.getElementById("ans_correct").style.display = "block";
            document.getElementById("ans_wrong").style.display = "none";
            document.getElementById("next_page").style.display = "block";
            document.getElementById("test1_ans").readOnly = true;
        } else if (ans == "") {
            document.getElementById("ans_correct").style.display = "none";
            document.getElementById("ans_wrong").style.display = "none";
            document.getElementById("next_page").style.display = "none";
        } else {
            document.getElementById("ans_wrong").style.display = "block";
            document.getElementById("ans_correct").style.display = "none";
            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 = "";
    };

    function fake_on_ended() {
        aud.onended();
    }
</script>

{{ endblock }}