{{ block title }}
<p>實驗：第 4 / 22 回合</p>

<!-- {{real_choice_num_4}} -->


{{ 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;
margin-left:10px;
float:left; 
}

#DIV2{
width:400px;
line-height:30px;
float:right;
}

#bar_DIV1{
width:400px;
line-height:30px;
margin-left:10px;
float:left; 

}

#bar_DIV2{
width:350px;
margin-right:40px;
line-height:30px;
float:right;
}

.otree-timer {
    display: none;
}
</style>
<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds < {{Constants.alert_last_seconds}}) { // 剩5分鐘時顯示計時器
                $('.otree-timer').show();
            }
            if (event.offset.totalSeconds === {{Constants.alert_last_seconds}}) { // 剩5分鐘時提醒
                alert("請在時間內完成您的所有回合！");
            }
        });
    });
</script>

<p>
    <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>
            {{ if player.id_in_group == 1 }}
            實驗內容為<b>一系列的決策</b>，請決定您在接下來 22 個回合的情境中，會如何分配您和對方的報酬。<br>
            系統會隨機從您的決策抽出一回合告知對方，<b>您的決策會決定您和對方的報酬</b>。
            {{ else }}
            實驗內容為一份<b>情境式問卷</b>，請假想您在接下來 22 個回合的情境中，會如何分配您和對方的報酬。<br>
            系統會隨機從您的決策抽出一回合告知對方，<b>您的決策不會影響您和對方的報酬</b>。
            {{ endif }}
        </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  solid"><br>



<p>
    請點擊滑桿來分配您的初始點數： <b>{{dis_endow_4}}</b> 點<br>
    <br>
</p>

  


        <!-- 滑桿1 -->

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

            <div id="DIV1" >
                我方持有點數：
            </div>
            <div id="DIV2" style="text-align: right; margin-left:10px;">
                對方持有點數：
            </div><br>
            <p style="height: 0px;">
                
            <div id="DIV1" >
                <form action="check">
                    <input class='mine' type="number" name="range-1" id="amount" width="40" readonly style="border:0; width:50px; text-align: right; font-weight:bold; margin-left: 5px;">點
                </form>
                
            </div> 
            <div id = "bar_DIV2">
                <div style="text-align:right; float:right; z-index: -1 ;" >
                    點
                </div>
                
                <input class='other' 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-1" style="width:850px; margin:10px auto; float: none; "></div><br>



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

    </p>
    <!-- 法幣視覺化長條 -->
<!-- 
    <br>
    <hr style="border: 1.5px  solid"><br>  -->



    
    <div class="hidden-area">
        {{formfields}}        
    </div>

    {{next_button}}


    

<script>
setInterval(
    function processFormData() {
        var nameElement = document.getElementById("amount");
        var mine = nameElement.value;
        var other = {{dis_endow_4}} - nameElement.value;
        
        var price_s_4 = {{dis_price_s_4}}
        var price_o_4 = {{dis_price_o_4}}
        document.getElementsByClassName('mine')[0].innerHTML = mine;
        document.getElementsByClassName('mine')[1].innerHTML = mine*price_s_4;

        document.getElementsByClassName('other')[0].innerHTML = other;
        document.getElementsByClassName('other')[1].innerHTML = other*price_o_4;

        document.getElementById('mine-bar').style.width = price_s_4*mine + 'px';
        document.getElementById('other-bar').style.width = price_o_4*other + 'px';
        
        var mine_coin = price_s_4*mine
        var other_coin = price_o_4*other

        $('#'+'id_hold_' + String({{real_choice_num_4}})).val(mine)
        $('#'+'id_pass_' + String({{real_choice_num_4}})).val(other)    

       
        $('#id_hold_coin_' + String({{real_choice_num_4}})).val(mine_coin)
        $('#id_pass_coin_' + String({{real_choice_num_4}})).val(other_coin);

    },
    0.1*1000
)
$('#id_time_' + String({{real_choice_num_4}})).val(parseInt(new Date().getTime()/1000))
</script>

<script>
$('.otree-btn-next').html('Next')
$('.otree-btn-next').prop('disabled', true);
</script>


<script>
setInterval(
(function check_answer() {
var pass = document.getElementById("amount");
        var pass_value = $('#amount').val();
        if (pass_value != "") {
            $('.otree-btn-next').prop('disabled', false);
        } else {
            $('.otree-btn-next').prop('disabled', true);
        }
    })

)
</script>



{{ include Constants.PAPERCUPS_TEMPLATE }}



{{ endblock }}