{% 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>
        Dans l'expérience, la Personne A et la Personne B feront un choix simultané, l'expérimentateur
        enregistrera ce choix, puis les deux individus seront informés du choix et payés en fonction
        des choix faits par la Personne A et la Personne B, ainsi qu'un frais de participation minime.
        Supposons qu'aucun des deux ne recevra d'autre argent pour sa participation à l'expérience.
        <br>
        <br>
        Dans chaque binôme, la Personne A recevra 10€. La Personne B recevra 0€.
        Les deux participants reçoivent des frais de participation minimes. La Personne A et la Personne B prennent ensuite une décision simultanée.
        <br>
        <br>
        <b>La décision de la Personne A</b>: La Personne A peut offrir n'importe quelle partie des 10 € à la Personne B.
        La Personne A décide donc de la partie des 10 € qu'elle veut offrir à la Personne B. La Personne A
        peut choisir d'offrir n'importe quel montant entre 0 et 10 € à la Personne B, par incréments de 1€.
        <br>
        <br>
        <b>La décision de la Personne B</b>: La Personne B décide des propositions qu'elle veut accepter.
        Les deux participants ne reçoivent les montants stipulés que si la Personne B accepte l'offre.
        Si elle rejette l'offre, les deux participants obtiennent 0€. La Personne B choisit un montant
        compris entre 0€ et 10€, par incréments de 1€. Ce montant est la proposition la plus basse que
        la Personne B est prête à accepter. Toutes les propositions qui sont égales ou supérieures à
        ce montant sont acceptées par la Personne B. Toutes les propositions qui sont inférieures à
        ce montant sont rejetées par la Personne B.
        <br>
        <br>
        Comme les décisions sont prises simultanément, la Personne A ne connaît pas la somme minimale que la Personne B
        est prête à accepter au moment où elle prend sa décision. De même, la Personne B ne sait pas combien d'argent
        la Personne A va effectivement offrir.
        <br>
        <br>
        Par exemple, la Personne A pourrait offrir 2 € à la Personne B. Ensuite, si la Personne B accepte
        des propositions à partir de 0 €, 1 € ou 2 €, l'offre sera acceptée et la Personne A obtiendra 8 €
        et la Personne B 2 €. Si la Personne B accepte des propositions à partir d'un montant supérieur à 2 €,
        l'offre sera rejetée et la Personne A et la Personne B obtiendront 0 €. La Personne A pourrait offrir 8 €
        à la Personne B. Ensuite, si la Personne B accepte des propositions à partir de 8 € ou moins, l'offre
        sera acceptée et la Personne A obtiendra 2 € et la Personne B 8 €. Si la Personne B accepte des propositions
        supérieures à 8 €, l'offre sera rejetée et la Personne A et la Personne B obtiendront 0 €.
        <br>
        <br>
        Vous trouverez ici un aperçu des actions possibles et des gains correspondants.
        Chaque cellule correspond aux paiements que la Personne A (en haut de la cellule)
        et la Personne B (en bas de la cellule) reçoivent en cas d'une offre donnée de la Personne A et d'une décision de la Personne B.
        <br>
        <br>
        <img src="https://i.imgur.com/loj5eAF.png" width="900px" height="150px" />
        <br>
        <br>
        Assurez-vous 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">Questions de compréhension</span> </h2>

        {% formfield player.UG1 %}
        {% formfield player.UG2 %}


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