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

{% block styles %}
    <style>

        .grid-container {
  display: grid;
  grid-template-columns: 3ch 1fr;
  align-items:baseline;
}

.grid-container input {
  grid-column-start: 1;
}

.grid-container label {
  grid-column-start: 2;
}
            #selected_2 {
background-color: #efe341;
            }

            .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>

{% endblock %}


{% block scripts %}

<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"  >  Instructions Part I (1/2)
 </h3>
        <br>
        <br>
    <p>
    <b> Summary: </b>
        In part I of the experiment, you will take a test.
        At the beginning of the experiment, each participant has been randomly assigned to one of two groups, group A or group B.
        You can earn a bonus of {{Constants.bonus}} Euro.
        Whether or not you earn the bonus of {{Constants.bonus}} Euros depends on your group assignment and on the number of questions you answer correctly in the test.
         </p>
    <b> The task:</b>
    The questions we will ask you are similar to those that are usually used in IQ tests to measure general intelligence.
    There is a total of 40 questions.
    You will have {{Constants.time_task}} minutes to answer as many questions as possible correctly.
    A timer will display the time you have left.
    For each question you answer correctly, you will obtain 1 point.
    No points are deducted for wrong answers.
    In the black box below, you can see an example task.
     </p>
    <u><b>Example Task: </b></u>
     <div style="border:3px; border-style:solid; border-color:#130e0e; padding: 1em;">

             <img src="{% static 'example_task.png' %}" width="80%" height="auto%" align='center'>
     </div>

    <br>
    <b>Group Assignment:</b>
    At the beginning of the experiment, half of the participants have been randomly assigned to one of two groups, group A and group B.
    This group assignment will impact your chances of winning the bonus.
    We will not inform you which group you or others were assigned to.
     <p>
    On the next page, you will learn how bonus payments are determined.
    </p>






<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">


 <h3  align="center" >  Instructions Part I (2/2) </h3>
        <br>
        <br>
     <p>
        <b>Ranking:</b>
    We will rank all participants in this session according to the number of their correct answers.
    Participants with more correct answers will be ranked higher.
    If two participants achieved the same number of correct answers, the one who gave the last correct answer more
    quickly will be ranked higher.
<p>
    <b>Bonus Payments:</b>
    Bonuses will be awarded based on your ranking as well as your group assignment.
   <p>
    If you were assigned to group A, you will receive the bonus if you rank higher than the lowest
    25% in this session.
    For instance, if there are 20 participants and you are assigned to group A, you will receive the bonus if you
    rank higher than the 5 lowest ranking participants.
    <p>
    If you were assigned to group B, you will receive the bonus if you rank higher than the lowest 75% in this session.
    For instance, if there are 20 participants and you are assigned to group A, you will receive the bonus if you
    rank higher than the 15 lowest ranking participants.
    <p>
     After you have completed the test, we will inform you how many questions you answered correctly, and whether you
     received the bonus or not.
 </p>
 <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</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"  > Comprehension questions </h3>

    <br>
      <br>
<!--    Question 1          -->

    <p>
    What is the probability that you were assigned to group A? What is the probability that other participants are assigned to group A?
    </p>

          <form id='form_1'>
        <input type="radio" id="1" name="test_1" value=0>
  <label for="1">I am in group A with 25% probability. Other participants are in group A with 75% probability. </label><br>
    <input type="radio" id="2" name="test_1" value=1  {% if test_1 == 1%} checked {% endif %}>
  <label for="2">I am in group A with 50% probability. Other participants are in group A with 50% probability.</label><br>
              <input type="radio" id="3" name="test_1" value=0>
  <label for="3">I am in group A with 75% probability. Other participants are in group A with 75% probability.</label><br>
        <p align="justify">
            {% if error == 1%}
                {% if test_1 == 0 %}
                <div class="wrong">
                You gave a wrong answer to this question. <br>
                Remember that half of the participants in this session are assigned to group A. The other halve is assigned to group B.
                </div>
            {% elif test_1 == 1 %}
                <div class="right">
                    You answered this question correctly. <br>
                    Half of the participants in this session are assigned to group A. The other halve is assigned to group B.
                </div>
            {% endif %}
                      {% endif %}
                        <hr>


<!--    Question 2          -->

