{{ block title }}理解測驗{{ endblock }}
{{ block content }}
<style>
    .debug-info {
      display: none;
    }
    ._otree-content{
        width: 950px;
    
    }
    .form{
        width: 950px;
    }
    .now{
        border: black 2px solid;
        padding: 20px;
        width: 950px;
        margin-bottom: 20px;
        margin-left: 50%;
        transform: translateX(-50%);
        
    }
    
    .now-mine{
        display: flex;
        justify-content: space-between;
    }
    
    .bar{
        background-color: blue;
        height: 20px;
    }
    
    
    .slider{
        width: 500px;
        
    }
    
    .hidden-area{
        display: none;
    }
    
    .container{
        max-width: {{Constants.width}};
    }
    
    p{
        line-height: {{Constants.height}};
    }
    
    
    #DIV1{
    width:400px;
    line-height:30px;
    /* padding:10px; */
    /* border:2px  green solid; */
    margin-left:10px;
    float:left; 
    }
    
    #DIV2{
    width:400px;
    line-height:30px;
    /* padding:20px; */
    /* border:2px green solid; */
    float:right;
    }
    
    #bar_DIV1{
    width:400px;
    line-height:30px;
    /* padding:10px; */
    /* border:2px  green solid; */
    margin-left:10px;
    float:left; 
    
    }
    
    #bar_DIV2{
    width:350px;
    margin-right:40px;
    line-height:30px;
    /* padding:20px; */
    /* border:2px green solid; */
    float:right;
    }
    
    .hint{
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
    position: relative;
    padding: 1rem 1rem;
    margin: 1rem 0rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.hint-1{
    display: none;
}

.hint-2{
    display: none;
}

.hint-3{
    display: none;
}


.error{
    display: none;
}

.wrong{
    display: none;
}

.correct{
    display: none;
}

.check{
    margin-top: 1rem;
}

.container{
    max-width: {{Constants.width}};
}

p{
    line-height: {{Constants.height}};
}

.debug-info {
    display: none;
}
.otree-timer {
    display: none;
}
    </style>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds < {{Constants.alert_last_seconds}}) {
                $('.otree-timer').show();
            }
            if (event.offset.totalSeconds === {{Constants.alert_last_seconds}}) { // 剩180秒時提醒
                alert("請在3分鐘內完成理解測驗！");
            }
        });
    });

</script>
<p>
    <br>
    <a id="show22" onclick="show22()" href="javascript:;" style="text-decoration:none; padding: 5px; border: 1.5px ;border-style:outset;  ; background-color:#D2E9FF">【點擊顯示實驗說明】</a>
    <div id="hide22" style="display: none; border:1px #E0E0E0 solid;padding: 20px;">

        <p>
            在整場實驗中，您會和另一名受試者兩人一組。<b>你們不會知道彼此的身份</b>。
        </p>
        <p>
            實驗內容為<b>一系列的決策</b>，請決定您在接下來 22 個回合的情境中，會如何分配您和對方的報酬。<br>
            系統會隨機從您的決策抽出一回合告知對方，<b>您的決策會決定您和對方的報酬</b>。
        </p>
        <p>
            每回合情境中您都會有一筆初始點數，您可以透過滑桿分配這筆點數給自己和對方，<br>
            分配的點數會按照您和對方各自的轉換率換成法幣 (1 法幣 = 2 元新台幣)。<br>
        </p>
        <p>
            請注意，每回合的初始點數、對方的轉換率、與您的轉換率都可能不同，位置如下圖的紅框所示：
        </p>
        <p>
            <img src="{{ static 'instruction_ex_20220524.jpg' }}" width="900px"; style="border:	#E0E0E0 solid; margin: 0px auto;"; />
        </p>
    </div>
</p>

<script>
var isShow = false;
function show22() {
    if(!isShow) {
        isShow = true;
    document.getElementById('hide22').style.display='';
    document.getElementById('show22').innerText = "【點擊隱藏實驗說明】";
    }
    else {
        isShow = false;
        document.getElementById('hide22').style.display='none';
        document.getElementById('show22').innerText = "【點擊顯示實驗說明】";
    }
}
</script>

<br>
<hr style="border: 1.5px dashed">
<br>


<p>
    請完成實驗說明的理解測驗：
</p>
<p>
    1.	請問在每回合中，您和對方「點數轉換為法幣」的轉換率是否會必然一樣？<br>

    <p>
        <form action="check">
            <label><input type="radio" name="q1" value="a" class="form-check-input"> (A) 是 </label><br>
            <label><input type="radio" name="q1" value="b" class="form-check-input"> (B) 否 </label><br>
        </form>
    </p>
    

    <div class="hint hint-1">
        提示文字：<br>
        此選項的答案錯誤。請您再次閱讀實驗說明後，重新回答問題。
        </div>

</p>
<br>

