{{ block content }}

<style>
    .tab {
        display: none;
    }
</style>

<div class="tab">
 <p>
     <h2> <span style="font-size:18pt">Instructions</span> </h2>
                Benvingut i gràcies per participar en aquest estudi!
                <br>
                <br>
                Per la teva participació avui rebràs 2€. Pots rebre més diners depenent de les teves decisions durant
                l'estudi. La quantitat total que rebràs serà pagada en efectiu i en privat al final de l'estudi.
                <br>
                <br>
                Et demanem que evitis qualsevol conversa amb els teus companys. Tanca el teu telèfon mòbil i remou
                qualsevol objecte de la taula que no necessitis per aquest estudi. En cas que tinguis alguna pregunta durant
                l'estudi, aixeca la mà, i vindrem a respondre la teva pregunta al teu lloc.
                <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
        <button type="button" class="btn btn-primary btn-tab" data-offset="1">Continua</button>
    </p>
</div>


<div class="tab">
    <p>
        <h2> <span style="font-size:18pt">Instructions</span> </h2>
           En l'estudi d'avui hauràs de completar dues tasques. En les dues tasques hauràs de prendre una sèrie de decisions que afectaran el teu pagament.
           Abans de cada tasca podràs llegir unes instruccions que t'explicaran el funcionament de la tasca i com pots les teves decisions afectaran el teu pagament.
          <br>
          <br>
           Només una de les tasques afectarà el teu pagament. Això vol dir que el final de l'experiment, una de les dues tasques serà escollida aleatòriament per determinar el teu pagament.
           Quan decideixis les teves decisions no sabràs quina de les dues tasques serà l'elegida per determinar el pagament.
          <br>
          <br>
           Recorda que les teves decisions durant l'estudi no permetran en cap cas determinar la teva identitat. Per tant, l'anàlisi de les dades i la presentació dels resultats de l'estudi
           serà exclusivament de forma anònima.
          <br>
          <br>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Torna</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 type="button" class="btn btn-primary btn-tab" data-offset="1">Continua</button>
    </p>
</div>

<div class="tab">
    <p>
        <h2> <span style="font-size:18pt">Primera Tasca</span> </h2>
        En la primera tasca, rebràs 10€. La teva decisió consistirà en decidir com vols dividir aquests 10€ entre tu i <b> NOM CHARITY </b>.
        És a dir, podràs donar qualsevol quantitat dels 10€ a <b> NOM CHARITY </b>. Per exemple, pots donar 0€ a <b> NOM CHARITY </b> i quedar-te amb els 10€.
        Pots donar 10€ a <b> NOM CHARITY </b> i quedar-te amb 0€. Pots donar qualsevol quantitat entre 0 i 10€ a <b> NOM CHARITY </b> i quedar-te amb la diferència. Tots els individus de la sessió prenen la mateixa decisió.
        <br>
        <br>
       <b> NOM CHARITY </b> (EXPLICAR QUE FA CHARITY)
        <br>
        <br>
        (EXPLICAR EFECTE DONACIÓ EN TERMES CO2)
        <br>
        <br>
        <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Torna</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
        <button class="btn btn-primary">Continua</button>
    </p>
</div>


<div class="tab">
  <h2> <span style="font-size:18pt" style="text-align: center;">  Primera Tasca </span> </h2>

        En la primera tasca, tots els individus d'aquesta sessió rebreu 10€. H
          <br>
          <br>
        Decisió


        <button type="button" class="btn btn-primary btn-tab" data-offset="-1">Torna</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 &nbsp
        <button class="btn btn-primary">Continua</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 }}