{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% load i18n %}


{{ block title }}
抽奖
{{ endblock }}


{{ block head}}

{{ block styles }}
<link href="{% static 'custom.css' %}" rel="stylesheet">
{{ endblock }}


{{ endblock }}


{{ block content }}


<div class="wrapper">
 你被抽中了第{{i}}个表格的第{{row}}行：


        <div style="display:none;">
            行号 ： {{row}}
            <br>
            列表： {{cols}}
            <br>
            可变列号： {{var_col}}
            <br>
            可变列：{{value_list}}
            <br>

            <br>
            sp = {{sp}}

            <br>
            可变列的值：{{col_var_value}}

            <br>
            真实行：{{true_row}}

            <br>
            本行选A：{{is_a}}

            <br>
            骰子结果：{{dice}}
            <br>

            彩票结果：{{result}}
        </div>



        <div class="card">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th></th>
                    <th class="text-center salesInfoStyle" colspan="2">选项A</th>
                    <th class="text-center salesInfoStyle" colspan="2"></th>
                    <th class="text-center salesInfoStyle" colspan="2">选项B</th>
                </tr>

                <tr>
                    <th></th>
                    <th>{{ prob_str.0 }}的机会获得</th>
                    <th>{{ prob_str.1 }}的机会获得</th>
                    <th class="text-center salesInfoStyle" colspan="2">决策</th>
                    <th>{{ prob_str.2 }}的机会获得</th>
                    <th>{{ prob_str.3 }}的机会获得</th>
                </tr>
                </thead>

                <tr>
                    <td><b>{{row}}</b></td>
                    <td align="left">{{true_row.0}}个实验币</td>
                    <td align="left">{{true_row.1}}个实验币</td>
                    <td align="left">A<input class="form-check-input"  type="radio" value="A" {{if is_a}} checked {{endif}}></td>
                    <td align="left">B<input class="form-check-input"  type="radio" value="B" {{if is_b}} checked {{endif}}></td>
                    <td align="left">{{true_row.2}}个实验币</td>
                    <td align="left">{{true_row.3}}个实验币</td>
                </tr>
            </table>



    </div>

    <div style="text-align: center;">
        <p></p>
        <p>请点击【抽取】，从1-6直接抽取一个数字，以此决定你的最终收益</p>
        <button id = "id_roll" type="button" class="btn btn-success"  onclick="roll()" > 抽取</button>

        <div id="dice"  style="font-size:50px;">?</div>
    </div>


    <div id="divnext" style="visibility: hidden">
        <button class="otree-btn-next btn btn-primary form-control">下一页</button>
    </div>

</div>


<script>
<!-- 摇骰子 -->
let timer_counter;
let xid ;
let a_list;
function shuffle(arr) {
    return arr.sort(() => (Math.random() - 0.5));
}

function tick(){
    timer_counter --;
    document.getElementById("dice").innerText = a_list[timer_counter];
    if(timer_counter === 0){
        clearInterval(xid);
        document.getElementById("divnext").style.visibility = "visible";
        document.getElementById("id_roll").style.visibility = "hidden";
    }
}
function roll() {
    a_list = [{{dice}}].concat(shuffle([1,2,3,4,5,6,1,2,3,4,5,6]));
    timer_counter = a_list.length;
    xid = setInterval("tick()",25);
}
</script>

{{ endblock }}