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

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

<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>
        Avant d'évaluer les actions de la Personne A, répondez aux questions de compréhension suivantes à la page suivante.
        <br>
        <br>
    </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 &nbsp
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Suivant</button>
    </p>
    </div>

<div class="tab">
  <h2> <span style="font-size:18pt" style="text-align: center;">  Questions de compréhension</span> </h2>



        {% formfield player.Half1 %}
        {% formfield player.Half2 %}


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