{{ 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€ qui vous seront versés à la fin de la session. Vous pourrez ainsi gagner plus d'argent aujourd'hui.
          <br>
          <br>
           Le montant de cette somme supplémentaire dépend de vos décisions, de celles des autres participants et du hasard. Veuillez donc lire attentivement les instructions.
          <br>
          <br>
           Évitez parler 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 l'étude. Si vous avez des questions, levez la main et nous irons jusqu’à votre place pour vous aider.
          </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 d'abord les instructions de la tâche. Après avoir lu les instructions, vous devrez prendre plusieurs décisions.
          <br>
          <br>
            Les deux tâches permettent de gagner de l'argent. Ainsi, les décisions que vous prendrez au cours de chaque
              tâche auront une incidence sur votre paiement final. À la fin de cette session, vous recevrez le montant
              total gagné au cours de l'étude en espèces, y compris les 5€ pour votre participation aujourd'hui ainsi
              que tout montant supplémentaire gagné lors des tâches. Les instructions de chaque tâche expliquent en
              détail comment gagner de l'argent supplémentaire.
          <br>
          <br>
            Veuillez lire attentivement les instructions pour vous assurer que vous les comprenez bien.
          </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 }}