{% block content %}

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

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

        <h2> <span style="font-size:26pt">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 esta sala en la primera tarea. Es decir,
        ¿cuánto crees que los otros participantes en esta sala 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 en esta sala.
        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/cqupCMx.png" width="550px" height="75px" />
            </div>
        <br>
    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 en esta tarea 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
        <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 %}