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

        .selected {
background-color: #efe341;
         border: 1px solid grey;
width: 15em;
height: 4em;
            }

        .td1 {
        border: 1px solid grey;
width: 15em;
height: 4em;
}

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

.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;
}
    </style>

<style>

    .selected {
background-color: #efe341;
         border: 1px solid grey;
width: 15em;
height: 4em;
            }

.table1 {
      border: 1px solid grey;
    text-align: center;
    width: 60%;
    alignment: center;
}


        .td1 {
        border: 1px solid grey;
width: 15em;
height: 4em;
}

        .table1 {
      border: 1px solid grey;
    text-align: center;
    width: 60%;
    alignment: center;
}


        .button_details {
  border: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

</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 class= "nav-link "  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 active" id="part2-tab" data-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Tab 2</a>
  </li>



</ul>



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


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

<h3  align="center"  >
     {%  if french == 0 %}
     Details on the payoff mechanism
    {% else %}
    Détails sur le mécanisme de paiement
    {% endif %}
    <br>
    <br>
 </h3>
     {% if french == 0 %}

<p>
We now explain how your guess is used to determine whether you win the 1500 cents prize.
<p>

     <ul>

<li> The computer chooses a number between 0 and 100, where each number is
equally likely, as if rolling a 101-sided die.
    </li>
     <li> The computer randomly selects one orange player in this session.
     </li>
</ul>
 <p>
If your guess is smaller than the number chosen by the computer, you will obtain the prize if the selected
     orange player awarded the bonus for the chosen scenario.
     <p>
If your guess is greater than or equal to the number chosen by the computer, you will receive the prize with a probability
     equal to the number chosen by the computer.

     For instance, if the number chosen by the computer is 60, you will obtain the prize with 60% probability.
<p>
     <b> Why more accurate guesses have a higher probability of winning the prize: </b> We will explain this with an example.
     Imagine that for a given scenario, 50% of the orange players give the bonus to the matched blue player.
 <p>
     Imagine your guess is lower than 50%, say 20%. Imagine the computer chooses a number between 20 and 50, say 30.
     In this case, your guess is lower than the number chosen by the computer. You will receive the prize with a probability of 30%.
     Had your guess been 50, you would win the prize if a randomly chosen orange player awarded the bonus.
     In the example this means that you would win the bonus with 50% probability.
     This means that if your guess is too low, you do not maximize your chances of winning the prize.
 <p>
     Now imagine that your guess is higher than 50%, say 80%. Imagine the computer chooses a number between 50 and 80, say 70.
     In this case, your guess is higher than the number chosen by the computer.
     You will receive the prize if a randomly chosen orange player gave the bonus to the matched blue player.
     In the example this means that you would win the bonus with 50% probability.
     Had your guess been 50, you would win the prize with a probability of 70%.
     This means that if your guess is too high, you do not maximize your chances of winning the prize.
<p>
     Finally, if your guess is 50%, there is no way to increase the probability of winning the prize.
     This means that <b> the more accurate your guess, the higher your chances of winning the prize of 1500 cents. </b>


 </p>

    {% else %}

     <p>
    Nous expliquons maintenant comment votre supposition détermine si vous gagnez le prix de 1500 cents.     <p>

     <ul>

<li> L'ordinateur choisit un nombre entre 0 et 100. Chaque nombre est également probable, comme si l’ordinateur lançait un dé à 101 faces.
    </li>
     <li> L'ordinateur sélectionne au hasard un joueur orange dans cette session.
     </li>
</ul>
 <p>
    Si votre supposition est inférieure au nombre choisi par l'ordinateur, vous obtiendrez le prix si le joueur orange
     sélectionné vous a donné la récompense pour le scénario choisi.
     <p>
    Si votre supposition est supérieure ou égale au nombre choisi par l'ordinateur, vous recevrez le prix avec une
     probabilité égale au nombre choisi par l'ordinateur.


     Par exemple, si le nombre choisi par l'ordinateur est 60, vous obtiendrez le prix avec 60% de probabilité.
<p>
     <b> Pourquoi des suppositions plus précises ont une probabilité plus élevée de gagner le prix : </b> Nous allons expliquer cela avec un exemple.
     Imaginez que pour un scénario donné, 50% des joueurs orange donnent la récompense au joueur bleu apparié.
 <p>
      Imaginez que votre supposition est inférieure à 50, disons 20. Imaginez que l'ordinateur choisisse un nombre entre 20 et 50, disons 30.
     Dans ce cas, votre supposition est inférieure au nombre choisi par l'ordinateur. Vous recevrez le prix avec une probabilité de 30%.
     Si votre supposition avait été de 50, vous gagneriez le prix si un joueur orange choisi au hasard attribuait la récompense.
     Dans l'exemple, cela signifie que vous gagneriez la récompense avec 50% de probabilité.
     Cela signifie que si votre supposition est trop bas, vous ne maximisez pas vos chances de gagner le prix.
 <p>
     Imaginez maintenant que votre supposition est supérieure à 50, disons 80. Imaginez que l'ordinateur choisisse un nombre entre 50 et 80, disons 70.
     Dans ce cas, votre supposition est supérieure au nombre choisi par l'ordinateur.
     Vous recevrez le prix si un joueur orange choisi au hasard a donné la récompense au joueur bleu apparié.
     Dans l'exemple, cela signifie que vous gagneriez la récompense avec 50% de probabilité.
     Si votre supposition avait été de 50%, vous gagneriez le prix avec une probabilité de 70%.
     Cela signifie que si votre supposition est trop élevée, vous ne maximisez pas vos chances de gagner le prix.
<p>
     Enfin, si votre estimation est de 50, il n'y a aucun moyen d'augmenter la probabilité de gagner le prix.
     Cela signifie que <b>plus votre estimation est précise, plus vos chances de gagner le prix de 1500 cents sont élevées. </b>
 </p>


    {% endif %}


      <button onclick="topFunction()" type="button" class="nexttab btn-primary btn back">Précédent</button>

  </div>



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



 <h3  align="center"  >
     {% if french == 0 %}
     Instructions Part II
     {% else %}
         Instructions Partie II
     {% endif %}
 </h3>
        <br>
        <br>

    {% if french == 0 %}
      <p>
         <b>The task:</b> In the following, we will ask you to make a number of guesses about the bonus decisions of the orange players.
        These guesses belong to Part II. For each possible scenario, we will ask you to guess how likely you are to obtain the reward from the matched orange player.
        There will be a total of {{n_scenario}} scenarios. For each scenario, we will ask you to guess how likely you are to receive a bonus
        if you choose option A or option B.
      <p>
          You can see an example task below.
          Remember that orange players can give the bonus to the matched players for both option A and B, for only one of the options, or for neither option.
          Therefore, the sum of the numbers you enter can be anything between 0 and 200.
          For instance, it is possible that you receive the bonus 20/100 times for option A and 10/100 for option B.
          It is also possible that you receive the bonus 70/100 times for option A and 80/100 for option B.
    <p>
        <div style="border:3px; border-style:solid; border-color:#130e0e; padding: 1em;">


     <table class="table1">
        <tr>
        <td class="td1">

        </td>
            {% for ff, ft, p in fields %}
                 <td  align="center" {% if stopped_from == ff and treatment == 'OB'  %}
                    class="selected"
                      {% else %}
                      class="td1"
                    {% endif %}>
               {% if french == 0 %} Fields  {% else %} Champs {% endif %} {{ ff }}-{{ ft }} <br>
                    ({{ p }}%)
                </td>
            {% endfor %}
    </tr>
    <tr>
        <td class="td1">

        Option A

        </td>
            {% for o, ff in oo_1 %}
                <td align="center" {% if stopped_from == ff and treatment == 'OB' %}
                    class="selected"
                    {% else %}
                    class="td1"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>
        <tr>
        <td>

        Option B

        </td>
            {% for o,ff in oo_2 %}
                <td  align="center" {% if stopped_from == ff and treatment == 'OB' %}
                    class="selected"
                    {%  else %}
                    class="td1"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>
    </table>

    {% if french == 0 %}
    {% if treatment == 'OB' %}
<br>
The wheel of fortune stopped on a field between {{ stopped_from }} and {{ stopped_to }}. In this case, option A yields a payoff
   of  {{outcome_A}} cents and option B yields a payoff of {{outcome_B}} cents. Imagine you are matched 100 times with random orange players in this session.
            <br>  <br>
    {% endif %}
    <p>
  If you chose <b> option A </b> {% if treatment == 'OB' %} and earned the orange player <b> {{outcome_A}} cents </b> , {% endif %}
     how many times (out of 100) do you think you will receive the reward of {{ C.max_bonus }} cents?
    {% if treatment == 'NOB' %} <br> {% endif %}
     <input type="text" id="B" name="skewed" disabled >
<p>
If you chose <b> option B </b> {% if treatment == 'OB' %} and earned the orange player <b> {{outcome_B}} cents </b> , {% endif %}
    how many times (out of 100) do you think you will receive the reward of {{ C.max_bonus }} cents?
    {% if treatment == 'NOB' %} <br> {% endif %}
 <input type="text" id="B" name="skewed" disabled >
</p>


{% endif %}


    </div>


    <p>
        <b>Your payment:</b> At the end of the experiment, we will randomly select one of your guesses.
        If Part II is selected to determine your final payment from the experiment, you
        can win a prize of 1500 cents. Your chances of winning the prize is set so that more accurate guesses have a higher chance of winning.
        You can click     <span onclick="topFunction()"  class="prevtab" style="color:blue;cursor: pointer" >here</span>
        to read the precise payment rules.

<!--    <button onclick="topFunction()"  class="nexttab button_details next">here</button>-->

    <p>
    <b>Additional choices for Part I:</b> We will also ask you to make one more choice between option A and B for the 9 different choice tasks.
       These choices belong to Part I.
       If Part I is selected to determine your final payment from the experiment, the computer will randomly select
        one of all the 18 (9+9) choices you made.
    The computer will also randomly pair you with and orange player.
       Your final payment will then be determined by your choice and the bonus decision of the matched orange player.
    <p>
    Remember that Part I is selected with a probability of 80% to determine your final payment.
    Part II is selected with a probability of 20%.
    </p>

{% else %}




     <p> Dans la partie II, vous pouvez gagner un prix de 1500 centimes.
         Nous vous demanderons de faire plusieurs suppositions sur les décisions de récompense des joueurs orange.
         Plus votre supposition est proche des décisions des joueurs orange, plus vous avez de chance de gagner le prix de 1500 centimes.

     <p>
         <b>Les suppositions:</b> Pour chaque scénario possible, nous vous demanderons de deviner quelle est votre probabilité d'obtenir la récompense du joueur orange apparié.
        Il y aura un total de {{n_scenario}} scénarios.
        Pour chaque scénario, nous vous demanderons de deviner quelle est la probabilité que vous receviez la récompense si vous choisissez l'option A ou l'option B.
         <p>
         Vous pouvez voir un exemple dans l'encadré ci-dessous.
        Rappelez-vous que les joueurs orange peuvent donner la récompense au joueur apparié pour les deux options A et B, pour seulement une des options, ou pour aucune des options.
        Voici quelques exemples de suppositions possibles:
        <ul>
    <li> Je reçois la récompense 20 fois sur 100 si je choisis l'option A et 10 fois sur 100 si je choisis l'option B.</li>
    <li> Je reçois la récompense 70 fois sur 100 si je choisis l'option A et 80 fois sur 100 si je choisis l'option B.</li>
    <li> Je reçois la récompense 90 fois sur 100 si je choisis l'option A et 20 fois sur 100 si je choisis l'option B.</li>
</ul>

    <p>
<b> Exemple:</b>
        <div style="border:3px; border-style:solid; border-color:#130e0e; padding: 1em;">

            {% if treatment == 'NOB' %}
            <img src="{{ static 'Belief_example_NOB4.png' }}" width="80%" height="auto%" align='center'>
            {% else %}
            <img src="{{ static 'Belief_example_OB4b.png' }}" width="80%" height="auto%" align='center'>
            {% endif %}

            <!--     <table class="table1">-->
<!--        <tr>-->
<!--        <td class="td1">-->

<!--        </td>-->
<!--            {% for ff, ft, p in fields %}-->
<!--                 <td  align="center" {% if stopped_from == ff and treatment == 'OB'  %}-->
<!--                    class="selected"-->
<!--                      {% else %}-->
<!--                      class="td1"-->
<!--                    {% endif %}>-->
<!--               {% if french == 0 %} Fields  {% else %} Champs {% endif %} {{ ff }}-{{ ft }} <br>-->
<!--                    ({{ p }}%)-->
<!--                </td>-->
<!--            {% endfor %}-->
<!--    </tr>-->
<!--    <tr>-->
<!--        <td class="td1">-->

<!--        Option A-->

<!--        </td>-->
<!--            {% for o, ff in oo_1 %}-->
<!--                <td align="center" {% if stopped_from == ff and treatment == 'OB' %}-->
<!--                    class="selected"-->
<!--                    {% else %}-->
<!--                    class="td1"-->
<!--                    {% endif %}>-->
<!--                {{ o }}-->
<!--                </td>-->
<!--            {% endfor %}-->
<!--    </tr>-->
<!--        <tr>-->
<!--        <td>-->

<!--        Option B-->

<!--        </td>-->
<!--            {% for o,ff in oo_2 %}-->
<!--                <td  align="center" {% if stopped_from == ff and treatment == 'OB' %}-->
<!--                    class="selected"-->
<!--                    {%  else %}-->
<!--                    class="td1"-->
<!--                    {% endif %}>-->
<!--                {{ o }}-->
<!--                </td>-->
<!--            {% endfor %}-->
<!--    </tr>-->
<!--    </table>-->

<!--    {% if treatment == 'OB' %}-->
<!--<br>-->
<!--La roue de la fortune s'est arrêtée sur un champ entre {{stopped_from}} et {{stopped_to}}. Dans ce cas, l'option A-->
<!--        rapporte un gain de {{outcome_A}} centimes et l'option B rapporte un gain de {{outcome_B}} centimes. Imaginez que vous êtes apparié 100 fois avec des joueurs orange aléatoires dans cette session.-->
<!--            <br>  <br>-->
<!--    {% endif %}-->
<!--    <p>-->
<!--  Si vous choisissez  <b> l'option A </b> {% if treatment == 'OB' %} faites gagner <b> {{outcome_A}} centimes </b> centimes au joueur orange, {% endif %}-->
<!--    combien de fois (sur 100) pensez-vous recevoir la récompense de {{ C.max_bonus }} centimes?-->
<!--    {% if treatment == 'NOB' %} <br> {% endif %}-->
<!--     <input type="text" id="B" name="skewed" disabled >-->
<!--<p>-->
<!--    Si vous choisissez  <b> l'option B </b> {% if treatment == 'OB' %} faites gagner <b> {{outcome_B}} centimes </b> centimes au joueur orange, {% endif %}-->
<!--    , combien de fois (sur 100) pensez-vous recevoir la récompense de {{ C.max_bonus }} centimes?-->
<!--    {% if treatment == 'NOB' %} <br> {% endif %}-->
<!-- <input type="text" id="B" name="skewed" disabled >-->
<!--</p>-->




    </div>

    <p>
        <b>Votre paiement :</b> À la fin de l'expérience, nous sélectionnerons au hasard l'une de vos suppositions.
        Si la Partie II est sélectionnée pour déterminer votre paiement final de l'expérience, vous pouvez gagner un prix de 1500 centimes.
         Vos chances de gagner le prix sont définies de telle sorte que les suppositions plus précises aient plus de chances de gagner.
        Vous pouvez cliquer  <span onclick="topFunction()"  class="prevtab" style="color:blue;cursor: pointer" >ici</span>
        pour lire les règles de paiement précises.


<!--    <button onclick="topFunction()"  class="nexttab button_details next">here</button>-->

    <p>
    <b>Choix supplémentaires :</b> Nous vous demanderons également de faire un choix de plus entre l'option A et B pour les 9 tâches différentes.
       Ces choix appartiennent à la Partie I.
       Si la Partie I est sélectionnée pour déterminer votre paiement final de l'expérience, l'ordinateur sélectionnera au hasard l'un des 18 (9 + 9) choix que vous avez faits.
    Ensuite, l'ordinateur vous appariera au hasard avec un joueur orange.
       Votre paiement final sera alors déterminé par votre choix ainsi que par la décision de récompense du joueur orange avec lequel vous êtes apparié.


    <p>
    Rappelez-vous que la Partie I est sélectionnée avec une probabilité de 80 % pour déterminer votre paiement final.
    La Partie II est sélectionnée avec une probabilité de 20 %.
    </p>

{% endif %}


<button class="nexttab btn-primary btn next">Suivant</button>


  </div>








{% endblock %}