{{ extends "global/Page.html" }}
{{ load otree static }}

{{ block title }}
    Questionaire 2/2
{{ endblock }}



{{ block content }}
<br />
<b>Please answer the following questions!</b>
<br />
<br />
<div class="card bg-light instructions">
    <div class="card-body">

        <style>
            .mgslider-wrapper {
                border-spacing: 10px;
            }
            .mgslider-limit {
                width: 10%;
                min-width: 75px;
                height: 40px;
                margin: 100px;
                text-align: center;
                background: #eee;
                border: 1px solid #888;
            }
            .mgslider-limit, .mgslider-value {
                font-variant-numeric: tabular-nums;
            }
            .mgslider-before {
                height: 16px;
                width: 100%;
                background: #1e5bff;
            }
            .mgslider-feedback {
                -webkit-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
        </style>

        {{ formfield_errors 'altruism_1' }}
        {{ formfield_errors 'altruism_2' }}
        <p>
            <i>Click the blue bars to reveal the sliders.</i>
        </p>
        <p>
            Imagine the following situation: <br />
            You won 1,000 Euro in a lottery. Considering your current situation,
            <i>how much would you donate to charity?</i> <br />
            (Values between 0 and 1000 are allowed)
            <div id="slider1_here"></div>
        </p>
        <p>
            How do you assess your willingness to share with others without expecting
            anything in return when it comes to charity?
            <br />
            <br />
            (Please use a scale from 0 to 10, where 0 means you are <i>completely unwilling to share</i> and a 10
            means you are <i>very willing to share</i>. You can also use the values in between
            to indicate where you fall on the scale.)
            <div id="slider2_here"></div>
        </p>

        <script src="{{ static 'mgslider.js' }}"></script>

        <script>
            $(document).ready(function (event) {
                slider1 = new mgslider("altruism_1", 0, 1000, 1);
                slider1.print(document.getElementById("slider1_here"));

                slider2 = new mgslider("altruism_2", 0, 10, 1);
                slider2.print(document.getElementById("slider2_here"));
            });
        </script>

    </div>
</div>

<br />

<h1 style="font-size:2vw"><b>When you answered all questions, please proceed by clicking the "Next"-button.</b></h1>
<br />
    {{ next_button }}

{{ endblock }}

{{ block scripts }}
    <script>
        $(function () {
            setTimeout(function () {
                $('.otree-btn-next').show();
            }, 1 * 1000);
        });
    </script>
{{ endblock }}