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

{% block title %}
    Partie 2
{% endblock %}

{% block scripts %}
<script>

var m1 = new Number(-1) ;

function ftr1() {
    document.getElementById('mois1').style.display = "block";
    document.getElementById('mois2').style.display = "none";
    document.getElementById('indif').style.display = "none";
    m1 = 0 ;

}
function ftr2() {
    document.getElementById('mois1').style.display = "none";
    document.getElementById('mois2').style.display = "block";
    document.getElementById('indif').style.display = "none";
    m1 = 0 ;

}
function ftr3() {
    document.getElementById('mois1').style.display = "none";
    document.getElementById('mois2').style.display = "none";
    document.getElementById('indif').style.display = "block";
    m1 = 0 ;

}

$(function () {
        $("#form").submit(function (event) {
            if (m1===-1) {
                event.preventDefault();
            }
        });
    });


</script>
{% endblock %}

{% block content %}
<p class="text-justify">
Imaginez que votre revenu mensuel est de 1000€ (une fois votre loyer payé). Vous avez une maladie qui
    nécessite un traitement spécifique. Le traitement ne pourra
    vous être administré qu’au bout d’un mois et vous devrez attendre encore un mois pour que celui-ci agisse totalement.
    Cela entraîne un arrêt maladie de deux mois, c'est-à-dire que vous ne travaillez pas pendant 2 mois. <br>
</p>

<p class="text-justify">
    Durant le premier mois d’attente du traitement, votre état de santé est le suivant :

<ul>
    <li> Je ne peux pas me déplacer à pied <strong>plus de 30 min par jour</strong></li>
 <li> J'ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
 <li> Je suis <strong>incapable</strong> d'accomplir mes activités courantes</li>
 <li> J'ai des douleurs ou une gêne modérée(s)</li>
 <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
         </ul>

    </p>
<p class="text-justify">
Vous recevez donc le traitement au début du deuxième mois. Votre état de santé durant ce second mois d’arrêt maladie est :
    <ul>
 <li> Je ne peux pas me déplacer à pied <strong>plus de 1h30 par jour</strong></li>
 <li> J’ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
 <li> J’ai des problèmes <strong>modérés</strong> pour accomplir mes activités courantes</li>
 <li> J'ai des douleurs ou une gêne modérée(s)</li>
 <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
    </ul>
    </p>
<p class="text-justify">

    Avant la maladie vous n'aviez aucun problème de santé. Le traitement n’a pas de conséquences sur votre santé à long terme.
    Après les deux mois d’arrêt maladie vous serez à nouveau en bonne santé et pourrez retourner travailler.
    Vous n’avez pas de dépenses liées au traitement et votre revenu est entièrement préservé.
    Vous n'avez pas d'assurance santé.
</p>
<p class="text-justify">
    <u> Tombola </u> <br>
    Vous recevez par votre entreprise des bons d'achat pour chacun des deux mois de votre arrêt maladie. Pour un des deux mois,
    vous recevrez <strong>200€ de bons d’achat</strong>. Pour l’autre mois, votre employeur, qui est un original, décide de fixer le montant
    de bons d’achat que vous allez recevoir par une tombola. Vous avez alors <strong>50% de chance de gagner des bons d’achat d’un montant
    de 100€ et 50% de chance de gagner des bons d’achat d’un montant de 300€</strong>. <br>
Ces bons d'achat ne peuvent être utilisés que pour certaines activités : repas d’un restaurant soit pris sur place ou livré à domicile,
abonnement à une plateforme de films et/ou séries pendant 1 mois, places pour un événement sportif, spectacle ou concert,
abonnement aux chaînes de télévision de votre choix pendant 1 mois, places de cinéma. <br>
Les bons d'achat ne sont valables qu’un seul mois et sont fournis au début du mois. Vous ne pouvez donc utiliser chaque mois que le montant des
    bons obtenus au début du mois. En particulier, les bons d'achat obtenus au début du premier mois et non utilisés ne peuvent être utilisés
    le mois suivant. <br>
    </p>
<p class="text-justify">

<strong> Vous devez choisir quel mois de votre arrêt maladie vous souhaitez participer à la tombola </strong>(50% d'obtenir 100€ en bons d'achat et 50% de chance
     d'obtenir 300€ en bons d'achat) <strong>et quel mois vous souhaitez recevoir avec certitude 200€ en bons d'achat.</strong> Parmi les choix
    suivants, indiquez celui que vous préférez :
   </p>
<p>
<input type="radio" name="u112" value="1" onclick="ftr1();" id="opt1"> Premier mois : Participation à la tombola ; Deuxième mois : 200€ de bons
    d'achat avec certitude <br>
