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


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


{% block title %}
<center>
    SOUS-PARTIE X/4 - Consigne
</center>
{% endblock %}

{% block content %}

<div class="consigne">
    <center>
        <div style='color:red; padding: 3px; border:2px solid black;'>
        <b>Dans cette sous-partie, vous allez 
            faire des choix qui vont potentiellement rapporter de l'argent à vous ET à l'association {{player.association_choice}}.
        </b>
    </div>
    </center>
        <br>

    Le tableau en dessous vous donne un exemple. Ce tableau vous montre deux options, <strong>A</strong> et <strong>B</strong>. 
    Pour chaque ligne, vous devrez choisir l'option préférée.<br>
    
    <b>Pour chaque ligne et chaque option il y a DEUX éléments à considérer avant de prendre une décision : </b><br>
        <ol style='margin-left : 50px;'>
            <li>
                le montant que l'association garde ET les montants que vous pouvez obtenir.
            </li>
            <li>
                les probabilités de gains vous pouvez recevoir et qui sont ici représentées par le nombre de boules vertes et rouges dans les urnes
            </li>
        </ol>

    
       <b> Prenons un exemple avec le tableau ci-dessous.</b><br>

    <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option A :</b>
        Quelque soit les lignes, l'association garde toujours <b>{{player.x_norm|floatformat:2}}€</b>. L'urne liée à cette option possède 100 boules : 
        <b style="color:green;">50 sont vertes</b> et <b style="color:#9A1A26;">50 sont rouges</b>. 
        Si une boule verte est tirée, l'association reçoit <b style="color:green;">
            {{player.y_norm|floatformat:2}}€ </b>; si elle est rouge, <b style="color:#9A1A26;">l'association reçoit 0€</b>.

    <br>

    <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option B :</b>
    <b>Le montant que l'association garde <b>CHANGE</b> selon la ligne du tableau</b>. L'urne liée à cette option possède 100 boules : <b style="color:green;"> 60
    sont vertes</b> et <b style="color:#9A1A26;">40 sont rouges.</b>
    Si une boule verte est tirée, vous recevez <b style="color:green;">
        {{player.y_me|floatformat:2}}€ </b>; si elle est rouge, <b style="color:#9A1A26;">vous recevez 0€</b>. 
    
    <br>
    <br>
    <b style="font-size:16px; font-weight:bold;">Détermination de vos gains pour vous et pour {{ player.association_choice }}:</b><br>
    <div style="margin-left : 30px;">
    Une fois tous vos choix faits sur l'ensemble des N tableaux de l'expérience, un seul tableau sera sélectionné au hasard et une ligne 
    de ce tableau sera choisie également au hasard. 
    Votre gain et le gain de l'association {{ player.association_choice }} dépendront de cette ligne, 
    de l’option que vous avez choisi pour cette ligne et du tirage de la boule dans l’urne associée à votre choix pour cette ligne de ce tableau.
    </div>
    <br>
   

    <b>Par exemple, si ce tableau est choisi à la fin de l'experience et que la ligne numero 3 est tirée au hasard. </b>
    <ul style="margin-left:30px;">
        <li>
            Supposons que vous aviez choisi l'option <b>A</b> pour cette ligne. Dans ce cas l'association garde : <b>{{player.x_norm|floatformat:2}}€</b> sur ses {{player.x_norm|floatformat:2}}€ 
            initiaux. 
            Et vous avez <b style="color:green;">50%</b> de chance d'obtenir <b style="color:green;"> {{player.y_me|floatformat:2}}€</b> 
            et <b style="color:#9A1A26;">50%</b> de chance de <b style="color:#9A1A26;">ne rien obtenir de plus.</b>
        </li>

        <li>
            Supposons que vous aviez choisi l'option <b>B</b> pour cette ligne. Dans ce cas l'association garde : <b>???€</b> sur ses {{player.x_norm|floatformat:2}}€ initiaux. 
            Et vous avez <b style="color:green;">60%</b> de chance d'obtenir <b style="color:green;">{{player.y_me|floatformat:2}}€ </b> 
            et <b style="color:#9A1A26;">40%</b> de chance de <b style="color:#9A1A26;">ne rien obtenir de plus.</b>
        </li>
    </ul>
    
</div>



<table class="table_MPL"> 
    <thead class="sticky">
        <tr>
            <td colspan=4>
                
            </td>
        </tr>
        <tr>
            <th class="option_A_title">
                <center>
                    <div class="urne">
                        {% for i in boule %}
                            <div class="boules {{ i.couleur }}">{{ i.numero }}</div>
                        {% endfor %}
                    </div>
                    Option A
                </center>
            </th>

            <th class="choose_A_title">Choisir A </th>
            <th class="choose_B_title">Choisir B</th>

            <th class="option_B_title">
                <center>
                    <div class="urne">
                        {% for i in boule_prev %}
                            <div class="boules_prev {{ i.couleur }}">{{ i.numero }}</div>
                        {% endfor %}
                    </div>
                    Option B
                </center>
            </th>
        </tr>
    </thead>

    <tbody>
        {% for wtp in participant.vars.WTP_values %}
            <tr>
                <td class="option_A">
                    L'association garde <b>{{player.x_norm|floatformat:2}}€</b>. <br> 

                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ player.boule_verte_entrainement }}</b> 
                        vous donnent  <b style="color:green;"> {{ player.y_me|floatformat:2 }}€</b>  <br>
                        Les boules de <b style="color:#9A1A26;"> {{ player.boule_verte_entrainement|add:"1" }}</b> à 
                        <b style="color:#9A1A26;">{{ participant.vars.num_boule }}</b> vous donnent
                        <b style="color:#9A1A26;">0€</b> 
                    
                </td>

                <td class="choose_A">
                    
                </td>

                <td class="choose_B">
                
                </td>

                <td class="option_B">
                    L'association garde <b>{{ wtp|floatformat:2 }}€</b>. <br>

                    Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ player.boule_verte_option_prev_entrainement }}</b> 
                    vous donnent <b style="color:green;">{{ player.y_me|floatformat:2 }}€ </b> <br>
                    
                    Les boules de <b style="color:#9A1A26;">{{ player.boule_verte_option_prev_entrainement|add:"1" }}</b> à 
                    <b style="color:#9A1A26;">{{ participant.vars.num_boule }}</b> 
                    vous donnent  <b style="color:#9A1A26;">0€</b> <br>
                    
                   
                </td>
            </tr>
        {% endfor %}

    </tbody>
</table>
   

<br>
<center>
    {% next_button %}
</center>

{% endblock %}