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

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}
{% block styles %}
<link href="{% static 'EXLEY_CONSIGNE/EXLEY_CONSIGNE_style.css' %}" rel="stylesheet">
<link href="{% static 'EXLEY_ASPS/EXLEY_OTHERS_STYLE.css' %}" rel="stylesheet">
{% endblock %}


{% block title %}
<center>
    PART 3 - INSTRUCTIONS
</center>
{% endblock %}

{% block content %}

<div class="consigne_dotation" style="font-size:15px;">

    <div class="content-section">
        <p>In this part, you are asked to make a <span class="bold">series of decisions</span> from <b>32 tables</b>. Similarly to the previous part, 
          each row corresponds to a different situation in which you have to choose which option you prefer.</p>
        <p>However, these tables differ slightly from the ones presented in the previous part.</p>
        <p>Firstly, the <span class="bold">payoff recipients</span> of options (you or the charity) can vary from one table to another. 
          Four cases arise:</p>
        <ul style="margin-left: 50px;">
          <li><span class="bold">CASE 1:</span> You are the payoff recipient of both Option A and Option B.</li>
          <li><span class="bold">CASE 2:</span> The charity is the payoff recipient of both Option A and Option B.</li>
          <li><span class="bold">CASE 3:</span> You are the payoff recipient of Option A and the charity of Option B.</li>
          <li><span class="bold">CASE 4:</span> The charity is the payoff recipient of Option A and you of Option B.</li>
        </ul>
        <p>You will go through all tables from one case (<span class="bold">7 tables for each case</span>), then another one, and so on. 
          This part will thus be divided into <span class="bold">4 sub-parts</span>, each involving one of the above cases. The order in 
          which the cases are presented will be random. At the start of each sub-part, you will be informed of the case involved and will 
          be reminded of the payoff recipients of each option.</p>
        <p>Please find below an example of a table from case 3: </p>

        <!-- Placeholder for the actual table -->

        <div id="tableau-placeholder">
          <img src="{% static 'EXLEY_ASSO/tableau_pour_part3.jpg' %}" height=100% width=100% />
        </div>
        <br>

        <p>As you see, Option A involves you as the payoff recipient and Option B involves your charity as the payoff recipient.</p>
        <p>Secondly, the payoffs of Option A are <span class="bold">uncertain</span>, they involve gaining £{{player.x1_me|floatformat:2 }} with some 
          <span class="bold">probability</span> and receiving nothing otherwise. As you can see in the example above, in Option A, you 
          can gain £{{player.x1_me|floatformat:2 }} with some probability and £0,00 otherwise. Within each case, the tables only differ in the probability of Option A. 
          The <span class="bold">probability information</span> of having £{{player.x1_me|floatformat:2 }} will be presented as an <b>urn with green and red 
          balls</b> at the top of the table. You can understand the probability of receiving £{{player.x1_me|floatformat:2 }} as the <span class="bold">proportion 
            of green balls</span>. For example, if there are 60% of green balls and 40% of red balls, you have a <span class="bold">60% chance</span> 
            of gaining £{{player.x1_me|floatformat:2 }}. Further, the urn's composition is <b>masked</b> but you can reveal its content by 
            <b>placing the cursor in front 
            of the mask</b></p>

        <!-- Placeholder for the urn image -->
        
        <div id="urn-image-placeholder">

          <center>
       
            <div id="urne-container" class="urne-container" style="cursor:pointer;">
                <div id="cache" class="cache-style">
                    Place the mouse cursor here to display the urn
                </div>
                <div id="urne">
                    <!-- Les boules seront ajoutées ici par le script -->
                </div>
            </div>
        </center>

        </div>
      </div>
      <br>
      
        <p>As you can see, by default the urn's composition is masked by a black box but you can see its content if you hover the cursor over the black box. 
          Here, there are 60% of green balls and 40% of red balls. Please note that <span class="bold">you are not expected 
            to count the number of balls</span>.</p>
        <p>To summarize, for each decision, please pay attention to the following elements:</p>
        <ul style="margin-left: 50px;">
          <li>The payoff recipients of options</li>
          <li>The payoffs of each options</li>
          <li>And the probability involved in Option A</li>
        </ul>
        <p>So that you can familiarize yourself with this part of the study, you will first <span class="bold">train on 4 tables</span> (one of each sub-part).</p>
        <div class="content-section">
          <p><u>Outcome selection note:</u> Please note that the following <span class="bold">28 tables</span> (not including the 4 training ones) 
            will be <span class="bold">taken into account in the random selection of decisions</span> at the end of the experiment. If one of the tables is randomly 
            picked at the end of the experiment, a row from the table will be randomly selected. The corresponding amount of money of your choice in this specific 
            row will generate either money for you or money for the charity. For example, let's take the 3rd row of the table shown above and imagine you've chosen Option A. 
            If this line from this table is randomly picked, a single ball will be randomly drawn from the urn. If the ball is green, you will actually receive 
            £{{player.x1_me|floatformat:2 }}, 
            if the ball is red, you will receive nothing (either way the charity will receive nothing). If, on the other hand, you would have chosen Option B, 
            you would receive nothing and the charity would actually receive £4,00.</p>
        </div>      
    
</div>



<center>
                    
    <button class="blue-button">NEXT</button>
    
</center>

{% endblock %}


{% block scripts %}
<script>

    // --------------------------------------------
    // CREATION DE L'URNE ET DU MASQUAGE
    // --------------------------------------------
    document.addEventListener('DOMContentLoaded', (event) => {
        const urne = document.getElementById('urne');
        let boules = [];
    
        // Ajoutez P1 boules blanches
        for (let i = 0; i < 300; i++) {
            boules.push('blanche');
        }
        
        // Ajoutez P2 boules noires
        for (let i = 0; i < 200; i++) {
            boules.push('noire');
        }
        
        // Fonction pour mélanger les boules
        function melangerBoules(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }
    
        // Mélangez les boules
        melangerBoules(boules);
    
        // Créez les éléments de boule et ajoutez-les à l'urne
        boules.forEach(couleur => {
            let boule = document.createElement('div');
            boule.className = `boule ${couleur}`;
            urne.appendChild(boule);
        });
    });

  </script>
   
  
  
  <script>
      document.addEventListener('DOMContentLoaded', function() {
          var urneContainer = document.getElementById('urne-container');
          var cache = document.getElementById('cache');
          var tempsDebut;
          var tempsIntervals = []; // Tableau pour stocker les durées de chaque visite
  
          urneContainer.addEventListener('mouseenter', function() {
              cache.style.visibility = 'hidden';
              tempsDebut = Date.now(); // Commence à mesurer le temps
          });
  
          urneContainer.addEventListener('mouseleave', function() {
              cache.style.visibility = 'visible';
              var tempsInterval = Date.now() - tempsDebut; // Calcule le temps passé lors de cette visite
              tempsIntervals.push(tempsInterval); // Ajoute la durée au tableau
          });
  
          // Lors de la soumission du formulaire
          var form = document.querySelector('form');
          form.addEventListener('submit', function() {
              // Convertir le tableau des durées en chaîne JSON
              var inputTemps = document.createElement('input');
              inputTemps.type = 'hidden';
              inputTemps.name = 'temps_regard_urne';
              inputTemps.value = JSON.stringify(tempsIntervals);
              form.appendChild(inputTemps);
          });
      });
  </script>
  
  
  
 
  
  {% endblock %}