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


{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
    <link href="{% static 'Ambiguity/css/custom.css' %}" rel="stylesheet">
{% endblock %}

{# ****************************************************************************************************************** #}
{# *** SCRIPTS *** #}
{# ****************************************************************************************************************** #}
{% block scripts %}
    {% if Constants.enforce_consistency == True %}
            <script src="{% static 'Ambiguity/js/consistency.js' %}"></script>
    {% endif %}

    <script type="text/javascript">
        // Pressing enter does not submit the form.
        $(document).ready(function() {
            $(window).keydown(function(event){
                if ((event.keyCode == 13) || (event.keyCode == 32)){
                event.preventDefault();
                return false;
               }
            });
        });
    </script>
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** TITLE *** #}
{# ****************************************************************************************************************** #}
{% block title %}
    Table de Choix
{% endblock %}


{# ****************************************************************************************************************** #}
{# *** CONTENT *** #}
{# ****************************************************************************************************************** #}
{% block content %}

            <style>
                #SucColor {
                  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                  font-size: 14px;
                  border-collapse: collapse;
                  width: 35%;
                }

                #SucColor td, #SucColor th {
                  border: 1px solid #ddd;
                  padding: 8px;
                }

                #SucColor tr:nth-child(even){background-color: #f2f2f2;}

                #SucColor tr{
                line-height: 18px;
                }

                #SucColor th {
                  padding-top: 12px;
                  padding-bottom: 12px;
                  text-align: center;
                  background-color: #808080;
                  color: white;
                }
             </style>



            <p>
            <table align="center" id="SucColor" >

                <col width="200">
                <col width="150">
                <col width="200">

                <thead>
                    <tr class="header" align="center">
                        <td colspan="3">Veuillez choisir votre Couleur de Victoire</td>
                    </tr>
                </thead>
                <tbody>
                     <tr>
                         <!-- green -->
                        <td align="center" >
                            <b><font color="green">Vert</font></b>
                        </td>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio" name="{{ color }}" value="Green" id="green" required>
                            <input type="radio" name="{{ color }}" value="Blue" id="blue" required>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b><font color="blue">Bleu</font></b>
                        </td>
                     </tr>
                </tbody>
            </table>
            </p>



    <div class="wrapper">
        <div class="card">

            <style>
                #customers {
                  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                  font-size: 14px;
                  border-collapse: collapse;
                  width: 100%;
                }

                #customers td, #customers th {
                  border: 1px solid #ddd;
                  padding: 8px;
                }

                #customers tr:nth-child(even){background-color: #f2f2f2;}

                #customers tr{
                line-height: 18px;
                }

                #customers th {
                  padding-top: 12px;
                  padding-bottom: 12px;
                  text-align: center;
                  background-color: #808080;
                  color: white;
                }
             </style>

            <table id="customers">
                <thead>
                    <tr class="header" align="center">
                        <th style="background-color: lightgrey; color: black"> Urne A <br/>
                            (<b><font color="green">50 boules vertes</font></b>,
                            <b><font color="blue">50 boules bleues</font></b>)
                        </th>
                        <th style="background-color: lightgrey; color: black" colspan="2">
                            <table align="center" width="100%">
                                <tr>
                                    <td colspan="2" style="border: 1px solid lightgrey;">
                                       {% trans "Votre Choix" %}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                       A
                                    </td>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                       B
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <th style="background-color: lightgrey; color: black"> Urne B <br/>
                            (<b><font color="green">? boules vertes</font></b>,
                            <b><font color="blue">? boules bleues</font></b>)
                        </th>
                    </tr>
                </thead>

                <tbody>

                    <tr>
                         <!-- Option A -->
                        <td   align="center" rowspan="{{num_choices}}">
                            <b>{{ high_a }}</b> si la boule est de la  <b>Couleur de Victoire </b> ou <br/>
                            <b>{{ low_a }}</b>  sinon <br/>
                        </td>
                        {% for a, b, c in mpl %}
                          <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio" name="{{ c }}" value="A" required>
                        </td>
                        <td align="center">
                            <input type="radio" name="{{ c }}" value="B" required>
                        </td>

                        <!-- Option B -->
                        <td align="center">
                            <b>{{ a }}</b> si la boule est de la  <b>Couleur de Victoire </b> ou<br/>
                            <b>{{ b }}</b> sinon<br/>
                        </td>
                     </tr>
                        {% endfor %}


                </tbody>
            </table>
        </div>
    </div>

    <div align="center">
        <!-- Next Button -->
        <button name="Next" value="True" class="btn btn-primary btn-large">Suivant</button>
        <!-- Instructions Button -->
        <button type="button" align="center" class="btn btn-primary" data-toggle="modal" data-target="#InstructionsModal" style="background-color:grey; border-color:grey">Instructions </button>
    </div>

        <!-- Instructions Modal -->
        <div class="modal fade" id="InstructionsModal" tabindex="-1" role="dialog" aria-labelledby="InstructionsModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" style="max-width: 60%; font-size: 14px" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="InstructionsModalLabel"> Partie 3 - Instructions </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">

                  <style>
                        #modal {
                          font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                          border-collapse: collapse;
                          width: 78%;
                        }

                        #modal td, #modal th {
                          border: 1px solid grey;
                          padding: 8px;
                        }

                        #modal tr:nth-child(even){background-color: #f2f2f2;}

                        #modal th {
                          padding-top: 12px;
                          padding-bottom: 12px;
                          text-align: center;
                          background-color: #808080;
                          color: white;
                        }
                     </style>

                  <p>
            <p>
        <p>
            <b>Tâche</b><br>
            Dans la troisième tâche de notre étude, un tableau vous sera présenté. Le tableau sera composé de plusieurs lignes de décision.
            Pour chaque ligne, vous devrez choisir entre le tirage d’une boule dans l’« Urne A » ou dans l’« Urne B ». Les deux urnes contiennent 100 boules au total.
            Cependant, alors que l’on sait que l’Urne A contient 50 boules vertes et 50 boules bleues, l’Urne B contient un nombre inconnu de boules vertes et bleues.
            En plus du choix de l’urne dans laquelle tirer une boule, vous sélectionnerez votre <b>Couleur de Victoire</b>, qui peut être soit verte soit bleue.
            Ensuite, quelle que soit l’urne que vous choisissez, vous êtes vainqueur chaque fois que la boule tirée correspond à votre Couleur de Victoire.
            La Figure 1 fournit un exemple de tableau de choix pour cette tâche:

        </p>
        <p>
            <table align="center">

                <col width="100">
                <col width="70">
                <col width="100">

                <thead>
                    <tr class="header" align="center" style="background-color: lightgrey;">
                        <td colspan="3">Veuillez choisir votre Couleur de Victoire</td>
                    </tr>
                </thead>
                <tbody>
                     <tr>
                         <!-- green -->
                        <td align="center" style="border: 1px solid black">
                            <b><font color="green">Vert</font></b>
                        </td>
                         <!-- radio select form fields -->
                        <td align="center" style="border: 1px solid black">
                            <input type="radio"  value="Green" id="green" disabled>
                            <input type="radio"  value="Blue" id="blue" disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" style="border: 1px solid black">
                            <b><font color="blue">Bleu</font></b>
                        </td>
                     </tr>
                </tbody>
            </table>
            </p>
        <p>
            <table align="center" id="customers" >

                <col width="200">
                <col width="20">
                <col width="20">
                <col width="200">

                <thead>
                    <tr align="center">
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                            Urne A <br>
                            (<b><font color="green">50 boules vertes</font></b>,
                            <b><font color="blue">50 boules bleues</font></b>)
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey" colspan="2">
                            <table align="center" width="100%">
                                <tr>
                                    <td colspan="2" style="border: 1px solid lightgrey;">
                                       {% trans "Votre Choix" %}
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                       A
                                    </td>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                       B
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                            Urne B <br>
                            (<b><font color="green">? boules vertes</font></b>,
                            <b><font color="blue">? boules bleues</font></b>)
                        </th>
                    </tr>
                </thead>
                <tbody>
                     <tr>
                         <!-- Option A -->
                        <td align="center" rowspan="4">
                            <b>€20</b> si la boule est de la  <b>Couleur de Victoire </b>
                            <br>
                            ou
                            <br/>
                            <b>€0</b> sinon.
                        </td>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center">
                            <input type="radio"  disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€37</b> si la boule est de la  <b>Couleur de Victoire </b>
                            ou
                            <br/>
                            <b>€0</b> sinon.
                        </td>
                     </tr>
                    <tr>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center">
                            <input type="radio"  disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€34</b> si la boule est la  <b>Couleur de Victoire</b>  ou<br/>
                            <b>€0</b> sinon.
                        </td>
                     </tr>
                    <tr>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center">
                            <input type="radio"  disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€30</b> si la boule est la  <b>Couleur de Victoire</b>  ou<br/>
                            <b>€0</b> sinon.
                        </td>
                     </tr>
                    <tr>
                         <!-- radio select form fields -->
                        <td align="center" >
                            <input type="radio"  disabled>
                        </td>
                        <td align="center">
                            <input type="radio"  disabled>
                        </td>
                        <!-- Option B -->
                        <td align="center" >
                            <b>€26</b> si la boule est la  <b>Couleur de Victoire</b>  ou<br/>
                            <b>€0</b> sinon.
                        </td>
                     </tr>
                </tbody>
            </table>
                <p align="center"><i>Figure 1 – Exemple de tableau de choix.</i></p>

        <p>
            Comme vous pouvez le voir, les paiements de la colonne de gauche (Urne A) sont constants tout au long du
            tableau, tandis que les paiements de la colonne de droite (Urne B) varient d’une ligne à l’autre.
            Pour l’Urne B, ils commencent par être relativement attractifs, mais ensuite ils diminuent en attractivité
            à mesure que vous descendez dans le tableau.
            Par conséquent, les personnes choisissent généralement l’Urne B dans la première ligne, mais passent ensuite à l’Urne A
            quelques lignes plus bas dans le tableau.
            <br/>
            Une fois que vous êtes passé de l’Urne B à l’Urne A, l’ordinateur marquera automatiquement tous les choix
            restants comme étant l’Urne A.
            Cela implique que vous ne pouvez changer d’urne qu’une seule fois.
            Alors, réfléchissez-bien!
            <br/>
            Veuillez noter que nos questions ne sont pas conçues pour vous tester.
            Il n’y a pas de bonnes ou de mauvaises réponses.
            Pour chaque ligne, il suffit simplement de choisir l’option que vous préférez.
        </p>

        <p>
            <b>Gain </b><br>
            Dans cette partie, l'ordinateur choisira un joueur sur 20 pour le paiement.
            Si vous êtes choisi, les gains de cette partie seront payés <b>aujourd’hui</b>, juste après l’étude.
            Une fois que vous avez fait tous les choix, l’ordinateur choisira une ligne pour le paiement et tirera une
            boule de l’urne que vous avez choisie.
            Si la couleur de la boule correspond à la couleur de victoire que vous avez choisie, vous gagnerez le montant
            correspondant.
            Si la couleur de la boule ne correspond pas à la couleur de victoire, vous ne gagnerez rien.
        </p>
        <p>
            <b>Exemple</b><br>
            Supposons que vous ayez été choisi pour le paiement et que vous ayez choisi le Vert comme couleur de victoire.
            De plus, l’ordinateur a aléatoirement choisi la ligne 1 et votre choix dans cette rangée était l’Urne B.
            Enfin, supposons qu’une boule verte ait été tirée de cette urne.
            Vous recevez alors 37 euros à la fin de l’expérience.

        </p>

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-large" style="background-color:grey; border-color:grey" data-dismiss="modal">Retour</button>
              </div>
            </div>
          </div>
        </div>

{% endblock %}