{{ 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;
}

.money{
    display: flex;
    width: 500px;
}

.money-text{
    width: 100px;
}

.money-value{
    display: flex;
    justify-content: space-between;
    width: 1000px;
    
}

.slider{
    width: 500px;
    
}


.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: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;
}
.hint-4{
display: none;
}
.hint-5{
display: none;
}
.hint-6{
display: none;
}
.hint-7{
display: none;
}
.hint-8{
display: none;
}
.hint-9{
display: none;
}
.hint-10{
display: none;
}
.hint-11{
display: none;
}
.hint-12{
display: none;
}
.hint-13{
display: none;
}
.hint-14{
display: none;
}
.hint-15{
display: none;
}
.hint-16{
display: none;
}
.hint-17{
display: none;
}
.hint-18{
display: none;
}
.hint-19{
display: none;
}
.hint-20{
display: none;
}
.hint-21{
display: none;
}
.hint-22{
display: none;
margin-top: 0px;
}

.check{
margin-top: 1rem;
}
.error{
display: none;
}
.wrong{
display: none;
}
.correct{
display: none;
}
.next {
    float: right;
    margin: 40px auto;
    }

 .back{
    float: left;
    margin: 40px auto;
    }
</style>

<!-- 分頁 -->

<script src="{% static 'back_button_v1/js/prev_next_button.js' %}"></script>
<link href="{% static 'back_button_v1/css/custom.css' %}" rel="stylesheet">

<ul class="nav nav-tabs   fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist" >
  

    <li class="nav-item">
        <a class="nav-link active " id="part1-tab" data-toggle="tab" href="part1" role="tab" aria-controls="part1" onclick="topFunction()"> 回合1
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link " id="part2-tab" data-toggle="tab" href="part2" role="tab" aria-controls="part2" onclick="topFunction()">回合2
        </a>
    </li>
  
  
  <!-- <li class="nav-item">
      <a class="nav-link" id="part3-tab" data-toggle="tab" href="part3" role="tab" aria-controls="part3" onclick="topFunction()">Tab 3</a>
    </li> -->
  
</ul>

<p>
    
</p>
<div class="card-header bg-transparent mainheader" >
    <h3 class="card-title font-weight-bold mt-3 mb-3" > 決策實驗：正式回合
    </h3>
     </div>

    <p>
        本決策實驗共22個回合，請您完成每個回合的決策。<br>
        <br>
    </p>
    <div class="line"></div>

<!-- Tab_1 content -->
<div class="tab-content" id="myTabContent">

<div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">
    
  

    <h5>1.</h5>
        <!-- 滑桿1 -->

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

            <div id="DIV1" >
                我方持有點數：
            </div>
            <div id="DIV2" style="text-align: right; margin-left:10px;">
                對方持有點數：
            </div>
            <p style="height: 0px;">
            <div id="DIV1" >
                <form action="check">
                    <input class='mine-1' type="number" name="range-1" id="amount_1" 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-1' type="number" name="range-test" id="rest_amount_1" 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:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-1">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>
    <br>
    <hr> 
    <button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
</div>


