{% block content %}

<style>
    .otree-body {
        max-width:1350px
    }
</style>

<div class="tab">
    <p>    <h2> <span style="font-size:18pt"> Etapa 1 </span> </h2>

        <h2> <span style="font-size:16pt">Tarea 2</span> </h2>
        En esta tarea te pedimos que nos digas cuál crees que ha sido la donación media de los otros participantes en la sesión en la primera tarea. Es decir,
        ¿cuánto crees que los otros participantes de la sesión han donado en promedio a <b>Reforesta</b>?
        <br>
        <br>
        El pago de esta tarea depende de lo preciso que sea tu pronóstico. Cuanto más preciso sea tu pronóstico, más dinero recibirás. Más concretamente, recibirás 2€ si tu pronóstico es exactamente igual a la donación media de los otros participantes de la sesión.
        Cuanto más lejos esté tu pronóstico, menos dinero recibirás por tu decisión.
        <br>
        <br>
        Supón que la donación media de los otros participantes es igual a <b>x</b> y que tu pronóstico es igual a <b>p</b>. Para calcular tu pago utilizaremos la siguiente fórmula:
            <div style="text-align: center;">
             <img src="https://i.imgur.com/KBHZArp.png" width="400px" height="75px" />
            </div>
        <br>
Ten en cuenta que si tu pronóstico <b>p</b> coincide con la donación media <b>x</b>, tu pago será de 2€. Cuanto más alejado esté tu pronóstico de la donación media, menor será tu pago. Es importante destacar que tu pago en esta tarea nunca será negativo. Si la diferencia entre tu pronóstico y la donación media es superior a 2€, tu pago será 0€.
    <br>
    <br>
    No es necesario que comprendas completamente la fórmula, lo único que debes tener en cuenta es que cuanto más cerca esté tu pronóstico de la donación media, más dinero podrás ganar.
        <br>
        <br>
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
    &nbsp &nbsp &nbsp &nbsp &nbsp &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">Continuar</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 %}