{{ block title }}
Instructions
{{ endblock }}
{{ block content }}
<style>
    .tab {
        display: none;
    }
</style>

<div class="tab">
    <p>
           Bienvenue et merci pour votre participation à cette étude !
          <br>
          <br>
          Cette étude est composée de deux parties, la partie en ligne d'aujourd'hui (première partie) et une
          partie en personne au Behavioral Economics Lab de la Toulouse School of Economics
          (deuxième partie). Cette partie en ligne prendra environ 15 minutes. Veuillez noter
          que vous devez compléter cette partie en ligne pour participer à la deuxième partie.
          Vous recevrez un email pour vous le rappeler.
          <br>
          <br>
          Veuillez compléter cette partie en une seule séance, sans être dérangé et
          si possible, veuillez utiliser un ordinateur ou une tablette.
          Veuillez éviter toute autre perturbation et réaliser cette étude seul.
          Nous nous réservons le droit d'exclure de l'expérience les participants qui ne complètent pas l'étude avec soin.
          <br>
          <br>
          Vous recevrez un paiement fixe de 4€ pour avoir rempli cette partie en ligne et pour avoir participé
        à la deuxième partie de l'étude. Notez que vous serez payé après avoir terminé les deux parties de l'étude.
        Vous aurez la possibilité de gagner plus d'argent pendant la deuxième partie de l'étude.
        Notez que vous ne pourrez pas participer à la seconde partie de l'étude si vous ne remplissez pas cette première partie.
          </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 &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>
           Dans cette partie de l'étude, vous allez lire la description de différentes situations.
              Dans chaque situation, il y a une personne qui doit faire un choix entre différentes actions.

          <br>
          <br>
          Après avoir lu la description de chaque situation, vous devez évaluer les différentes actions parmi
              lesquelles la personne dans cette situation peut choisir.
              Pour chaque action, évaluez selon votre propre opinion et indépendamment
              de l'opinion des autres, s'il est approprié ou non de la choisir.
              Par comportement "approprié", on entend le comportement que vous considérez personnellement comme "correct" ou "moral".
              La référence est donc votre <b>opinion personnelle</b>, indépendamment de l'opinion des autres.
          <br>
          <br>
          Nous vous demandons de répondre le plus précisément possible en donnant votre propre opinion honnête.
              Il n'y a pas de bonne ou de mauvaise réponse ; vous ne recevrez pas de rémunération supplémentaire pour vos réponses dans cette partie.
          <br>
          <br>
          Dans l'ensemble, il y a quatre situations différentes pour lesquelles vous devez évaluer les actions possibles.
              Pour vous montrer comment les différentes actions peuvent être évaluées, nous vous donnons maintenant un exemple.
          </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 &nbsp &nbsp &nbsp &nbsp
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Suivant</button>
    </p>
</div>

<div class="tab">
          <p>
      <h2> <span style="font-size:18pt">Exemple de Situation</span> </h2>
      <p>
          La Personne A est assise dans une cafétéria près de l'université.
          La Personne A remarque qu'une autre personne a laissé son portefeuille sur
          la table. La Personne A doit décider de ce qu'elle doit faire. La Personne A doit choisir parmi quatre actions possibles :
          <br>
                <ul>
                    <li>Prendre le portefeuille et le garder;</li>
                    <li>Demander aux autres clients si le portefeuille appartient à l'un d'entre eux;</li>
                    <li>Laisser le portefeuille là-bas;</li>
                    <li>Donnez le portefeuille au gérant de la cafétéria.</li>
                </ul>
          Pour chaque action, évaluez selon votre <b>opinion personnelle</b> et indépendamment de l'opinion des autres,
    s'il est approprié ou non de la choisir. Par comportement "approprié", on entend le comportement que vous
    considérez personnellement comme "correct" ou "moral".
          <br>
          <br>
        Vous pouvez choisir parmi une échelle à six points.
          <br>
          <br>
                <ul>
                    <li>Très inapproprié</li>
                    <li>Inapproprié</li>
                    <li>Plutôt inapproprié</li>
                    <li>Plutôt approprié</li>
                    <li>Approprié</li>
                    <li>Très approprié</li>
                </ul>
 </p>
        Vous évaluerez les actions à l'aide d'un tableau.
        Pour évaluer le comportement, vous devez marquer l'option correspondante.
        <br>
        <br>
        Supposons, par exemple, que vous évaluez :
        <br>
        <br>
         <ul>
                <li>Prendre et garder le portefeuille comme très inapproprié</li>
                <li>Demander aux autres clients si le portefeuille leur appartient comme approprié</li>
                <li>Laisser le portefeuille là comme plutôt inapproprié</li>
                <li>Donner le portefeuille au gérant de la cafétéria comme très approprié</li>
            </ul>
        Vous insérez les évaluations suivantes.
        <br>
        <br>
         <img src="https://i.imgur.com/247VTwr.png" width="750px" height="300px" />
      <p>
          <br>
         <br>
        Après avoir cliqué sur "suivant", la description des situations réelles que vous devez évaluer suivra. </p>
          </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 &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 }}