{{ block title }}
Instructions
{{ endblock }}
{{ block content }}

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

<div class="tab">
    <p>
          Bienvenue dans cette étude !
          <br>
          <br>
          Pour avoir participé à l'étude d'aujourd'hui vous recevrez 5 €. En fonction de vos choix, vous pourrez gagner plus d'argent.
          <br>
          <br>
          Evitez toute conversation avec les autres participants de l’étude. Éteignez votre téléphone portable et retirez de votre table tout objet dont vous n'avez pas besoin pour réaliser l'étude. Si vous avez des questions, levez la main, et nous viendrons à votre place pour y répondre en privé.
          </p>
    <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
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Suivant</button>
    </p>
</div>
<div class="tab">
          <p>
              L'étude d'aujourd'hui consiste en <b>deux</b> tâches distinctes. Pour chaque tâche, vous recevrez une série d'instructions. Après avoir lu ces instructions, vous devrez prendre plusieurs décisions. Les instructions de chaque tâche expliquent en détail comment vous pouvez gagner de l'argent supplémentaire.
          <br>
          <br>
            Les deux tâches vous permettent de gagner de l'argent. Ainsi, les décisions que vous prenez au cours de chaque tâche peuvent avoir une incidence sur votre paiement final. À la fin de l'étude, vous recevrez le montant total gagné pendant l'étude en espèces. Ce montant comprendra les 5 € pour votre participation aujourd'hui, ainsi que tout montant supplémentaire gagné dans le cadre des deux tâches.
          <br>
          <br>
            Veuillez lire attentivement les instructions afin de vous assurer que vous comprenez bien les décisions que vous devrez prendre par la suite.
          </p>
    <p>
        <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
        <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 }}