{% extends "global/Page.html" %} {% load otree static %} {% block styles %} {% endblock %} {% block scripts %} {% endblock %} {% block title %} {% endblock %} {% block content %}

<style>
    .otree-body {
        max-width:1350px;
         font-size: 23px;
    }
</style>

<div class="tab">
  <h2> <span style="font-size:28pt">Description de la situation</span> </h2>

    <p>
        Dans une étude menée au laboratoire économique, deux participants, Personne A et Personne B, sont appariés aléatoirement.
        L'appariement est anonyme, ce qui signifie que ni l'un ni l'autre participant ne connaîtra l'identité de l'autre participant avec qui il est apparié.
        <br>
        <br>
        Dans l'expérience, Personne A va faire un choix, l'expérimentateur va enregistrer ce choix. Puis,
        Personne A et Personne B seront informés du choix et seront payés en fonction du choix fait par Personne A. En outre, tous les deux
        recevront une petite prime de participation. Supposons que ni Personne A ni Personne B ne recevront aucune autre somme d'argent pour participer
        à l'expérience.
        <br>
        <br>
        L'expérience se compose de <b>deux étapes</b>. Dans la première étape, <b>seulement</b> Personne B participe
        à une tâche pendant 30 minutes. Personne A n'a pas l'occasion de participer à cette tâche. Lorsque Personne B
        participe à cette étape, il/elle ne sait pas de l'existence de la deuxième étape.
        <br>
        <br>
        Dans la tâche de la première étape, Personne B est présenté avec plusieurs tables contenant
        uniquement des 1 et des 0. <b>Personne B doit indiquer le nombre de zéros dans chaque table</b>.
        Un exemple de table est fourni ci-dessous.
        </p>
         <div style="text-align: center;">
            <img src="https://i.imgur.com/QItetlG.png" width="700" height="350px" />
         </div>
        <br>
        Pour chaque table où la réponse est correcte, la Personne B gagne 0.50€. Cette tâche a une durée totale de 30 minutes. À la fin de cette tâche,
        Personne B a correctement indiqué le nombre de zéros dans 20 tables. Par conséquent, <b>Personne B a gagné (20 x 0.50€ =) 10€</b>
        <br>
        <br>
        Dans la deuxième étape, <b>Personne A a la possibilité de donner n'importe quel montant des 10€ gagnés par Personne B à Personne B</b>.
        C'est-à-dire, Personne A peut donner n'importe quel montant des 10€,
        par incréments de 1€, à Personne B. Par exemple, Personne A peut décider de donner 0€ à Personne B et de
        garder 10€ pour lui/elle-même. Ou Personne A peut décider de donner 10€ à Personne B et de garder 0€ pour
        lui/elle-même. Personne A peut également choisir de donner n'importe quel autre montant entre 0€ et 10€ à Personne B,
        par incréments de 1€. Ce choix déterminera combien d'argent chaque personne recevra, en privé et en espèces, à la fin
        de l'expérience.
        <br>
        <br>
        Vous pouvez trouver un aperçu des actions possibles et des gains correspondants ici:
            <div style="text-align: center;">
             <img src="https://i.imgur.com/Eyu856b.png" width="1400px" height="350px" />
            </div>
        Avant d'évaluer les actions de Personne A, veuillez répondre aux questions de compréhension suivantes :
        <br>
        <br>
        {% formfield player.EarnR1 %}
        {% formfield player.EarnR2 %}
        {% formfield player.EarnR3 %}
    </p>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp
        <button class="btn btn-primary">Suivant</button>
    </p>
    </div>

<script>

    let activeTab = 0;

    function showCurrentTabOnly() {
        let tabIndex = 0;
        for (let tab of document.getElementsByClassName('tab')) {
            tab.style.display = tabIndex === activeTab ? 'block' : 'none';
            tabIndex++;
        }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
            scroll_Top()
        }
    }
    function scroll_Top() {
        window.scrollTo(0,0)
    }
</script>

{{ endblock }}