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

{% block title %}
    Deuxième partie
{% endblock %}

{% block scripts %}
<script>

 function fra1() {
    document.getElementById('d1').checked = true;
    document.getElementById('d2').checked = true;
    document.getElementById('d3').checked = true;
    document.getElementById('d4').checked = true;
    document.getElementById('d5').checked = true;
    document.getElementById('d6').checked = true;
    document.getElementById('d7').checked = true;
    document.getElementById('d8').checked = true;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra2() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = true;
    document.getElementById('d3').checked = true;
    document.getElementById('d4').checked = true;
    document.getElementById('d5').checked = true;
    document.getElementById('d6').checked = true;
    document.getElementById('d7').checked = true;
    document.getElementById('d8').checked = true;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra3() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = false;
    document.getElementById('d3').checked = true;
    document.getElementById('d4').checked = true;
    document.getElementById('d5').checked = true;
    document.getElementById('d6').checked = true;
    document.getElementById('d7').checked = true;
    document.getElementById('d8').checked = true;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra4() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = false;
    document.getElementById('d3').checked = false;
    document.getElementById('d4').checked = true;
    document.getElementById('d5').checked = true;
    document.getElementById('d6').checked = true;
    document.getElementById('d7').checked = true;
    document.getElementById('d8').checked = true;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra5() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = false;
    document.getElementById('d3').checked = false;
    document.getElementById('d4').checked = false;
    document.getElementById('d5').checked = true;
    document.getElementById('d6').checked = true;
    document.getElementById('d7').checked = true;
    document.getElementById('d8').checked = true;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra6() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = false;
    document.getElementById('d3').checked = false;
    document.getElementById('d4').checked = false;
    document.getElementById('d5').checked = false;
    document.getElementById('d6').checked = true;
    document.getElementById('d7').checked = true;
    document.getElementById('d8').checked = true;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra7() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = false;
    document.getElementById('d3').checked = false;
    document.getElementById('d4').checked = false;
    document.getElementById('d5').checked = false;
    document.getElementById('d6').checked = false;
    document.getElementById('d7').checked = true;
    document.getElementById('d8').checked = true;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra8() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = false;
    document.getElementById('d3').checked = false;
    document.getElementById('d4').checked = false;
    document.getElementById('d5').checked = false;
    document.getElementById('d6').checked = false;
    document.getElementById('d7').checked = false;
    document.getElementById('d8').checked = true;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra9() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = false;
    document.getElementById('d3').checked = false;
    document.getElementById('d4').checked = false;
    document.getElementById('d5').checked = false;
    document.getElementById('d6').checked = false;
    document.getElementById('d7').checked = false;
    document.getElementById('d8').checked = false;
    document.getElementById('d9').checked = true;
    document.getElementById('d10').checked = true;
}
function fra10() {
    document.getElementById('d1').checked = false;
    document.getElementById('d2').checked = false;
    document.getElementById('d3').checked = false;
    document.getElementById('d4').checked = false;
    document.getElementById('d5').checked = false;
    document.getElementById('d6').checked = false;
    document.getElementById('d7').checked = false;
    document.getElementById('d8').checked = false;
    document.getElementById('d9').checked = false;
    document.getElementById('d10').checked = true;
}

</script>
{% endblock %}

{% block content %}
<p class="text-justify">Pour cette question, vous devez effectuer un choix entre deux options pour <strong>chaque ligne</strong>  du tableau ci-dessous.
    Vous devez donc prendre 10 décisions.</p>

<p class="text-justify">Chaque option (gauche ou droite) représente un tirage au sort d'une boule dans <strong> une urne contenant 10 boules</strong>.
    Chaque boule représente une perte d'argent mais le montant de la perte dépend de la couleur de la boule. <br>

    Pour les options de gauche, chaque boule indique une <strong> perte d'argent : soit de 320€ pour les boules vertes, soit de 480€ pour les boules bleues</strong>. <br>
Pour les options de droite, chaque boule indique une <strong> perte d'argent : soit de 720€ pour les boules jaunes, soit de 80€ pour les boules marrons</strong>. <br>
Quelle que soit l'option que vous choisissez (urne de gauche ou urne de droite), <strong> imaginez qu'une boule sera tirée au hasard,
        et que vous perdrez le montant qui est indiqué sur la boule. Les tirages seraient indépendants</strong>. <br>
La probabilité que vous perdiez un montant donné dépend donc du nombre de boules de chaque couleur dans l'urne que vous aurez choisie. <br>
</p>