<p>
    2.	假設某回合您的填答如下圖。請問您是如何分配您和對方的點數（法幣）？<br><br>
    <img src="{{ static 'test_q2.png' }}" width="900px"; style="border:	#BEBEBE solid"; /><br><br>
    <form action="check">
        <label><input type="radio" name="q2" value="a" class="form-check-input"> (A) 我方持有 60 點，1點＝1法幣，故我方得 60 法幣；對方持有 40 點，1點＝1法幣，故對方得 40 法幣</label><br>
        <label><input type="radio" name="q2" value="b" class="form-check-input"> (B) 我方持有 60 點，1點＝2法幣，故我方得 120 法幣；對方持有 40 點，1點＝1法幣，故對方得 40 法幣</label><br>
        <label><input type="radio" name="q2" value="c" class="form-check-input"> (C) 我方持有 120 點，1點＝1法幣，故我方得 120 法幣；對方持有 80 點，1點＝1法幣，故對方得 80 法幣</label><br>
        <label><input type="radio" name="q2" value="d" class="form-check-input"> (D) 我方持有 120 點，1點＝2法幣，故我方得 240 法幣；對方持有 80 點，1點＝1法幣，故對方得 80 法幣</label>
    </form>

    <div class="hint hint-2">
        提示文字：<br>
        此選項的答案錯誤。請您再次閱讀實驗說明後，重新回答問題。
        </div>
<br>
</p>

<p>
    3.	您完成決策後，系統會隨機從您的決策抽出一回合告知對方。以抽出下圖為例，請問下列敘述何者正確？<br><br>
    <img src="{{ static 'test_q2.png' }}" width="900px"; style="border:	#BEBEBE solid"; /><br><br>
    <form action="check">
        <label><input type="radio" name="q3" value="a" class="form-check-input"> (A) 我和對方的報酬皆不受影響</label><br>
        <label><input type="radio" name="q3" value="b" class="form-check-input"> (B) 我會拿到 240 元新台幣的報酬，對方的報酬不受影響</label><br>
        <label><input type="radio" name="q3" value="c" class="form-check-input"> (C) 我的報酬不受影響，對方會拿到  80 元新台幣的報酬</label><br>
        <label><input type="radio" name="q3" value="d" class="form-check-input"> (D) 我會拿到 240 元新台幣的報酬，對方會拿到 80 元新台幣的報酬</label>
    </form>

    <div class="hint hint-3">
        提示文字：<br>
        此選項的答案錯誤。請您再次閱讀實驗說明後，重新回答問題。
        </div>
</p>
<br>

    <form action="check">
        <input type="button" value="檢查" class="btn btn-primary check" onclick="check()">
    </form>

    <div class="otree-form-errors alert alert-danger error">
        尚有題目未作答，請再檢查一次。
    </div>

    <div class="otree-form-errors alert alert-danger wrong">
        尚有題目回答錯誤，請依據提示更正答案後，再檢查一次。
    </div>

    <div class="hint correct">
        測驗皆回答正確，請點擊 Next 繼續本實驗。<br><br>
	<button class="otree-btn-next btn btn-primary">Next</button>

    </div>


    <script>

        
        
        function check(){
        try{
        var q1 = document.querySelector('input[name="q1"]:checked').value;
        var q2 = document.querySelector('input[name="q2"]:checked').value;
        var q3 = document.querySelector('input[name="q3"]:checked').value;
        
        if (q1 != "b"){
            $(".hint-1").show()
        }else{
            $(".hint-1").hide()
        }
        
        if (q2 != "b"){
            $(".hint-2").show()
        }else{
            $(".hint-2").hide()
        }
        
        if (q3 != "d"){
            $(".hint-3").show()
        }else{
            $(".hint-3").hide()
        }
        
        if (q1 == 'b' && q2 == "b" && q3 == "d" ){
            $('.check').hide()
        
            $('.error').hide()
            $('.wrong').hide()
            $('.correct').show()
        }else{
        
            $('.error').hide()
            $('.wrong').show()
            $('.correct').hide()
        }
        
        
        
        
        }catch(err){
        $('.error').show()
        $('.wrong').hide()
        $('.correct').hide()
        }
        
        
        }
        </script>
        
        
        
        
        
        <script>
        setTimeout(function(){document.querySelector('.otree-btn-next').className+= ' twinkle'}, 60000);
        </script>
        
        
        
        <script>
            function bootstrapTabControl(){
            // alert('test')
          var i, items = $('.nav-link'), pane = $('.tab-pane');
          // next
          $('.nexttab').on('click', function(){
              for(i = 0; i < items.length; i++){
                  if($(items[i]).hasClass('active') == true){
                      break;
                  }
              }
              if(i < items.length - 1){
                  // for tab
                  $(items[i]).removeClass('active');
                  $(items[i+1]).addClass('active');
                  // for pane
                  $(pane[i]).removeClass('show active');
                  $(pane[i+1]).addClass('show active');
              }
        
          });
          // Prev
          $('.prevtab').on('click', function(){
              for(i = 0; i < items.length; i++){
                  if($(items[i]).hasClass('active') == true){
                      break;
                  }
              }
              if(i != 0){
                  // for tab
                  $(items[i]).removeClass('active');
                  $(items[i-1]).addClass('active');
                  // for pane
                  $(pane[i]).removeClass('show active');
                  $(pane[i-1]).addClass('show active');
              }
          });
        }
        bootstrapTabControl();
        
        
        function topFunction() {
          document.body.scrollTop = 0;
          document.documentElement.scrollTop = 0;
        }
        </script>

        {{ include Constants.PAPERCUPS_TEMPLATE }}


        {{ endblock }}