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

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

            .wrong {
  border: 0.3em solid red;
  margin: 0.5em;
}
        .right {
  border: 0.3em solid green;
  margin: 0.5em;
}

    .next {
    float: right;
    margin: 40px auto;
    }

 .back{
    float: left;
    margin: 40px auto;
    }



    .page-header {
    margin: 0px 0 5px;
    padding: 0;
    border-bottom: none;
    text-align: center;
}

p{
    text-align: justify;
    text-justify: inter-word;
}


.nav {
    visibility: hidden;
}
    </style>

<style>
table, th, td {
  border: 1px solid grey;
    text-align: center;
}
table{
    width: 60%;
    alignment: center;
}

td{
width: 15em;
height: 4em;

}
</style>
{% endblock %}


{% block scripts %}

    <script src="{% static 'correlation/js/prev_next_button.js' %}"></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){
          // 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){
          // 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>
{% endblock %}


{% block title %}
{% endblock %}

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


  <li class="nav-item" >


    <a {%  if error == 1 %} class= "nav-link" {% elif error == 0 %} class= "nav-link active" {% endif %} id="part1-tab" data-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Tab 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()">Tab 2</a>
  </li>
  <li class="nav-item">
    <a {%  if error == 0 %} class= "nav-link" {% elif error == 1 %} class= "nav-link active" {% endif %} id="part3-tab" data-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Tab 3</a>
  </li>

</ul>



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

<div {%  if error == 1 %} class= "tab-pane" {% elif error == 0 %} class= "tab-pane show active" {% endif %} id="part1" role="tabpanel" aria-labelledby="part1-tab">



 <h3  align="center"  >  实验说明
 </h3>
        <br>
        <br>

<p>
您好，欢迎参与本次实验。从现在开始的整个实验过程中，请您不要与其他参与者交谈或者使用您的移动电话。请您仔细阅读以下实验说明。您对实验要求的充分理解是本次实验能成功完成的关键。
    如果您在任何时候有任何疑问都可以举手询问，实验员将会在您的座位处回答您的问题。
    <p>
在本次实验中，您可以赚取实验货币—银币。实验结束后，您所获得的银币将可以兑换成人民币，汇率为
    <b> 1元＝2银币。</b>
    <p>
实验过程中，您总共会遇到{{ Constants.num_rounds }}个决策任务。在每个决策任务中，您需要在A和B两个选项间做出选择。选项中的报酬金额是由计算机模拟的有100个区域 (或者偶尔是99个区域）的幸运转盘的转动结果决定的，<b>所有区域被命中的概率都相同</b>。
<b>这些决定仅取决于您的个人偏好，没有对错之分。</b>
接下来，我们会向您展示一些示例，请您仔细研读。</p>



 <h3  align="center"  >
<button align="center" onclick="topFunction()" type="button" class="nexttab btn-primary btn next">下一步</button>

 </h3>
</div>


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


 <h3  align="center"  >  实验说明 </h3>
        <br>
        <br>
     <b> 示例任务： </b>
<div align="center">
             <table>
        <tr>
        <td>

        </td>
            {% for ff, ft, p in fields %}
                <td>
               区域 <br>
                {{ ff }}-{{ ft }} <br>
                    ({{ p }}%)
                </td>
            {% endfor %}
    </tr>
    <tr>
        <td>

        <input type="radio" id="A" name="skewed" disabled >
        <label for="A">选项 A </label><br>

        </td>
            {% for o in oo_1 %}
                <td>
                {{ o }}
                </td>
            {% endfor %}
    </tr>
        <tr>
        <td>

        <input type="radio" id="B" name="skewed" disabled >
        <label for="B">选项 B </label><br>

        </td>
            {% for o in oo_2 %}
                <td>
                {{ o }}
                </td>
            {% endfor %}
    </tr>


    </table>
</div>
 <br>
<p>
    {% for ff, ft, p, o1, o2 in explain %}
如果幸运转盘停留在 {{ ff }}-{{ ft }} 的区域内(对应的概率为{{ p }}%), 选择选项A您能得到{{ o1 }}银币, 选择选项B您能得到{{ o2 }} 银币。
{% endfor %}
</p>

 <b> 报酬：</b>
<p>
   <b>实验结束后，计算机会从您完成的{{ Constants.num_rounds }}个决策任务中随机选取其中一个任务，作为给予报酬的依据。
   </b>您的具体报酬将由幸运转盘的转动结果决定。例如，假设示例任务被选中作为报酬的支付依据，且幸运转盘停留在区域93。
    如果您之前的选择是选项A，您将会得到70银币；如果您之前的选择是选项B，您将会得到50银币。
<p>
实验结束后，报酬将会以现金的方式支付。
<p>
<b>请仔细观察以下{{ Constants.num_rounds }}个决策任务，不同任务的报酬金额和对应的概率会发生改变</b>。
</p>


<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">下一步</button>
         <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">返回</button>


  </div>


<div {%  if error == 0 %} class= "tab-pane" {% elif error == 1 %} class= "tab-pane show active" {% endif %} id="part3" role="tabpanel" aria-labelledby="part3-tab">

      <h3  align="center"> 理解性测试 </h3>
      在实验正式开始之前，请您先回答以下理解性问题：
      <br>
      <br>

      <div align="center">
             <table>
                <tr>
        <td>
        </td>
            {% for ff, ft, p in fields_2 %}
                <td>
               区域 <br>
                {{ ff }}-{{ ft }} <br>
                    ({{ p }}%)
                </td>
            {% endfor %}
    </tr>
    <tr>
        <td>

        <input type="radio" id="A" name="skewed" disabled >
        <label for="A">选项 A </label><br>

        </td>
            {% for o in oo_1_2 %}
                <td>
                {{ o }}
                </td>
            {% endfor %}
    </tr>
        <tr>
        <td>

        <input type="radio" id="B" name="skewed" disabled >
        <label for="B">选项 B </label><br>

        </td>
            {% for o in oo_2_2 %}
                <td>
                {{ o }}
                </td>
            {% endfor %}
    </tr>


    </table>
</div>

      <br>
  <hr>
Q1. 假设您选择了选项A，你会得到的结果是：
</p>

          <form id='form_1'>
        <input type="radio" id="1" name="test_1" value=0>
  <label for="1">15%的概率得到70银币，80%的概率得到40银币，5%的概率得到50银币。</label><br>
    <input type="radio" id="2" name="test_1" value=1  {% if test_1 == 1%} checked {% endif %}>
  <label for="2">15%的概率得到20银币，80%的概率得到30银币，5%的概率得到150银币。</label><br>
              <input type="radio" id="3" name="test_1" value=0>
  <label for="3">30%的概率得到20银币，30%的概率得到30银币，40%的概率得到150银币。</label><br>
        <p align="justify">
            {% if error == 1%}
                {% if test_1 == 0 %}
                <div class="wrong">
              您给出的答案不正确。
              记住您的报酬取决于您选择的选项。在此例中，选项A被选中。
                </div>
            {% elif test_1 == 1 %}
                <div class="right">
                    您的回答正确。如果您选择了选项A，您有15%的概率得到20银币，80%的概率得到30银币，5%的概率得到150银币。
                </div>
            {% endif %}
                      {% endif %}

                        <hr>


Q2. 假设幸运转盘停留在区域36，下列哪个选项是正确的：
</p>
        <input type="radio" id="2_1" name='test_2' value=1 {% if test_2 == 1%} checked {% endif %}>
  <label for="2_1">选择选项A会得到30银币的报酬，选择选项B会得到40银币的报酬。</label><br>
    <input type="radio" id="2_2" name='test_2' value=0>
  <label for="2_2">选择选项A会得到20银币的报酬，选择选项B会得到70银币的报酬。</label><br>
                  <input type="radio" id="2_3" name='test_2' value=0>
  <label for="2_3">选择选项A会得到150银币的报酬，选择选项B会得到150银币的报酬。</label>

    <p align="justify">
                      {% if error == 1%}
                {% if test_2 == 0 %}
                <div class="wrong">
              您给出的答案不正确。
              记住两个选项产生的报酬是由幸运转盘的转动结果决定的。
              <br>
              如果幸运转盘停留在区域 1-15，选择选项A会得到20银币的报酬；如果幸运转盘停留在区域 16-95，选择选项A会得到30银币的报酬；
              如果幸运转盘停留在区域 96-100，选择选项A会得到150银币的报酬。
               <br>
              如果幸运转盘停留在区域 1-15，选择选项B会得到70银币的报酬；如果幸运转盘停留在区域 16-95，选择选项B会得到40银币的报酬；
              如果幸运转盘停留在区域 96-100，选择选项B会得到50银币的报酬。
                </div>
            {% elif test_2 == 1 %}
                <div class="right">
              您的回答正确。如果幸运转盘停留在区域36，选择选项A会得到30银币的报酬，选择选项B会得到40银币的报酬。
                </div>
            {% endif %}
                      {% endif %}
                    <hr>
Q3. 下列哪个选项是正确的：
    </p>
        <input type="radio" id="3_1" name="test_3" value=0>
  <label for="3_1">如果幸运转盘停留在区域97，选择选项A会得到30银币的报酬。</label><br>
    <input type="radio" id="3_2" name="test_3" value=0>
  <label for="3_2">无论我选择哪个选项，我都会得到相同的报酬。</label><br>
       <input type="radio" id="3_3" name="test_3" value=1  {% if test_3 == 1%} checked {% endif %}>
  <label for="3_3">选择选项B有15%的概率获得70银币的报酬。</label><br>
</form>
                {% if error == 1%}
                {% if test_3 == 0 %}
                <div class="wrong">
                您给出的答案不正确。
                记住您得到的报酬取决于您选择的选项。两个选项产生的报酬是由幸运转盘的转动结果决定的。
                <br>
                如果幸运转盘停留在区域 1-15，选择选项A会得到20银币的报酬；如果幸运转盘停留在区域 16-95，选择选项A会得到30银币的报酬；
                如果幸运转盘停留在区域 96-100，选择选项A会得到150银币的报酬。
                 <br>
                如果幸运转盘停留在区域 1-15，选择选项B会得到70银币的报酬；如果幸运转盘停留在区域 16-95，选择选项B会得到40银币的报酬；
                如果幸运转盘停留在区域 96-100，选择选项B会得到50银币的报酬。 <br>
                幸运转盘在每个区域停留的概率是相同的。
                </div>
            {% elif test_3 == 1 %}
                <div class="right">
                您的回答正确。选择选项B有15%的概率得到70银币的报酬。
                </div>
            {% endif %}
                      {% endif %}

    <br>

    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">返回</button>


 <h3  align="center" >
    <button class="nexttab btn-primary btn next">下一步</button>
 </h3>

</div>



  </div>



{% endblock %}