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

{% block styles %}
    <style>
            #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 class="nav-link" id="part3-tab" data-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Tab 3</a>
  </li>
  <li class="nav-item">
    <a {%  if error == 0 %} class= "nav-link" {% elif error == 1 %} class= "nav-link active" {% endif %} id="part4-tab" data-toggle="tab" href="#part4" role="tab" aria-controls="part4" onclick="topFunction()">Tab 4</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 II (1/3)
 </h3>
        <br>
        <br>
    <p>
    <b> Summary: </b> In part II of the experiment, we will ask to you to choose between a number of different options.
        These options will yield different payoffs with different probabilities.
    <p>
    Option A always yields a payoff of {{Constants.payoff_beliefs}} Euro if a given event is true. Consider the example task below.
    If you choose option A, you will receive the payoff of {{Constants.payoff_beliefs}} Euro if a fair coin comes up heads, and not otherwise.
    If you choose option B, you will receive the payoff of {{Constants.payoff_beliefs}} Euro with different probabilities (0%, 10%, 20%, ..., 100%).
    We ask you to choose between option A and option B for the different winning probabilities of option B, by clicking on the option you prefer.
    <p>
    <b> You can try this yourself by selecting your favorite option in the example task below.</b>
     <p>
    Once you click on an option, the program will automatically fill in the other choices.
    For instance, if you choose option A over receiving {{Constants.payoff_beliefs}} Euro with 30% probability, the program
    selects option A over receiving {{Constants.payoff_beliefs}} Euro with any probability smaller than 30%.
    It also selects option B whenever the probability of receiving {{Constants.payoff_beliefs}} Euro is higher than 40%.
     <p>
    Also, once you click an option,  more choices between option A and B will pop up.
    For instance, if you choose option A over receiving {{Constants.payoff_beliefs}} Euro with 30% probability,
    we will ask you to choose between option A and receiving the payment of {{Constants.payoff_beliefs}} Euro with probabilities
    31%, 32%, ..., 39%. Once you made a choice between these, the program automatically fills in the remaining choices.
</p>






       <u><b>Example Task: </b></u>
<div  style="border:3px; border-style:solid; border-color:#130e0e; padding: 1em;">
    Please choose between the options below.
      <hr>
      {{ include 'MR/BeliefList_1.html' }}
     </div>




<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 II (2/3) </h3>
        <br>
        <br>


     <p><b>Payments:</b> We will ask you to make 4 choices similar to the example task.
         At the end of the experiment, we will randomly select one of these tasks.
         We will then draw a random integer between 0 and 100.
         Each number will be drawn with equal probability.
         The drawn number will then determine which of the choices you made will be played out for real.
         Consider the choices made in the example below.
         If a number smaller than 51 is drawn, you would receive the payoff {{Constants.payoff_beliefs}} Euro if the coin comes up heads.
         If a number equal to 51 or larger is drawn, you will receive the payoff with probability equal to the drawn number.
         For instance, if the number 83 was drawn, you would receive the payoff {{Constants.payoff_beliefs}} Euro with 83% probability.
     <p>
     <b>How to maximize the probability of receiving the bonus:</b>
     To maximize the probability of winning the {{Constants.payoff_beliefs}} Euros, you should always select option A if you think the event has a higher probability of occurring than
     the probability of the respective option B.
     For the example task, the probability that a fair coin comes up heads is equal to 50%.
     To maximize your winning probability, you should therefore select option A whenever option B has a winning probability lower than 50%.
     Whenever option B has a winning probability higher than 50%, you should select option B.
 </p>

         <u><b>Example Task: </b></u>
     <div style="border:3px; border-style:solid; border-color:#130e0e; padding: 1em;">
             <img src="{% static 'CL_3.png' %}" width="30%" height="auto%" align='center'>
 </div>


    </p>




</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 class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">
 <h3  align="center" >  Page (3/3) </h3>
        <br>
        <br>
      <p>
      For this part of the experiment, we will match you with another participant.
      We will inform you about your score in the test and whether you received the bonus or not.
      We will also inform you about the other participant's score and whether they received the bonus or not.
      <p>
       <b> Choices in this part: </b>  We will then ask you to make choices similar to the one explained before for the following 4 events.
      <ul>
      <li> You rank in the top 50% of the session. </li>
      <li> The other participant ranks 50% of the session. </li>
      <li> You were assigned to group A. </li>
      <li> The other participant was assigned to group A. </li>
      </ul>
      <p> <b> Reminder: </b> Whether you win the bonus or not depends on your score in the test and your group assignment.
          In the beginning of the experiment, half the participants in this session were randomly assigned to group A.
          The other half was assigned to group B.
          If you were assigned to group A, you receive the bonus if you rank higher than the lowest ranking 25% in this session.
          If you were assigned to group B, you receive the bonus if you rank higher than the lowest ranking 75% in this session.
          If two participants achieve the same score on the test, the one who submits the last correct answer first is ranked higher.
      </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="part4" role="tabpanel" aria-labelledby="part4-tab">

      <h3  align="center"  > Comprehension questions </h3>
            <br>
      <br>
Comprehension questions?

<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 %}