{% 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">Situation Description</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. En d'autres
        termes, la Personne A peut donner n'importe quel montant 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 le montant 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 :
         </p>
          <img src="https://i.imgur.com/kZR7JVd.png" width="850px" 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.a %}
        {% formfield player.b %}


        <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 }}