<div class="tab-pane " id="part2" role="tabpanel" aria-labelledby="part2-tab">

    <h5>2.</h5>
    <!-- 滑桿_2 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-2' type="number" name="range-test" id="amount_2" 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-2' type="number" name="range-test" id="rest_amount_2" 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-2" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-2">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>
    <h5>3.</h5>
    <!-- 滑桿_3 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-3' type="number" name="range-test" id="amount_3" 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-3' type="number" name="range-test" id="rest_amount_3" 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-3" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-3">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>
    <br>
    <hr>
    
    <h5>4.</h5>
    <!-- 滑桿_4 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-4' type="number" name="range-test" id="amount_4" 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-4' type="number" name="range-test" id="rest_amount_4" 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-4" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-4">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>

    <h5>5.</h5>
    <!-- 滑桿_5 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-5' type="number" name="range-test" id="amount_5" 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-5' type="number" name="range-test" id="rest_amount_5" 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-5" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-5">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>
    <br>
    <hr>

    <h5>6.</h5>
     <!-- 滑桿_6 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-6' type="number" name="range-test" id="amount_6" 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-6' type="number" name="range-test" id="rest_amount_6" 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-6" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-6">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>
    <br>
    <hr>


    <h5>7.</h5>
    <!-- 滑桿_7 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-7' type="number" name="range-test" id="amount_7" 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-7' type="number" name="range-test" id="rest_amount_7" 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-7" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-7">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>
    <br>
    <hr>



    <h5>8.</h5>
    <!-- 滑桿_8 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-8' type="number" name="range-test" id="amount_8" 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-8' type="number" name="range-test" id="rest_amount_8" 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-8" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-8">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>
    <h5>9.</h5>
    <!-- 滑桿_9 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-9' type="number" name="range-test" id="amount_9" 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-9' type="number" name="range-test" id="rest_amount_9" 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-9" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-9">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>

    <h5>10.</h5>
    <!-- 滑桿_10 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-10' type="number" name="range-test" id="amount_10" 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-10' type="number" name="range-test" id="rest_amount_10" 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-10" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-10">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>



    <h5>11.</h5>
    <!-- 滑桿_11 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-11' type="number" name="range-test" id="amount_11" 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-11' type="number" name="range-test" id="rest_amount_11" 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-11" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-11">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>

    <h5>12.</h5>
    <!-- 滑桿_12 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-12' type="number" name="range-test" id="amount_12" 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-12' type="number" name="range-test" id="rest_amount_12" 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-12" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-12">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>



    <h5>13.</h5>
    <!-- 滑桿_13 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-13' type="number" name="range-test" id="amount_13" 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-13' type="number" name="range-test" id="rest_amount_13" 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-13" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-13">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>

    <h5>14.</h5>
    <!-- 滑桿_14 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-14' type="number" name="range-test" id="amount_14" 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-14' type="number" name="range-test" id="rest_amount_14" 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-14" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-14">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>


    <h5>15.</h5>
    <!-- 滑桿_15 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-15' type="number" name="range-test" id="amount_15" 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-15' type="number" name="range-test" id="rest_amount_15" 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-15" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-15">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>

    <h5>16.</h5>
    <!-- 滑桿_16 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-16' type="number" name="range-test" id="amount_16" 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-16' type="number" name="range-test" id="rest_amount_16" 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-16" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-16">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>

    <h5>17.</h5>
    <!-- 滑桿_17 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-17' type="number" name="range-test" id="amount_17" 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-17' type="number" name="range-test" id="rest_amount_17" 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-17" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-17">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>


    <h5>18.</h5>
    <!-- 滑桿_18 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-18' type="number" name="range-test" id="amount_18" 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-18' type="number" name="range-test" id="rest_amount_18" 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-18" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-18">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>



    <h5>19.</h5>
    <!-- 滑桿_19 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-19' type="number" name="range-test" id="amount_19" 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-19' type="number" name="range-test" id="rest_amount_19" 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-19" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-19">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>

    <h5>20.</h5>
    <!-- 滑桿_20 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-20' type="number" name="range-test" id="amount_20" 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-20' type="number" name="range-test" id="rest_amount_20" 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-20" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-20">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>



    <h5>21.</h5>
    <!-- 滑桿_21 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-21' type="number" name="range-test" id="amount_21" 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-21' type="number" name="range-test" id="rest_amount_21" 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-21" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-21">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>


    <h5>22.</h5>
    <!-- 滑桿_22 -->

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

    </script>



        <div id="DIV1" >
            我方持有點數：
        </div>
        <div id="DIV2" style="text-align: right; margin-left:10px;">
            對方持有點數：
        </div>
        <p style="height: 0px;">
        <div id="DIV1" >
            <form action="check">
                <input class='mine-22' type="number" name="range-test" id="amount_22" 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-22' type="number" name="range-test" id="rest_amount_22" 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-22" style="width:850px; margin:30px auto; float: none; "></div>



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

    </p>
    <!-- 法幣視覺化長條 -->
    <div class="hint hint-22">
        ▲ 提示文字：<br>
        請完成此回合的決策。
    </div>

    <br>
    <hr>

<!-- 分頁_2 測試 -->
<button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>

</div>
</div>

    <div class="hidden-area">

        {{ formfields }}
        
    </div>
   

    <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="hint correct">
        所有回合皆完成，請點擊 Next 繼續本實驗。<br><br>
    <button class="otree-btn-next btn btn-primary">Next</button>
    

    <!-- {{ next_button }} -->

