{% block content %}

<style>
    .tab {
        display: none;
    }
</style>

<div class="tab">

    <p>
        Pour chaque action, évaluez selon votre <b>opinion personnelle</b> et indépendamment de l'opinion des autres,
        s'il est approprié ou non de la choisir. Par comportement "approprié", on entend le
        comportement que vous considérez personnellement comme "correct" ou "moral".
        <br>
        <br>
        Vous pouvez lire la description de la situation en cliquant sur le bouton Instructions en bas de la page.

    </p>

{% formfield player.HF_1 label="<b>La Personne A donne 0€ à la Personne B</b> (La Personne A reçoit 10€, la Personne B reçoit 0€):"%}

{% formfield player.HF_2 label="<b>La Personne A donne 1€ à la Personne B</b> (La Personne A reçoit 9€, la Personne B reçoit 0.50€):"%}

{% formfield player.HF_3 label="<b>La Personne A donne 2€ à la Personne B</b> (La Personne A reçoit 8€, la Personne B reçoit 1€):"%}

{% formfield player.HF_4 label="<b>La Personne A donne 3€ à la Personne B</b> (La Personne A reçoit 7€, la Personne B reçoit 1.50€):"%}

{% formfield player.HF_5 label="<b>La Personne A donne 4€ à la Personne B</b> (La Personne A reçoit 6€, la Personne B reçoit 2€):"%}

{% formfield player.HF_6 label="<b>La Personne A donne 5€ à la Personne B</b> (La Personne A reçoit 5€, la Personne B reçoit 2.50€):"%}

{% formfield player.HF_7 label="<b>La Personne A donne 6€ à la Personne B</b> (La Personne A reçoit 4€, la Personne B reçoit 3€):"%}

{% formfield player.HF_8 label="<b>La Personne A donne 7€ à la Personne B</b> (La Personne A reçoit 3€, la Personne B reçoit 3.50€):"%}

{% formfield player.HF_9 label="<b>La Personne A donne 8€ à la Personne B</b> (La Personne A reçoit 2€, la Personne B reçoit 4€):"%}

{% formfield player.HF_10 label="<b>La Personne A donne 9€ à la Personne B</b> (La Personne A reçoit 1€, la Personne B reçoit 4.50€):"%}

{% formfield player.HF_11 label="<b>La Personne A donne 10€ à la Personne B</b> (La Personne A reçoit 0€, la Personne B reçoit 5€):"%}

    <button type="button" class="btn btn-primary btn-tab" data-offset="1">Instructions</button>
    &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>

</div>

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

    <p>
        Dans une étude menée au laboratoire d'économie, la Personne A est jumelée au hasard avec un autre participant,
        la Personne B. Le jumelage est anonyme, ce qui signifie qu'aucun des participants ne connaîtra jamais
        l'identité des autres participants avec lesquels il est jumelé.
        <br>
        <br>
        Au cours de l'expérience, la Personne A fera un choix, l'expérimentateur enregistrera ce choix, puis
        la Personne B sera informée de ce choix et toutes deux recevront de l'argent en fonction du choix fait
        par la Personne A. De plus, les deux recevront des frais de participation minimes. Supposons que ni la
        Personne A ni la Personne B ne reçoivent d'autre argent pour avoir participé à l'expérience.
        <br>
        <br>
        Dans chaque binôme, la Personne A recevra 10 €, en plus des frais de participation. La Personne A
        aura ensuite la possibilité de donner n'importe quel montant de ses 10 € à la Personne B.
        La Personne B reçoit 0,50 € pour chaque 1 € que la Personne A lui envoie. Par conséquent, la <b>moitié</b>
        de l'argent que la Personne A envoie est perdue. La Personne A peut donner une partie de ses 10 €,
        par incréments de 1 €, à la Personne B. Par exemple, la Personne A peut décider de donner 0 € à la
        Personne B et de garder 10 € pour elle. Ou la Personne A peut décider de donner 10 € à la Personne B
        et de garder 0 € pour elle. La Personne A peut également choisir de donner tout autre montant compris
        entre 0 et 10 € à la Personne B, par incréments de 1 €. Ce choix déterminera la somme d'argent que chacun
        recevra, en privé et en espèces, à la fin de l'expérience.
        <br>
        <br>
        Vous trouverez ici un aperçu des actions possibles et des gains correspondants :
        <br>
         </p>
          <img src="https://i.imgur.com/WR0kBQT.png" width="900px" height="200px" />
        <br>
        <br>
        Veuillez vous assurer de bien comprendre la situation.
        <br>
        <br>
        Veuillez évaluer les actions possibles de la Personne A.
        <br>
        <br>
        &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 type="button" class="btn btn-primary btn-tab" data-offset="-1">Retour</button>
    </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 %}