Suppose there are 7 other participants in a session. Suppose their ranking and scores are as follows:
   <table  style="border: 1px solid grey;  text-align: center;">
              <tr> <td style="border: 1px solid grey;  text-align: center;" >  </td>
          <td style="border: 1px solid grey;  text-align: center;" > Participant 1 </td>
                  <td style="border: 1px solid grey;  text-align: center;"> Participant 2 </td>
           <td style="border: 1px solid grey;  text-align: center;" > Participant 3 </td>
           <td style="border: 1px solid grey;  text-align: center;" > Participant 4 </td>
           <td style="border: 1px solid grey;  text-align: center;" > Participant 5 </td>
           <td style="border: 1px solid grey;  text-align: center;" > Participant 6 </td>
           <td style="border: 1px solid grey;  text-align: center;" > Participant 7 </td>
       </tr>

       <tr> <td style="border: 1px solid grey;  text-align: center;" > Score </td>
           <td style="border: 1px solid grey;  text-align: center;" > 1 </td>
            <td style="border: 1px solid grey;  text-align: center;" > 3 </td>
           <td style="border: 1px solid grey;  text-align: center;" > 4 </td>
           <td style="border: 1px solid grey;  text-align: center;" > 5 </td>
           <td style="border: 1px solid grey;  text-align: center;" > 7 </td>
           <td style="border: 1px solid grey;  text-align: center;" > 9 </td>
           <td style="border: 1px solid grey;  text-align: center;" > 12 </td>
       </tr>
   </table>
   Idea for good comprehension question?


</p>
               <div class="grid-container">
        <input type="radio" id="2_1" name='test_2' value=1 {% if test_2 == 1%} checked {% endif %}>
  <label for="2_1"> For each question I answer correctly, I receive 1 point.
  </label><br>
    <input type="radio" id="2_2" name='test_2' value=0>
  <label for="2_2">If I am in group A, I will receive the bonus if I score more than 9 points.
  If I am in group B, I will receive the bonus if I score more than 3 points.
  </label><br>
                  <input type="radio" id="2_3" name='test_2' value=0>
  <label for="2_3">If I am in group A, I will receive the bonus if I score more than 1 point.
  If I am in group B, I will receive the bonus if I score more than 7 points. </label>
               </div>
    <p align="justify">
                      {% if error == 1%}
                {% if test_2 == 0 %}
                <div class="wrong">
                You gave a wrong answer to this question.<br>
              Remember that whether you receive the bonus or not depends on the number of points you scored, as well as on your group assignment. <br>
              If you are in group A, you will receive the bonus if your score is higher than that of the lowest ranking 25%.
              For the case of a 8 participants, you will receive the bonus if your score is higher than the 2 lowest ranking participants, if you are in group A. <br>
              If you are in group B, you will receive the bonus if your score is higher than that of the lowest ranking 75%.
              For the case of a 8 participants, you will receive the bonus if your score is higher than the 6 lowest ranking participants, if you are in group B.
                </div>
            {% elif test_2 == 1 %}
                <div class="right">
                    You answered this question correctly. <br>
                    If are in group A, you will receive the bonus if your score is higher than that of the lowest ranking 25%.
                    For the case of a 8 participants, you will receive the bonus if your score is higher than the 2 lowest ranking participants, if you are in group A.
                    That means that you will receive the bonus if you score more than 3 points. <br>
                    If you are in group B, you will receive the bonus if your score is higher than that of the lowest ranking 75%.
                    For the case of a 8 participants, you will receive the bonus if your score is higher than the 6 lowest ranking participants, if you are in group B.
                     That means that you will receive the bonus if you score more than 9 points.
                </div>
            {% endif %}
                      {% endif %}
                    <hr>

              <!--    Question 3          -->


             To be changed
    </p>
        <input type="radio" id="3_1" name="test_3" value=0>
  <label for="3_1">The wheel of fortune is more likely to stop on some fields than on others.  </label><br>
    <input type="radio" id="3_2" name="test_3" value=0>
  <label for="3_2">Blue players will receive a share of the proceeds of their investment decisions.</label><br>
       <input type="radio" id="3_3" name="test_3" value=1  {% if test_3 == 1%} checked {% endif %}>
  <label for="3_3">All decisions I make could be payoff relevant.
      </label><br>
</form>

                {% if error == 1%}
                {% if test_3 == 0 %}
                <div class="wrong">
                You gave a wrong answer to this question. <br>
                Remember that the wheel of fortune is equally likely to stop on each of the fields. <br>
                All proceeds generated by the investment decisions accrue to the orange players. <br>
                All decisions you make could be payoff relevant.
                </div>
            {% elif test_3 == 1 %}
                <div class="right">
                    You answered this question correctly. <br>
                All decisions you make could be payoff relevant.
                </div>
            {% endif %}
                      {% endif %}


<button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="nexttab btn-primary btn next">Next</button>


</div>



  </div>



{% endblock %}