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

{% block styles %}


<style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }


      .mgslider2-wrapper {
        border-spacing: 10px;
        }
        .mgslider2-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider2-limit, .mgslider2-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider2-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        .mgslider2-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }




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

 .td2{
     width: 22em;
 }


     .piechart {
        margin-top: 10px;
        display: block;
        position: relative;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background-image: conic-gradient(green 45deg, blue 45deg 135deg,
        red 135deg 225deg, orange 225deg 315deg, green 315deg );
    }

    body,
    .piechart {
        display: flex;
        justify-content: center;
        align-items: center;
    }

</style>




{% endblock %}


{% block title %}
    {% if french == 1 %}
    Supposition - Tâche {{n_task}}/9
    {% if treatment == 'OB' %} - Scénario {{n_scenario}}/3 {% endif %}
    {% else %}
    Guess - Task {{n_task}}/9
{% if treatment == 'OB' %} - Scenario {{n_scenario}}/3 {% endif %}

    {% endif %}

{% endblock %}

{% block content %}


    <script src="{{ static 'mgslider.js' }}"></script>
    <script src="{{ static 'mgslider2.js' }}"></script>





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

        </td>
            {% for ff, ft, p in fields %}
                 <td  align="center" {% if stopped_from == ff  %}
                    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  %}
                    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  %}
                    class="selected"
                    {%  else %}
                    class="td1"
                    {% endif %}>
                {{ o }}
                </td>
            {% endfor %}
    </tr>
    </table>
<br>
{% if french == 0 %}

    {% if treatment == 'OB' %}
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.
    {% endif %}
<hr>

 Remember that the orange players decide whether to give a reward of
    1000 cents to you or a randomly chosen blue player. Before they make this decision, they are informed about the following: <br>

     <ul>
  <li>The choice you made.  </li>
         {% if treatment == 'NOB' %}
    <li> The orange players are not informed about the payoff you generated for them before they make this choice. </li>
         {% else %}
  <li>The payoff your choice generated, given the turn of the wheel of fortune.</li>
  <li>The payoff the other option generated, given the turn of the wheel of fortune.</li>
     {% endif %}
</ul>
<hr>

<p>
  If you choose <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="A" name= {{belief_a}}  >
 {{ formfield_errors belief_a }}
<p>
If you choose <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={{belief_b}}  >
     {{ formfield_errors belief_b }}
</p>
       {% else %}


 {% 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.
            <hr>
    {% endif %}

<p>   Rappelez-vous que les joueurs orange décident de donner la récompense de 1000 centimes soit à vous, soit à un joueur bleu au hasard.
    {% if treatment == 'OB' %}
    Avant de prendre cette décision, ils sont informés de ce qui suit
         <ul>
  <li>Le choix que vous avez fait.</li>
 <li>Le gain généré par votre choix, compte tenu du tour de la roue de la fortune.</li>
   <li>Le gain généré par l'autre option, compte tenu du tour de la roue de la fortune.</li>
</ul>
    {% else %}

    Avant de prendre cette décision, il sont informés du choix que vous avez fait.
    Les joueurs orange prennent leur décision sans être informé du résultat du lancé de la roue de la fortune.
 {% endif %}



</p>

<hr>

    <p>
  Si vous choisissez  <b> l'option A </b> {% if treatment == 'OB' %} faites gagner <b> {{outcome_A}} cents </b> centimes au joueur orange, {% endif %}
    combien de fois (sur 100) pensez-vous recevoir la récompense de {{ C.max_bonus }} centimes? Veuillez faire glisser le curseur ci-dessous pour indiquer votre supposition.
    {% if treatment == 'NOB' %}  {% endif %}
<!--      <input type="text" id="A" name= {{belief_a}}  >-->
 {{ formfield_errors belief_a }}

  <div id="sliders_here"></div>

<p>
    Si vous choisissez  <b> l'option B </b> {% if treatment == 'OB' %} faites gagner <b> {{outcome_B}} cents </b> centimes au joueur orange, {% endif %}
    combien de fois (sur 100) pensez-vous recevoir la récompense de {{ C.max_bonus }} centimes? Veuillez faire glisser le curseur ci-dessous pour indiquer votre supposition.
    {% if treatment == 'NOB' %}  {% endif %}
<!-- <input type="text" id="B" name={{belief_b}}  >-->
     {{ formfield_errors belief_b }}
      <div id="sliders_here2"></div>

</p>

<!--Testing: {{ formfield belief_a }}-->

<!--Testing: {{ formfield belief_b }}-->


    <script>
            $(document).ready(function (event) {
            slider1 = new mgslider(js_vars.belief_a, 0, 100, 1);
            slider1.print(document.getElementById("sliders_here"));
        });

            $(document).ready(function (event) {
            slider2 = new mgslider2(js_vars.belief_b, 0, 100, 1);
            slider2.print(document.getElementById("sliders_here2"));
        });
    </script>




        {% endif %}




    {% next_button %}
{% endblock %}