{{ block title }}
Part C: <b>Questionaire 2/2</b>
{{ endblock }}


{{ block content }}

    <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;
        }
        .card {
            background: lightskyblue;
            border-style: solid ;

        }
        .otree-btn-next {
            display: none;
        }
    </style>

    {{ formfield_errors 'altruism_1' }}
    {{ formfield_errors 'altruism_2' }}
</br>
<div class="card bg-light instructions">
    <div class="card">
        <div class="card-body">
            <p>
                <i>Click the blue bars to reveal the sliders.</i>
            </p>
            <p>
                Imagine the following situation: <br />
                You won £1,000 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>
</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 }}