{{ block title }}實驗說明{{ endblock }}

{{ block content }}
<div class="card bg-light m-3">
<div class="card-body">

    <audio autoplay controlslist="nodownload noplaybackrate" id="my_audio">
        <source src="{{ static 'experiment/instruction1.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>
            </button>
        </p>
    </div> 
    <hr>

    <p>
        決策階段的實驗過程詳述如下：你和對手將會輪流做決定，你們的選擇將會影響你們雙方的報酬。你與對手的「法幣」會以各自組別顏色表示，如<strong>圖一</strong>所示。每個圓圈均為一個「決策點」。
    </p>

    <!-- <center><img src="{{ static 'experiment/instruction_image1.jpg' }}" width="300px" /> -->
    <center><img src="{{ static 'experiment/otree_graph.gif' }}" width="300px" />

    <br>
    <strong>圖一</strong></center>
    <br>

    <p>
        本實驗會按照如<strong>圖一</strong>所示的箭頭方向進行。你必須在實驗進行到與你組別顏色相同的圓圈時做出選擇（例如：若你屬於<strong><font color="red">紅</font></strong>組，當實驗進行到紅色圓圈時，你必須做出選擇）。輪到你時，你有兩個選擇：「停下」或「繼續」。如果你選擇「停下」，你與對手會獲得該圓圈對應各自顏色的法幣報酬；如果你選擇「繼續」，則實驗會繼續進行，接下來將輪到你的對手做出選擇。請注意，在實驗最後，不論玩家選擇「停下」或「繼續」，實驗會立即結束，而你與對手會獲得相對應箭頭指向的法幣。
    </p>

    {{if C.HOT_TREATMENT == 1}}
    <p>
        舉例來說，參考<strong>圖二</strong>，若<strong><font color="red">紅</font></strong>組玩家在第一個圓圈中選擇「繼續」，則接下來輪到<strong><font color="blue">藍</font></strong>組玩家做出選擇，此時若<strong><font color="blue">藍</font></strong>組玩家也選擇「繼續」，則將輪回<strong><font color="red">紅</font></strong>組玩家做出選擇，此時若<strong><font color="red">紅</font></strong>組玩家選擇「停下」，則<strong><font color="red">紅</font></strong>組玩家會獲得 X3 元法幣，<strong><font color="blue">藍</font></strong>組玩家會獲得 Y3 元法幣。

    </p>
    {{else}}
    <p>
        請注意：你與對手會依序進行選擇，在實驗結束前，你不會知道對手的選擇。當輪到對手時，若對手仍未結束實驗，則你需要等待他做出選擇；若對手已結束實驗，則你將需要等待一段時間，此時間是由電腦從對手過往的決策時間模擬出來的。
    </p>

    <p>
        舉例來說，參考圖二，若<strong><font color="red">紅</font></strong>組玩家在第一個決策點中選擇「繼續」，則接下來會輪到<strong><font color="blue">藍</font></strong>組玩家做出選擇，此時若<strong><font color="blue">藍</font></strong>組玩家選擇「停下」，則<strong><font color="blue">藍</font></strong>組玩家已結束實驗。接下來<strong><font color="red">紅</font></strong>組玩家仍需做出選擇，若<strong><font color="red">紅</font></strong>組玩家選擇「繼續」，則<strong><font color="red">紅</font></strong>組玩家仍需等待一段由電腦模擬的時間；若<strong><font color="red">紅</font></strong>組玩家選擇「停下」，則<strong><font color="red">紅</font></strong>組玩家也結束實驗。由於<strong><font color="blue">藍</font></strong>組玩家在較早的決策點選擇「停下」，雙方的報酬依據<strong><font color="blue">藍</font></strong>組玩家停下的決策點決定，因此<strong><font color="red">紅</font></strong>組玩家會獲得 X2 元法幣，<strong><font color="blue">藍</font></strong>組玩家會獲得 Y2 元法幣。
    </p>
    {{endif}}

    <center><img src="{{ static 'experiment/instruction_image2.png' }}" width="300px" />
    <br>
    <img src="{{ static 'experiment/instruction_image3.png' }}" width="300px" />
    <br>
    <img src="{{ static 'experiment/instruction_image4.png' }}" width="300px" />
    <br><br>
    <strong>圖二</strong></center>

    <hr>

    <p>
        這裡有一個小測驗，共有兩題選擇題，為了方便理解，我們暫時以文字表示法幣數量。
    </p>

    <p>
        一、參考下圖，如果<strong><font color="blue">藍</font></strong>組玩家在第一個決策點選擇「繼續」，
        接著<strong><font color="red">紅</font></strong>組玩家選擇「停下」，則請問此時<strong><font color="blue">藍</font></strong>組玩家會獲得多少法幣？
    </p>
    <br>
        <center><img src="{{ static 'experiment/instruction_image6.png' }}" width="300px" /></center>
    <br>
    <center>
        <button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=1>A</button>
        <button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=2>B</button>
        <button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=3>C</button>
        <button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=4>D</button>
        <button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=5>E</button>
        <button class="OptionBtn" type="button" onclick="clickSubmit(value)" value=6>F</button>
        <input type="hidden" name="test2_ans1" id="test2_ans1"/>
        <input type="hidden" id="treatment" value={{ C.HOT_TREATMENT }}/>
        <input type="hidden" name="count_test2_ans1" id="count"/>
        <input type="hidden" name="test2_ans1_choice_record" id="record"/>
    </center>
    
    <p></p>
    <div id="ans_correct">
        <p><strong>回答正確，請點擊「下一頁」繼續進行實驗。</strong></p>
    </div>

    <div id="ans_wrong">
        <p><strong>回答錯誤，請重新選擇！</strong></p>
    </div>

    <div id="show_explain">
        <p>
            參考下圖，因為<strong><font color="red">紅</font></strong>組玩家選擇在整個實驗的第二個決策點「停下」，故雙方玩家將獲得第二個決策點相對應各自顏色的報酬。
            </p>
            <br>
            <center><img src="{{ static 'experiment/instruction_image5.png' }}" width="300px" /></center>
        <br>
        <!-- {{if C.HOT_TREATMENT == 1}}
            
            <p>
            參考下圖，因為<strong><font color="red">紅</font></strong>組玩家選擇在整個實驗的第二個決策點「停下」，
            故雙方玩家將獲得第二個決策點相對應各自顏色的報酬。
            </p>
            <br>
            <center><img src="{{ static 'experiment/instruction_image5.png' }}" width="300px" /></center>
            <br>
    
        {{elif C.HOT_TREATMENT == 0}}
    
            <p>
                cold 的參考圖
            </p>
    
        {{endif}} -->
    </div>
    <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>
    .OptionBtn {
      display: inline-block;
      background-color: white;
      border-radius: 10px;
      border: 4px double #cccccc;
      color: black;
      text-align: center;
      font-size: 15px;
      padding: 10px;
      width: 50px;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      cursor: pointer;
      margin: 5px;
    }
    .OptionBtn:hover {
      background-color: rgb(238, 163, 227);
    }
    #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: 50%;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0px 0px;
    }
</style>

<script>
    var count = 0;
    var record = ''
    function clickSubmit(ans) {
        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 == '4') || (treatment == '0/' && ans == '2')) {
        if (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 }}