{{ block title }}實驗說明{{ endblock }}
{{ block content }}
<style>
    .debug-info {
      display: none;
    }
    .now{
        border: black 2px solid;
        padding: 20px;
        width: 850px;
        margin-bottom: 20px;
    }
    
    .now-mine{
        display: flex;
        justify-content: space-between;
    }
    
    .bar{
        background-color: blue;
        height: 20px;
    }
    
    
    .slider{
        width: 800px;
    }
    
    
    .line{
        border-bottom: black 1px solid;
        margin: 25px 0px;
    }
    
    .hidden-area{
        display: none;
    }
    
        .container{
            max-width: {{Constants.width}};
        }
    
        p{
            line-height: {{Constants.height}};
        }
    
    
    #DIV1{
    width:400px;
    line-height:30px;
    padding:0px;
    /* border:2px  green solid; */
    margin-left:10px;
    float:left; 
    }
    
    #DIV2{
    width:400px;
    line-height:30px;
    padding:0px;
    /* border:2px green solid; */
    float:left;
    }

    .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>
    在整場實驗中，您會和另一名受試者兩人一組。<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:	#BEBEBE solid"; />
</p>
<br>
<br>

<hr>
<br>

<p>
    以下為練習範例，<b>您在練習範例中的決策不會計入報酬</b>。<br>
    請您點擊灰色滑桿後，用滑鼠或是鍵盤方向鍵來熟悉分配方式；確認操作沒有問題後，再點擊 Next 進入下一頁。
</p>

<br>

    <p>
        <h5>【練習範例】</h5><br>
        <!-- 滑桿 -->

        <script>
            var test_number;
            $( function() {
                var budget = 100;
                $( "#slider-range-max" ).slider({
                    range: "max",
                    min: 0,
                    max: 100,
                    value: -10,
                    slide: function( event, ui ) {
                        var rest_amount = 100 - ui.value
                        $( "#amount" ).val( ui.value ); 
                        $('#rest_amount').val(rest_amount);
                        },
                });  
                });
            
            // 點擊後顯示按鈕
            $(function() {
                $("#slider-range-max").slider({
                    start: function() {
                        $(".ui-slider-handle", this).show();
                        $('#mine-test').show();
                        $('#other-test').show();
                        $('#mine-bar-test').show();
                        $('#other-bar-test').show();
                        
                        }
                    });
                var sw = $("#slider-range-max").slider("widget");
                $(".ui-slider-handle", sw).hide();
                $('#mine-test').hide();
                $('#other-test').hide();
                $('#mine-bar-test').hide();
                $('#other-bar-test').hide();
                });

        </script>
        <script>

            document.getElementById('change').onclick = changeColor;   
        
            function changeColor() {
                document.body.style.color = "purple";
                return false;
            }   
        
        </script>
        
        

            <div id="DIV1" >
                我方持有點數：
            </div>
            <div id="DIV2" style="text-align: right; margin-left:10px;">
                對方持有點數：
            </div>
            <p style="height: 0px;">
            <div id="DIV1" >
                <input class='mine-test' type="number" name="range-test" id="amount" width="40" readonly style="border:0; width:50px; text-align: right; font-weight:bold; ">點
            </div> 
            <div id = "DIV2"  style=" margin-right:20px; width: 380px">
                <div style="text-align:right; float:right; z-index: -1 ;" >
                    點
                </div>
                <input class='other-test' type="number" name="range-test" id="rest_amount" width="40" readonly style=" border:0;  width:50px; font-weight:bold; text-align: right; float: right; z-index: 0;">
            </div> 
            
            </p>

            <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
            <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
            <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
            <br>
            <div id="slider-range-max" style="width:750px; margin:30px auto; float: none; "></div>
            



    <!-- 滑桿 -->

    <!-- 法幣視覺化長條 -->
    <p>
        <div class="now" style="color:initial">
            <div class="now-mine" style="align-items: center;">
                <p style="margin: 0px; vertical-align: middle;">我方報酬 (1 點 = 1 法幣)：<em class='mine-test' id="mine-test" style="font-weight:bold;"></em> 法幣</p>
                <div class="bar" id="mine-bar-test" ></div>
            </div>
            <br>
            <div class="now-mine" style="align-items: center;">
                <p style="margin: 0px; vertical-align: middle";>對方報酬 (1 點 = 2 法幣)：<em class='other-test' id="other-test" style="font-weight:bold;"></em> 法幣</p>
                <div class="bar" id="other-bar-test"></div>
            </div>
        </div>
        <br>
    </p>
    <!-- 法幣視覺化長條 -->

<br>


    <script>
        setInterval(
        function processFormData() {
            var nameElement = document.getElementById("amount");
            var mine = nameElement.value;
            var other = 100 - nameElement.value;
        
            var price_s_test = 1
            var price_o_test = 2
            document.getElementsByClassName('mine-test')[0].innerHTML = mine;
            document.getElementsByClassName('mine-test')[1].innerHTML = mine*price_s_test;
            // document.getElementsByClassName('mine-test')[2].innerHTML = mine*price_s_test;
        
            document.getElementsByClassName('other-test')[0].innerHTML = other;
            document.getElementsByClassName('other-test')[1].innerHTML = other*price_o_test;
            // document.getElementsByClassName('other-test')[2].innerHTML = other*price_o_test;
        
            document.getElementById('mine-bar-test').style.width = price_s_test*mine + 'px';
            document.getElementById('other-bar-test').style.width = price_o_test*other + 'px';
        
        
        },
        0.1*1000
        )
        
        </script>
        
        
        <script>
            $('.otree-btn-next').html('Next')
            $('.otree-btn-next').prop('disabled', true);

            setInterval(
                (function check_answer() {
                // console.log($('#amount').val()=="");
                var pass = document.getElementById("amount");
                // console.log(nameElement.value.length)
                    // var answer_check
                    
                        // console.log('key: ' + $('#answer').val());
                        // alert($('#amount').length)
                        var pass_value = $('#amount').val();
                        // alert(pass=="")
                        if (pass_value != "") {
                            $('.otree-btn-next').prop('disabled', false);
                        } else {
                            $('.otree-btn-next').prop('disabled', true);
                        }
                    })

            )
        </script>

        {{ include Constants.PAPERCUPS_TEMPLATE }}
        {{ next_button }}


        {{ endblock }}