{% extends "tradeoff/TablePageBase.html" %}

{{ block content }}

<div class = "card" id="debug_block" style="display:{{ if session.vars.debug }} block {{ else }}none{{ endif }}">
    <h5 class="card-header">测试用数据</h5>
    计时器：<div id="timer" ></div>
    <div>
        实验顺序:
         <p>
            {{participant.vars.table_list_show}}
        </p>
        <p>
            round: {{player.round_number}}
        </p>
        <p>
            table_id: {{table_id}}
        </p>
        选项：
        <input id="demo" type="text" value="">
        {{ formfields}}
    </div>
</div>

<div class="wrapper instructions">

    <p>

    <p></p>
<p>请回答下面的21个问题，每道题都需要在A和B两个选项中进行选择，<b>选项A是相同的一注彩票，选项B是不同的21注彩票。</b></p>
<p>选择选项A，你有{{ prob_str.0 }}的机会获得{{col_1}}个实验币，{{ prob_str.1 }}的机会获得{{col_2}}个实验币 </p>
<p>选择选项B，你有{{ prob_str.2 }}的机会获得X个实验币，{{ prob_str.3 }}的机会获得{{col_4}}个实验币，<b>X的数值如表中所示变化</b>。</p>


    </p>


</div>

<div class="wrapper">

    <div class="card">
        <table class="table-striped-sm">

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

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

            {{ for col_3 in value_str_list }}
            <tr>
                <td><b>{{ forloop.counter }}</b></td>
                <td>{{col_1}}个实验币</td>
                <td>{{col_2}}个实验币</td>

                <td>A<input class="form-check-input" id="id_choice_{{ forloop.counter }}-a"
                           name="choice_{{ forloop.counter }}-a"
                           onClick='r_click({{ forloop.counter }},"A",{{value_list|safe }}, {{ value_str_list|length }})' type="radio" value="A"></td>
                <td>B<input class="form-check-input" id="id_choice_{{ forloop.counter }}-b"
                           name="choice_{{ forloop.counter }}-b"
                           onClick='r_click({{ forloop.counter }},"B",{{value_list|safe }}, {{ value_str_list|length }})' type="radio" value="B"></td>

                <td>{{col_3}}个实验币</td>
                <td>{{col_4}}个实验币</td>

            </tr>
            {{ endfor }}
        </table>


    </div>

</div>

<div class="wrapper">
    <button class="btn btn-primary form-control" id="id_next" style="display: none">下一页</button>
    <button class="btn btn-secondary form-control" id="id_fake_next" style="display: block" type="button"> 下一页</button>
</div>

<!-- 提示窗口 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">提示</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        请认真选择！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-success" data-bs-dismiss="modal">确定</button>
      </div>
    </div>
  </div>
</div>

{{ endblock }}