<input type="radio" name="u112" value="2" onclick="ftr2();" id="opt2"> Premier mois : 200€ de bons d'achat avec certitude ; Deuxième mois :
    Participation à la tombola <br>
<input type="radio" name="u112" value="3" onclick="ftr3();" id="opt3"> Vous êtes indifférent entre ces deux options : la décision est tirée à pile ou face.

</p>

<div id="indif" style="display:none">
    <p>
Vous avez indiquez être indifférent entre l'Option A et l'Option B. Est-ce : <br>
    <input type="radio" name="indif_u112" value="1" onclick="ok();" id="1">  Vous n'avez pas compris : vous pouvez demander au responsable de session de venir vous
    expliquer <br>
<input type="radio" name="indif_u112" value="2" onclick="ok();" id="2">  Vous êtes vraiment indifférent <br>
<input type="radio" name="indif_u112" value="3" onclick="ok();" id="3">  Vous n'arrivez pas à faire un choix <br>
    </p>
</div>


<p>
Les conséquences en terme de revenu et d’état de santé pour chaque mois apparaissent ci-dessous une fois un choix effectué.
</p>


<div id="mois1" style="display:none">
    <table class="table">
       <thead>
        <tr>
            <th rowspan=2> </th>
            <th colspan= 2  bgcolor="#EBFAF"> <center> Premier mois </center> </th>
            <th rowspan =2 bgcolor="#FEF7B0"> <center>  Deuxième mois </center> </th>
        </tr>
        <tr>
            <th bgcolor="#EBFAF"> <center> probabilité 50% </center>  </th>
            <th bgcolor="#EBFAF"> <center> probabilité 50% </center> </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row"> Revenu final (en €) </th>
           <td align=center bgcolor="#EBFAF"> 1100 </td>
           <td align=center bgcolor="#EBFAF"> 1300 </td>
            <td align=center bgcolor="#FEF7B0"> 1200 </td>
        </tr>
     <tr>
        <th scope="row"> Etat de santé </th>
         <td colspan=2   bgcolor="#EBFAF8"> <ul>
 <li> Je ne peux pas me déplacer à pied plus de 30 min par jour</li>
 <li> J'ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
 <li> Je suis incapable d'accomplir mes activités courantes</li>
 <li> J'ai des douleurs ou une gêne modérée(s)</li>
 <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>
         </ul>
         <td bgcolor="#FEF7B0"> <ul>
 <li> Je ne peux pas me déplacer à pied plus de 1h30 par jour</li>
 <li> J’ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
 <li> J’ai des problèmes modérés pour accomplir mes activités courantes</li>
 <li> J'ai des douleurs ou une gêne modérée(s)</li>
 <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>

    </ul> </td>
     </tr>
      </tbody>
    </table>
</div>


<div id="mois2" style="display:none">
    <table class="table">
        <thead>
        <tr>
            <th rowspan=2> </th>
            <th rowspan= 2  bgcolor="#EBFAF"> <center> Premier mois </center> </th>
            <th colspan =2 bgcolor="#FEF7B0"> <center>  Deuxième mois </center> </th>
        </tr>
        <tr>
            <th bgcolor="#FEF7B0"> <center> Probabilité 50% </center>  </th>
            <th bgcolor="#FEF7B0"> <center> Probabilité 50% </center> </th>
        </tr>
     </thead>
     <tbody>
        <tr>
           <th scope="row"> Revenu final (en €) </th>
           <td align=center  bgcolor="#EBFAF">1200 </td>
           <td align=center bgcolor="#FEF7B0">1100</td>
            <td align=center bgcolor="#FEF7B0">1300</td>
        </tr>
     <tr>
        <th scope="row"> Etat de santé </th>
         <td  bgcolor="#EBFAF8"> <ul>
 <li> Je ne peux pas me déplacer à pied plus de 30 min par jour</li>
 <li> J'ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
 <li> Je suis incapable d'accomplir mes activités courantes</li>
 <li> J'ai des douleurs ou une gêne modérée(s)</li>
 <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>


    </ul></td>
         <td colspan=2 bgcolor="#FEF7B0"> <ul>
 <li> Je ne peux pas me déplacer à pied plus de 1h30 par jour</li>
 <li> J’ai des problèmes légers pour me laver ou m'habiller tout(e) seul(e)</li>
 <li> J’ai des problèmes modérés pour accomplir mes activités courantes</li>
 <li> J'ai des douleurs ou une gêne modérée(s)</li>
 <li> Je ne suis ni anxieux(se) ni déprimé(e)</li>

    </ul> </td>
     </tr>
      </tbody>
    </table>
</div>

<p class="text-justify"> Une fois que vous avez fait votre choix, cliquez sur le bouton "Suivant". </p>

    {% next_button %}

{% endblock %}