<script>
setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_1");
        // 一個範圍（0 to endowment）
        // <input type="range" min="0" max={{dis_endow_1}} step="1" value="50" class="money-value" id="range-1" name="range-1">
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_1}} - nameElement.value;
        // document.getElementById('mine-1').textContent = mine;
        // document.getElementById('other-1').textContent = other;
        // 用getElementById時，id只能使用一次
        // 用getElementsByClassName時，需要用幾次就放幾個，eg. 用三次 -> 放[0], [1], [2]
        // 前面<id = "other-1">改為<class = "other-1">
        
        var price_s_1 = {{dis_price_s_1}}
        var price_o_1 = {{dis_price_o_1}}
        document.getElementsByClassName('mine-1')[0].innerHTML = mine;
        // 我的報酬（mine*1: 我方轉換率 = 1）
        document.getElementsByClassName('mine-1')[1].innerHTML = mine*price_s_1;
        // 我分配到的點數
        // document.getElementsByClassName('mine-1')[2].innerHTML = mine*price_s_1;
        // 對方分配到的報酬

        document.getElementsByClassName('other-1')[0].innerHTML = other;
        // 對方報酬（other*2: 對方轉換率 = 2）
        document.getElementsByClassName('other-1')[1].innerHTML = other*price_o_1;
        // 對方分配到的點數
        // document.getElementsByClassName('other-1')[2].innerHTML = other*price_o_1;
        // 對方分配到的報酬

        document.getElementById('mine-bar-1').style.width = price_s_1*mine + 'px';
        // 1*mine: 轉換率*點數
        document.getElementById('other-bar-1').style.width = price_o_1*other + 'px';
        // 2*other: 轉換率*點數

            
        // document.getElementById('contribution').value = mine;
        var $name = ("hold_" + String({{real_choice_num_1}}) );


        $('#'+'id_hold_' + String({{real_choice_num_1}})).val(mine)
        $('#'+'id_pass_' + String({{real_choice_num_1}})).val(other)
       
        // $('#id_hold_1').val(mine)
        // $('#id_pass_1').val(other);

    },
    0.1*1000
)


setInterval(
        function processFormData() {
            // nameElement
            var nameElement = document.getElementById("amount_2");
            var mine = nameElement.value;
            // 目前的我方點數（隨著滑桿移動）
            var other = {{dis_endow_2}} - nameElement.value;
            
            var price_s_2 = {{dis_price_s_2}}
            var price_o_2 = {{dis_price_o_2}}
            document.getElementsByClassName('mine-2')[0].innerHTML = mine;
            document.getElementsByClassName('mine-2')[1].innerHTML = mine*price_s_2;
    
            document.getElementsByClassName('other-2')[0].innerHTML = other;
            document.getElementsByClassName('other-2')[1].innerHTML = other*price_o_2;
    
            document.getElementById('mine-bar-2').style.width = price_s_2*mine + 'px';
            document.getElementById('other-bar-2').style.width = price_o_2*other + 'px';
            
            var $name = ("hold_" + String({{real_choice_num_2}}) );
    
    
            $('#'+'id_hold_' + String({{real_choice_num_2}})).val(mine)
            $('#'+'id_pass_' + String({{real_choice_num_2}})).val(other)
           
    
        },
        0.1*1000
    )

setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_3");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_3}} - nameElement.value;
        
        var price_s_3 = {{dis_price_s_3}}
        var price_o_3 = {{dis_price_o_3}}
        document.getElementsByClassName('mine-3')[0].innerHTML = mine;
        document.getElementsByClassName('mine-3')[1].innerHTML = mine*price_s_3;

        document.getElementsByClassName('other-3')[0].innerHTML = other;
        document.getElementsByClassName('other-3')[1].innerHTML = other*price_o_3;

        document.getElementById('mine-bar-3').style.width = price_s_3*mine + 'px';
        document.getElementById('other-bar-3').style.width = price_o_3*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_3}}) );


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

    },
    0.1*1000
)

setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_4");
        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-4')[0].innerHTML = mine;
        document.getElementsByClassName('mine-4')[1].innerHTML = mine*price_s_4;

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

        document.getElementById('mine-bar-4').style.width = price_s_4*mine + 'px';
        document.getElementById('other-bar-4').style.width = price_o_4*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_4}}) );


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

    },
    0.1*1000
)

setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_5");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_5}} - nameElement.value;
        
        var price_s_5 = {{dis_price_s_5}}
        var price_o_5 = {{dis_price_o_5}}
        document.getElementsByClassName('mine-5')[0].innerHTML = mine;
        document.getElementsByClassName('mine-5')[1].innerHTML = mine*price_s_5;

        document.getElementsByClassName('other-5')[0].innerHTML = other;
        document.getElementsByClassName('other-5')[1].innerHTML = other*price_o_5;

        document.getElementById('mine-bar-5').style.width = price_s_5*mine + 'px';
        document.getElementById('other-bar-5').style.width = price_o_5*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_5}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_6");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_6}} - nameElement.value;
        
        var price_s_6 = {{dis_price_s_6}}
        var price_o_6 = {{dis_price_o_6}}
        document.getElementsByClassName('mine-6')[0].innerHTML = mine;
        document.getElementsByClassName('mine-6')[1].innerHTML = mine*price_s_6;

        document.getElementsByClassName('other-6')[0].innerHTML = other;
        document.getElementsByClassName('other-6')[1].innerHTML = other*price_o_6;

        document.getElementById('mine-bar-6').style.width = price_s_6*mine + 'px';
        document.getElementById('other-bar-6').style.width = price_o_6*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_6}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_7");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_7}} - nameElement.value;
        
        var price_s_7 = {{dis_price_s_7}}
        var price_o_7 = {{dis_price_o_7}}
        document.getElementsByClassName('mine-7')[0].innerHTML = mine;
        document.getElementsByClassName('mine-7')[1].innerHTML = mine*price_s_7;

        document.getElementsByClassName('other-7')[0].innerHTML = other;
        document.getElementsByClassName('other-7')[1].innerHTML = other*price_o_7;

        document.getElementById('mine-bar-7').style.width = price_s_7*mine + 'px';
        document.getElementById('other-bar-7').style.width = price_o_7*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_7}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_8");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_8}} - nameElement.value;
        
        var price_s_8 = {{dis_price_s_8}}
        var price_o_8 = {{dis_price_o_8}}
        document.getElementsByClassName('mine-8')[0].innerHTML = mine;
        document.getElementsByClassName('mine-8')[1].innerHTML = mine*price_s_8;

        document.getElementsByClassName('other-8')[0].innerHTML = other;
        document.getElementsByClassName('other-8')[1].innerHTML = other*price_o_8;

        document.getElementById('mine-bar-8').style.width = price_s_8*mine + 'px';
        document.getElementById('other-bar-8').style.width = price_o_8*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_8}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_9");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_9}} - nameElement.value;
        
        var price_s_9 = {{dis_price_s_9}}
        var price_o_9 = {{dis_price_o_9}}
        document.getElementsByClassName('mine-9')[0].innerHTML = mine;
        document.getElementsByClassName('mine-9')[1].innerHTML = mine*price_s_9;

        document.getElementsByClassName('other-9')[0].innerHTML = other;
        document.getElementsByClassName('other-9')[1].innerHTML = other*price_o_9;

        document.getElementById('mine-bar-9').style.width = price_s_9*mine + 'px';
        document.getElementById('other-bar-9').style.width = price_o_9*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_9}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_10");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_10}} - nameElement.value;
        
        var price_s_10 = {{dis_price_s_10}}
        var price_o_10 = {{dis_price_o_10}}
        document.getElementsByClassName('mine-10')[0].innerHTML = mine;
        document.getElementsByClassName('mine-10')[1].innerHTML = mine*price_s_10;

        document.getElementsByClassName('other-10')[0].innerHTML = other;
        document.getElementsByClassName('other-10')[1].innerHTML = other*price_o_10;

        document.getElementById('mine-bar-10').style.width = price_s_10*mine + 'px';
        document.getElementById('other-bar-10').style.width = price_o_10*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_10}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_11");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_11}} - nameElement.value;
        
        var price_s_11 = {{dis_price_s_11}}
        var price_o_11 = {{dis_price_o_11}}
        document.getElementsByClassName('mine-11')[0].innerHTML = mine;
        document.getElementsByClassName('mine-11')[1].innerHTML = mine*price_s_11;

        document.getElementsByClassName('other-11')[0].innerHTML = other;
        document.getElementsByClassName('other-11')[1].innerHTML = other*price_o_11;

        document.getElementById('mine-bar-11').style.width = price_s_11*mine + 'px';
        document.getElementById('other-bar-11').style.width = price_o_11*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_11}}) );


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

    },
    0.1*1000
)

setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_12");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_12}} - nameElement.value;
        
        var price_s_12 = {{dis_price_s_12}}
        var price_o_12 = {{dis_price_o_12}}
        document.getElementsByClassName('mine-12')[0].innerHTML = mine;
        document.getElementsByClassName('mine-12')[1].innerHTML = mine*price_s_12;

        document.getElementsByClassName('other-12')[0].innerHTML = other;
        document.getElementsByClassName('other-12')[1].innerHTML = other*price_o_12;

        document.getElementById('mine-bar-12').style.width = price_s_12*mine + 'px';
        document.getElementById('other-bar-12').style.width = price_o_12*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_12}}) );


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

    },
    0.1*1000
)

setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_13");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_13}} - nameElement.value;
        
        var price_s_13 = {{dis_price_s_13}}
        var price_o_13 = {{dis_price_o_13}}
        document.getElementsByClassName('mine-13')[0].innerHTML = mine;
        document.getElementsByClassName('mine-13')[1].innerHTML = mine*price_s_13;

        document.getElementsByClassName('other-13')[0].innerHTML = other;
        document.getElementsByClassName('other-13')[1].innerHTML = other*price_o_13;

        document.getElementById('mine-bar-13').style.width = price_s_13*mine + 'px';
        document.getElementById('other-bar-13').style.width = price_o_13*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_13}}) );


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

    },
    0.1*1000
)

setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_14");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_14}} - nameElement.value;
        
        var price_s_14 = {{dis_price_s_14}}
        var price_o_14 = {{dis_price_o_14}}
        document.getElementsByClassName('mine-14')[0].innerHTML = mine;
        document.getElementsByClassName('mine-14')[1].innerHTML = mine*price_s_14;

        document.getElementsByClassName('other-14')[0].innerHTML = other;
        document.getElementsByClassName('other-14')[1].innerHTML = other*price_o_14;

        document.getElementById('mine-bar-14').style.width = price_s_14*mine + 'px';
        document.getElementById('other-bar-14').style.width = price_o_14*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_14}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_15");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_15}} - nameElement.value;
        
        var price_s_15 = {{dis_price_s_15}}
        var price_o_15 = {{dis_price_o_15}}
        document.getElementsByClassName('mine-15')[0].innerHTML = mine;
        document.getElementsByClassName('mine-15')[1].innerHTML = mine*price_s_15;

        document.getElementsByClassName('other-15')[0].innerHTML = other;
        document.getElementsByClassName('other-15')[1].innerHTML = other*price_o_15;

        document.getElementById('mine-bar-15').style.width = price_s_15*mine + 'px';
        document.getElementById('other-bar-15').style.width = price_o_15*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_15}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_16");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_16}} - nameElement.value;
        
        var price_s_16 = {{dis_price_s_16}}
        var price_o_16 = {{dis_price_o_16}}
        document.getElementsByClassName('mine-16')[0].innerHTML = mine;
        document.getElementsByClassName('mine-16')[1].innerHTML = mine*price_s_16;

        document.getElementsByClassName('other-16')[0].innerHTML = other;
        document.getElementsByClassName('other-16')[1].innerHTML = other*price_o_16;

        document.getElementById('mine-bar-16').style.width = price_s_16*mine + 'px';
        document.getElementById('other-bar-16').style.width = price_o_16*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_16}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_17");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_17}} - nameElement.value;
        
        var price_s_17 = {{dis_price_s_17}}
        var price_o_17 = {{dis_price_o_17}}
        document.getElementsByClassName('mine-17')[0].innerHTML = mine;
        document.getElementsByClassName('mine-17')[1].innerHTML = mine*price_s_17;

        document.getElementsByClassName('other-17')[0].innerHTML = other;
        document.getElementsByClassName('other-17')[1].innerHTML = other*price_o_17;

        document.getElementById('mine-bar-17').style.width = price_s_17*mine + 'px';
        document.getElementById('other-bar-17').style.width = price_o_17*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_17}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_18");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_18}} - nameElement.value;
        
        var price_s_18 = {{dis_price_s_18}}
        var price_o_18 = {{dis_price_o_18}}
        document.getElementsByClassName('mine-18')[0].innerHTML = mine;
        document.getElementsByClassName('mine-18')[1].innerHTML = mine*price_s_18;

        document.getElementsByClassName('other-18')[0].innerHTML = other;
        document.getElementsByClassName('other-18')[1].innerHTML = other*price_o_18;

        document.getElementById('mine-bar-18').style.width = price_s_18*mine + 'px';
        document.getElementById('other-bar-18').style.width = price_o_18*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_18}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_19");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_19}} - nameElement.value;
        
        var price_s_19 = {{dis_price_s_19}}
        var price_o_19 = {{dis_price_o_19}}
        document.getElementsByClassName('mine-19')[0].innerHTML = mine;
        document.getElementsByClassName('mine-19')[1].innerHTML = mine*price_s_19;

        document.getElementsByClassName('other-19')[0].innerHTML = other;
        document.getElementsByClassName('other-19')[1].innerHTML = other*price_o_19;

        document.getElementById('mine-bar-19').style.width = price_s_19*mine + 'px';
        document.getElementById('other-bar-19').style.width = price_o_19*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_19}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_20");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_20}} - nameElement.value;
        
        var price_s_20 = {{dis_price_s_20}}
        var price_o_20 = {{dis_price_o_20}}
        document.getElementsByClassName('mine-20')[0].innerHTML = mine;
        document.getElementsByClassName('mine-20')[1].innerHTML = mine*price_s_20;

        document.getElementsByClassName('other-20')[0].innerHTML = other;
        document.getElementsByClassName('other-20')[1].innerHTML = other*price_o_20;

        document.getElementById('mine-bar-20').style.width = price_s_20*mine + 'px';
        document.getElementById('other-bar-20').style.width = price_o_20*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_20}}) );


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

    },
    0.1*1000
)

setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_21");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_21}} - nameElement.value;
        
        var price_s_21 = {{dis_price_s_21}}
        var price_o_21 = {{dis_price_o_21}}
        document.getElementsByClassName('mine-21')[0].innerHTML = mine;
        document.getElementsByClassName('mine-21')[1].innerHTML = mine*price_s_21;

        document.getElementsByClassName('other-21')[0].innerHTML = other;
        document.getElementsByClassName('other-21')[1].innerHTML = other*price_o_21;

        document.getElementById('mine-bar-21').style.width = price_s_21*mine + 'px';
        document.getElementById('other-bar-21').style.width = price_o_21*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_21}}) );


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

    },
    0.1*1000
)


setInterval(
    function processFormData() {
        // nameElement
        var nameElement = document.getElementById("amount_22");
        var mine = nameElement.value;
        // 目前的我方點數（隨著滑桿移動）
        var other = {{dis_endow_22}} - nameElement.value;
        
        var price_s_22 = {{dis_price_s_22}}
        var price_o_22 = {{dis_price_o_22}}
        document.getElementsByClassName('mine-22')[0].innerHTML = mine;
        document.getElementsByClassName('mine-22')[1].innerHTML = mine*price_s_22;

        document.getElementsByClassName('other-22')[0].innerHTML = other;
        document.getElementsByClassName('other-22')[1].innerHTML = other*price_o_22;

        document.getElementById('mine-bar-22').style.width = price_s_22*mine + 'px';
        document.getElementById('other-bar-22').style.width = price_o_22*other + 'px';
        
        var $name = ("hold_" + String({{real_choice_num_22}}) );


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

    },
    0.1*1000
)