<p class="text-justify"> <u> Par exemple :</u>  <br>
<u>La partie gauche de la première ligne du tableau représente la situation suivante :</u>  <br>
L’urne est remplie de 10 boules bleues (-480€). La probabilité de tirer une boule bleue est donc de 100% et celle de
    tirer une boule verte est de 0%. Autrement dit, il y a une probabilité de 100% de perdre 480€ et une probabilité de 0% de perdre 320€.
    Vous perdrez donc 480€ avec certitude si vous choisissez cette option.  <br>
<u> La partie droite de la première ligne du tableau représente la situation suivante : </u> <br>
L’urne est remplie de 10 boules jaunes (-720€). La probabilité de tirer une boule jaune est donc de 100% et celle de tirer
    une boule marron est de 0%. Autrement dit, il y a une probabilité de 100% de perdre 720€ et une probabilité de 0% de perdre 80€.
    Vous perdrez donc 720 euros avec certitude si vous choisissez cette option.  <br>

Le choix à faire est donc entre une perte de 480€ et une perte de 720€.
</p>

<p class="text-justify"> <strong> Pour chaque ligne vous devez indiquer si vous préférez l'urne de gauche ou celle de droite. </strong> Vous remarquerez que les
    montants des pertes ne changent pas, uniquement les probabilités associées à chaque perte (puisque le nombre de
    boules de chaque couleur change à chaque ligne).</p>

<p class="text-justify">
    <strong> Indiquez si vous préférez l'option de gauche ou de droite. </strong> <br>
    Quand vous cliquez sur un choix à droite, cela sélectionne automatiquement tous les choix suivants de droite.
</p>

 <table class="table">
      <thead>
        <tr>
          <th> <center> Gauche</center> </th>
            <th> </th>
            <th> </th>
            <th> <center> Droite </center> </th>
        </tr>
      </thead>
      <tbody>
        <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG1.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra1" value="g" id="g1">  </td>
            <td>  <input type="radio" name="ra1" value="d" onclick="fra1();" id="d1">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD1.png" %}"  width="450" height="45" /></td>
        </tr>
      <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG2.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra2" value="g" id="g2">  </td>
            <td>  <input type="radio" name="ra2" value="d" onclick="fra2();" id="d2">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD2.png" %}"  width="450" height="45" /></td>
        </tr>
      <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG3.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra3" value="g" id="g3">  </td>
            <td>  <input type="radio" name="ra3" value="d" onclick="fra3();" id="d3">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD3.png" %}"  width="450" height="45" /></td>
        </tr>
      <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG4.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra4" value="g" id="g4">  </td>
            <td>  <input type="radio" name="ra4" value="d" onclick="fra4();" id="d4">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD4.png" %}"  width="450" height="45" /></td>
        </tr>
      <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG5.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra5" value="g" id="g5">  </td>
            <td>  <input type="radio" name="ra5" value="d" onclick="fra5();" id="d5">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD5.png" %}"  width="450" height="45" /></td>
        </tr>
      <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG6.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra6" value="g" id="g6">  </td>
            <td>  <input type="radio" name="ra6" value="d" onclick="fra6();" id="d6">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD6.png" %}"  width="450" height="45" /></td>
        </tr>
      <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG7.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra7" value="g" id="g7">  </td>
            <td>  <input type="radio" name="ra7" value="d" onclick="fra7();" id="d7">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD7.png" %}"  width="450" height="45" /></td>
        </tr>
      <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG8.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra8" value="g" id="g8">  </td>
            <td>  <input type="radio" name="ra8" value="d" onclick="fra8();" id="d8">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD8.png" %}"  width="450" height="45" /></td>
        </tr>
      <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG9.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra9" value="g" id="g9">  </td>
            <td>  <input type="radio" name="ra9" value="d" onclick="fra9();" id="d9">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD9.png" %}"  width="450" height="45" /></td>
        </tr>
      </tbody>
     <tr>
           <td><img src="{% static "essai_05_02/RA/ligneG10.png" %}" width="450" height="45" /></td>
            <td> <input type="radio" name="ra10" value="g" id="g10">  </td>
            <td>  <input type="radio" name="ra10" value="d" onclick="fra10();" id="d10">   </td>
          <td><img src="{% static "essai_05_02/RA/ligneD10.png" %}"  width="450" height="45" /></td>
        </tr>
    </table>


{{ form.ra1.errors }}
{{ form.ra2.errors }}
{{ form.ra3.errors }}
{{ form.ra4.errors }}
{{ form.ra5.errors }}
{{ form.ra6.errors }}
{{ form.ra7.errors }}
{{ form.ra8.errors }}
{{ form.ra9.errors }}
{{ form.ra10.errors }}


    {% next_button %}

{% endblock %}