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


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


{% block title %}
<center>
    PARTIE 2 - Consigne
</center>
{% endblock %}

{% block content %}

<div class="consigne">
    <b>Dans cette expérience, vous allez faire des choix qui vont potentiellement rapporter de l'argent à vous et/ou à l'association {{ player.association_choice }}.</b><br><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 trois éléments à considérer avant de prendre une décision : </b><br>
        <ol style='margin-left : 50px;'>
            <li>
                le montant que vous gardez pour vous.
            </li>
            <li>
                le montant que l'association peut recevoir 
            </li>
            <li>
                les probabilités que l'association reçoive de l'argent 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, vous gardez toujours vos <b>10€</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, {{ player.association_choice }} reçoit <b style="color:green;">{{player.asso_price}}€</b>; si elle est rouge, <b style="color:#9A1A26;">elle ne reçoit rien</b>.


    <br>


    <b style="font-size:14px; font-weight:bold;margin-left:20px;">Option B :</b>
    <b>Le montant que vous gardez change 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, {{ player.association_choice }} reçoit <b style="color:green;">{{player.asso_price}}€</b>; si elle est rouge, <b style="color:#9A1A26;">elle ne reçoit rien</b>. 
    
    <br>
    <br>
    <b style="font-size:16px; font-weight:bold;">Détermination des 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, un seul tableau sera sélectionné au hasard et une ligne de ce tableau sera choisie également au hasard. 
    Votre gain et la donation à {{ 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.
    </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 vous gardez : <b>10€</b> sur vos 10€ initiaux. 
            Et l'association à <b style="color:green;">50%</b> de chance d'obtenir <b style="color:green;">100€</b> et <b style="color:#9A1A26;">50%</b> de chance d'avoir <b style="color:#9A1A26;">0€</b>
        </li>

        <li>
            Supposons que vous aviez choisi l'option <b>B</b> pour cette ligne. Dans ce cas vous gardez : <b>8€</b> sur vos 10€ initiaux. 
            Et l'association à <b style="color:green;">60%</b> de chance d'obtenir <b style="color:green;">100€</b> et <b style="color:#9A1A26;">40%</b> de chance d'avoir <b style="color:#9A1A26;">0€</b>
        </li>
    </ul>
    
</div>



<table class="table_MPL"> 
    <thead class="sticky">
        <tr>
            <td colspan=4>
                <div class="consigne_dotation">
                    <center>
                    <b>VOTRE DOTATION : VOUS AVEZ 10€.</b>
                    </center>
                </div>
            </td>
        </tr>
        <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">
                    Vous gardez <b>{{Constants.ENDOWMENT}}€</b>. <br> 

                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ player.boule_verte_entrainement }}</b> donnent <b style="color:green;">
                            {{ player.asso_price }}€</b> à la <b>{{ player.association_choice }}</b>. <br>
                        Les boules de <b style="color:#9A1A26;"> {{ player.boule_verte_entrainement|add:"1" }}</b> à <b style="color:#9A1A26;">{{ Constants.num_boule }}</b> donnent 
                        <b style="color:#9A1A26;">{{ Constants.low_price_asso }}€</b> à la <b>{{ player.association_choice }}</b>
                    
                </td>

                <td class="choose_A">
                    <input type="radio" class="custom-radio"  value="A" id="choix{{ forloop.counter }}_A" required>
                    <label for="choix{{ forloop.counter }}_A"></label>
                </td>

                <td class="choose_B">
                    <input type="radio" class="custom-radio"  value="B" id="choix{{ forloop.counter }}_B">
                    <label for="choix{{ forloop.counter }}_B"></label>
                </td>

                <td class="option_B">
                    Vous gardez <b>{{ wtp }}€</b>. <br>


                        Les boules de <b style="color:green;">1</b> à <b style="color:green;">{{ player.boule_verte_option_prev_entrainement }}</b> 
                        donnent <b style="color:green;">{{ player.asso_price }}€</b> à la <b>{{ player.association_choice }}</b>. <br>
                        
                        Les boules de <b style="color:#9A1A26;">{{ player.boule_verte_option_prev_entrainement|add:"1" }}</b> à <b style="color:#9A1A26;">{{ Constants.num_boule }}</b> 
                        donnent <b style="color:#9A1A26;">{{ Constants.low_price_asso }}€</b> à la <b>{{ player.association_choice }}</b>. <br>
                        
                   
                </td>
            </tr>
        {% endfor %}

    </tbody>
</table>
   

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

{% endblock %}