// 未填答提醒
function check(){
try{
    var q1 = document.getElementsByClassName('mine-1')[0].value;
    var q2 = document.getElementsByClassName('mine-2')[0].value;
    var q3 = document.getElementsByClassName('mine-3')[0].value;
    var q4 = document.getElementsByClassName('mine-4')[0].value;
    var q5 = document.getElementsByClassName('mine-5')[0].value;
    var q6 = document.getElementsByClassName('mine-6')[0].value;
    var q7 = document.getElementsByClassName('mine-7')[0].value;
    var q8 = document.getElementsByClassName('mine-8')[0].value;
    var q9 = document.getElementsByClassName('mine-9')[0].value;
    var q10 = document.getElementsByClassName('mine-10')[0].value;
    var q11 = document.getElementsByClassName('mine-11')[0].value;
    var q12 = document.getElementsByClassName('mine-12')[0].value;
    var q13 = document.getElementsByClassName('mine-13')[0].value;
    var q14 = document.getElementsByClassName('mine-14')[0].value;
    var q15 = document.getElementsByClassName('mine-15')[0].value;
    var q16 = document.getElementsByClassName('mine-16')[0].value;
    var q17 = document.getElementsByClassName('mine-17')[0].value;
    var q18 = document.getElementsByClassName('mine-18')[0].value;
    var q19 = document.getElementsByClassName('mine-19')[0].value;
    var q20 = document.getElementsByClassName('mine-20')[0].value;
    var q21 = document.getElementsByClassName('mine-21')[0].value;
    var q22 = document.getElementsByClassName('mine-22')[0].value;
// var nameElement = document.getElementById("amount_1");
// var q1 = nameElement.value;

// if (q1 == "" ){
//     $(".hint-1").show()
// }else{
//     $(".hint-1").hide()
if (q1 == "" ){
    $(".hint-1").show()
}else{
    $(".hint-1").hide()}
if (q2 == "" ){
    $(".hint-2").show()
}else{
    $(".hint-2").hide()}
if (q3 == "" ){
    $(".hint-3").show()
}else{
    $(".hint-3").hide()}
if (q4 == "" ){
    $(".hint-4").show()
}else{
    $(".hint-4").hide()}
if (q5 == "" ){
    $(".hint-5").show()
}else{
    $(".hint-5").hide()}
if (q6 == "" ){
    $(".hint-6").show()
}else{
    $(".hint-6").hide()}
if (q7 == "" ){
    $(".hint-7").show()
}else{
    $(".hint-7").hide()}
if (q8 == "" ){
    $(".hint-8").show()
}else{
    $(".hint-8").hide()}
if (q9 == "" ){
    $(".hint-9").show()
}else{
    $(".hint-9").hide()}
if (q10 == "" ){
    $(".hint-10").show()
}else{
    $(".hint-10").hide()}
if (q11 == "" ){
    $(".hint-11").show()
}else{
    $(".hint-11").hide()}
if (q12 == "" ){
    $(".hint-12").show()
}else{
    $(".hint-12").hide()}
if (q13 == "" ){
    $(".hint-13").show()
}else{
    $(".hint-13").hide()}
if (q14 == "" ){
    $(".hint-14").show()
}else{
    $(".hint-14").hide()}
if (q15 == "" ){
    $(".hint-15").show()
}else{
    $(".hint-15").hide()}
if (q16 == "" ){
    $(".hint-16").show()
}else{
    $(".hint-16").hide()}
if (q17 == "" ){
    $(".hint-17").show()
}else{
    $(".hint-17").hide()}
if (q18 == "" ){
    $(".hint-18").show()
}else{
    $(".hint-18").hide()}
if (q19 == "" ){
    $(".hint-19").show()
}else{
    $(".hint-19").hide()}
if (q20 == "" ){
    $(".hint-20").show()
}else{
    $(".hint-20").hide()}
if (q21 == "" ){
    $(".hint-21").show()
}else{
    $(".hint-21").hide()}
if (q22 == "" ){
    $(".hint-22").show()
}else{
    $(".hint-22").hide()}

// if (q1 != "" && q2 != "" && q3 != "" && q4 != "" && q5 != "" && q6 != "" && q7 != "" && q8 != "" && q9 != "" && q10 != "" && q11 != "" && q12 != "" && q13 != "" && q14 != "" && q15 != "" && q16 != "" && q17 != "" && q18 != "" && q19 != "" && q20 != "" && q21 != "" && q22 != "" ){
// $('.check').hide()
// $('.error').hide()
// $('.correct').show()
// }else{
// $('.error').show()
// $('.correct').hide()
// }

// if (q1 != "" ){
// $('.check').hide()
// $('.error').hide()
// $('.correct').show()
// }else{
// $('.error').show()
// $('.correct').hide()
// }

}catch(err){
$('.error').show()
$('.wrong').hide()
$('.correct').hide()
}
}


</script>

<!-- <script>
$(document).bind("contextmenu copy selectstart", function(){
    return false;
});
</script> -->

<script>
    function bootstrapTabControl(){
  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){
          alert(i)
          alert(items.length)
          // 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){
          alert(i)
          // 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>


<style type="text/css">
        .twinkle{
            color: #fff;
            border: #0d6efd;
            animation: twinkle 1s alternate infinite;
        }
        @keyframes twinkle{
			from{background: #0d6efd;}
            to{background: #0d6dfd4f;}
        }	
</style>
{{ endblock }}