{{ block title }}
Questionnaire
{{ endblock }}
{{ block content }}
<style>
    label.col-form-label {
        font-weight: bold;
    }

    <
    style >
    p {
        text-align: justify;
    }

    .slider_container {
        width: 100%;
    }

    .selector {
        border-right-color: transparent;
        border-right-width: 15px
    }

    datalist {
        display: flex;
    }

    option {
        width: 9%
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 18px 0;
        width: 100%;
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: black;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -14px;
        visibility: hidden;

    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: black;
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: black;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-moz-range-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
    }

    input[type=range]::-ms-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: black;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type=range]::-ms-fill-upper {
        background: black;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type=range]::-ms-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 16px;
        width: 8px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: black;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: black;
    }


</style>
{{formfield 'gender'}}
{{formfield 'schooling'}}
{{formfield 'age'}}

<p class="mt-5">
    How do you see yourself:
</p>
<p>
    Please indicate on a scale if you are generally a person who is fully prepared to take risks or do you try to avoid
    taking risks?
</p>
<p>
    <b>0 means: ‘not at all willing to take risks’</b>
</p>
<p>
    <b>10 means: ‘very willing to take risks’</b>
</p>
<table class="table table-borderless m-0 p-0">
    <tr>
        <td colspan="2" id="0" class="text-md-start" style="width: 5%">0</td>
        <td colspan="2" id="1" class="text-md-center" style="; ">1</td>
        <td colspan="2" id="2" class="text-md-center" style=" ">2</td>
        <td colspan="2" id="3" class="text-md-center" style="">3</td>
        <td colspan="2" id="4" class="text-md-center" style="">4</td>
        <td colspan="2" id="5" class="text-md-center" style="">5</td>
        <td colspan="2" id="6" class="text-md-center" style="">6</td>
        <td colspan="2" id="7" class="text-md-center" style="">7</td>
        <td colspan="2" id="8" class="text-md-center" style="">8</td>
        <td colspan="2" id="9" class="text-md-center" style="">9</td>
        <td colspan="2" id="10" class="text-md-center" style="width: 5%">10</td>
    </tr>
    <tr>
        <td class="slider_container" colspan=30>
            <input type="range" value="0" min="0" max="10" step="1" list="tickmarks" style="width: 100%;"
                   oninput="tableClick(this)" id="slider" name="risk">
        </td>
    </tr>
    <script>
    window.slider_clicked  = false
    function tableClick(e) {
        window.slider_clicked = true
        $('<style>input[type="range"]::-webkit-slider-thumb { visibility: visible!important;}<style/>').appendTo('head');
    }

    $('#form').submit(function (evt) {
        console.log("Submit check");
        if (window.slider_clicked === false) {
            evt.preventDefault();
        }
    })
</script>

</table>

<div class="float-end row">
    <button class="otree-btn-next btn btn-primary btn-danger">Next</button>
</div>
{{ endblock }}