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

{% block title %}
    {% if player.id_in_group == 1 %}
    Jeu 2
    {% endif %}
    {% if player.id_in_group == 2 %}
    Jeu 1
    {% endif %}

{% endblock %}

{% block content %}

<p> <b>
    Ce jeu peut être pris en compte pour le calcul de vos gains.
</b></p>

<div class="card bg-light instructions">
    <div class="card-body">


    <link rel="stylesheet" type="text/css"
          href="{% static 'global/matrix.css' %}"/>



        <h4>
            Règles du jeu:

        </h4>

        <p>
            Regardez le tableau ci-dessous. Il présente 5 situations différentes. Regardez-les attentivement.
            Les situations A, B, C, D et E contiennent deux gains possibles (en ECUS): les gains rouges à gauche et
            les gains verts à droite. Vous recevrez l'un de ces deux montants de ECUS en fonction de la couleur qui
            vous sera attribuée à la fin de la partie.
        </p>

        <p>
À la fin du jeu, les ECUS que vous aurez gagnés seront convertis en € via la règle suivante:         </p>
        <p>
        <center> <b>1 ECU = … € </b></center>
        </p>

        <p>
Vous devrez donc d'abord choisir la situation que vous préférez le plus: A, B, C, D ou E.         </p>

<br><br>

        <p> <b> Avertissement ! L'image ci-dessous est un exemple, votre choix sera enregistré plus tard. </b></p>


               <table class='table table-bordered text-center' style='width: auto; margin: auto'>

        <tr>
            <th> Options </th>
            <td bgcolor="#ffe6e6"> <b><FONT color="red"> Rouge </FONT></b> </td>
            <td bgcolor="#e6ffe6"> <b> <FONT color="green"> Vert </FONT> </b> </td>


        </tr>

        <tr>
            <th align="center" > A </th>
            <td align="center" bgcolor="#ffe6e6">
                     <p>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                     </p>

                     <p>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                        <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                     </p>
            </td>


            <td align="center" bgcolor="#e6ffe6">
                     <p>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                     </p>

                     <p>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                         <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                     </p>
            </td>




        </tr>


        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (4 ECUs) </td>
            <td bgcolor="#e6ffe6">  (4 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>




            <th> B </th>
            <td bgcolor="#ffe6e6">

    <br>
           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>
    <br>

            </td>

            <td bgcolor="#e6ffe6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>


        </tr>

        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (3 ECUs) </td>
            <td bgcolor="#e6ffe6">  (6 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>



        <tr>
            <th> C </th>
            <td bgcolor="#ffe6e6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>

            <td bgcolor="#e6ffe6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>



        </tr>

        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (2 ECUs) </td>
            <td bgcolor="#e6ffe6">  (8 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>



        <tr>
            <th> D </th>
            <td bgcolor="#ffe6e6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            </td>
            <td bgcolor="#e6ffe6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

            <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>





        </tr>

        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (1 ECU) </td>
            <td bgcolor="#e6ffe6">  (10 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>


        <tr>
            <th> E </th>
            <td bgcolor="#ffe6e6">
            </td>
            <td bgcolor="#e6ffe6">

           <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>
               <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>
               <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>
               <p>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
                <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
               <img src="{% static 'expines/coin.png'  %}" width="30" height="30"/>
            </p>



        </tr>


        <tr>
            <th>  </th>
            <td bgcolor="#ffe6e6"> (0 ECUs) </td>
            <td bgcolor="#e6ffe6">  (12 ECUs)  </td>
            <td>  </td>
        </tr>

         <tr>
            <th colspan=4 > </th>
        </tr>

    </table>

        <br><br>

<p>

    Deuxièmement, votre couleur vous sera révélée, <b>à la fin de l'expérience</b>, avec le processus suivant:

    <br>Vous choisirez entre deux boutons qui ressemblent à ceci:


</p>

        <br>

        <head>
<style>
.button {
  background-color: #a3a3c2;
  border: none;
  color: white;
  padding: 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 10px 10px;
  cursor: pointer;
  border-radius: 8px;
}
</style>
</head>

        <center>
        <button
                type="button"
                class="button"
                id="color"
                name="colorbutton"
                value="1"
                onclick="setColor1(event);myFunction();"
        >
        </button>

        <button
                type="button"
                class="button"
                id="color"
                name="colorbutton"
                value="2"
                onclick="setColor2(event);myFunction();"
        >
        </button>


</center>

        <br>

        <p> Après avoir cliqué sur l'un des boutons, une couleur rouge ou verte apparaîtra. Cette couleur déterminera vos gains. </p>
         <p>   Il y a 50% de chance que la couleur rouge soit derrière le bouton gauche ou droite. La même probabilité s'applique
             pour la couleur verte.  </p>

<br> <br>

    <br><br><br><br><br>





</div>



</div>


    {% next_button %}

{% endblock %}






{% block scripts %}



    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>


{% endblock %}

