{{ block content }}
{{ load static otree }}

<style>
.container{
    max-width: 80%;
}

.otree-title{
    margin-top: -25px;
}

.myclass::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #007afe;
    border: 1px solid #000000;
    height: 21px !important;
    width: 10px !important;
    border-radius: 0px !important;
    background: #ffffff !important;
    cursor: pointer !important !important;
    -webkit-appearance: none !important;
    margin-top: -7px !important;
}

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

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

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

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

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

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

.input-group, input.form-control, select.form-control {
    max-width: 100%;
}

input[name=Q12_driving]:focus {
    outline: none;
}

input[name=Q12_financial]:focus {
    outline: none;
}

input[name=Q12_leisure]:focus {
    outline: none;
}

input[name=Q12_occupation]:focus {
    outline: none;
}

input[name=Q12_health]:focus {
    outline: none;
}

input[name=Q12_faith]:focus {
    outline: none;
}
/* webkit-slider-runnable-track */
input[name=Q12_driving]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
    background: #007afe;
    border-radius: 0px;
    border: 0.0px solid #ffffff;
}

input[name=Q12_financial]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
    background: #007afe;
    border-radius: 0px;
    border: 0.0px solid #ffffff;
}

input[name=Q12_leisure]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
    background: #007afe;
    border-radius: 0px;
    border: 0.0px solid #ffffff;
}

input[name=Q12_occupation]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
    background: #007afe;
    border-radius: 0px;
    border: 0.0px solid #ffffff;
}

input[name=Q12_health]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
    background: #007afe;
    border-radius: 0px;
    border: 0.0px solid #ffffff;
}

input[name=Q12_faith]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    animate: 0.2s;
    {#box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;#}
    background: #007afe;
    border-radius: 0px;
    border: 0.0px solid #ffffff;
}

/* Webkit-slider-thumb */
input[name=Q12_driving]::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

input[name=Q12_financial]::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

input[name=Q12_leisure]::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

input[name=Q12_occupation]::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

input[name=Q12_health]::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

input[name=Q12_faith]::-webkit-slider-thumb {
    border: 0px;
    height: 0px;
    width: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

.my-table{
    width: 100%;
}

td {
  height: 10px;
  vertical-align: center;
}

</style>

<body>

<br>

<p>• People can behave differently in different situations. On a scale where the value 0 means :
    “risk averse” and the value 10 means: “fully prepared to take risks”, how would you rate your
    willingness to take risks in the following areas? (tick the appropriate)</p>

    <input type="hidden" name="check_slider_one" value="0" id="id_check_slider_one"/>
    <input type="hidden" name="check_slider_two" value="0" id="id_check_slider_two"/>
    <input type="hidden" name="check_slider_three" value="0" id="id_check_slider_three"/>
    <input type="hidden" name="check_slider_four" value="0" id="id_check_slider_four"/>
    <input type="hidden" name="check_slider_five" value="0" id="id_check_slider_five"/>
    <input type="hidden" name="check_slider_six" value="0" id="id_check_slider_six"/>

    <br>
    <div class="container">
        <table class="my-table">
            <tr>
                <td></td>
                <td><p align="center"><b>Risk averse</b></p></td>
                <td></td>
                <td><p align="center"><b>Fully prepared to take risks</b></p></td>
            </tr>

            <tr>
                <td><p align="right"><b>Driving</b></p></td>
                <td><p align="center"><b>0</b></p></td>
                <td align="center">
                    <input type="range" name="Q12_driving" value="None" step="1" style="width:600px" min="0" max="10" id="id_slider1" class="form-control">
                    <p id="feedback1" align="center"></p>
                </td>
                <td><p align="center"><b>10</b></p></td>
            </tr>

            <tr>
                <td><p align="right"><b>Financial</b></p></td>
                <td><p align="center"><b>0</b></p></td>
                <td align="center">
                    <input type="range" name="Q12_financial" value="None" step="1" style="width:600px" min="0" max="10" id="id_slider2" class="form-control">
                    <p id="feedback2" align="center"></p>
                </td>
                <td><p align="center"><b>10</b></p></td>
            </tr>

            <tr>
                <td><p align="right"><b>Leisure</b></p></td>
                <td><p align="center"><b>0</b></p></td>
                <td align="center">
                    <input type="range" name="Q12_leisure" value="None" step="1" style="width:600px" min="0" max="10" id="id_slider3" class="form-control">
                    <p id="feedback3" align="center"></p>

                </td>
                <td><p align="center"><b>10</b></p></td>
            </tr>

            <tr>
                <td><p align="right"><b>Occupation</b></p></td>
                <td><p align="center"><b>0</b></p></td>
                <td align="center">
                    <input type="range" name="Q12_occupation" value="None" step="1" style="width:600px" min="0" max="10" id="id_slider4" class="form-control">
                    <p id="feedback4" align="center"></p>
                </td>
                <td><p align="center"><b>10</b></p></td>
            </tr>

            <tr>
                <td><p align="right"><b>Health</b></p></td>
                <td><p align="center"><b>0</b></p></td>
                <td align="center">
                    <input type="range" name="Q12_health" value="None" step="1" style="width:600px" min="0" max="10" id="id_slider5" class="form-control">
                    <p id="feedback5" align="center"></p>
                </td>
                <td><p align="center"><b>10</b></p></td>
            </tr>

            <tr>
                <td><p align="right"><b>Faith</b></p></td>
                <td><p align="center"><b>0</b></p></td>
                <td align="center">
                    <input type="range" name="Q12_faith" value="None" step="1" style="width:600px" min="0" max="10" id="id_slider6" class="form-control">
                    <p id="feedback6" align="center"></p>
                </td>
                <td><p align="center"><b>10</b></p></td>
            </tr>
        </table>
    </div>



    <br>

<!-- Next button -->
<div class="container">
  <div class="row">
      <div class="col"></div>
      <div class="col"></div>
      <div class="col text-center">
        <button name="btn_submit" value="True" class="btn" >
            <img class="img-fluid" src= "{{static 'arrow_yellow.png' }}" width="300" height="300"/>
        </button>
      </div>
  </div>
</div>

</body>

<input type="hidden" name="leavescreen_45" id="leavescreen_45">

<script>
    	$(document).ready(function () {
            $('input[name=Q12_driving]').on('input change', function () {
                $('input[name=Q12_driving]').addClass('myclass');
            });
            $('input[name=Q12_financial]').on('input change', function () {
                $('input[name=Q12_financial]').addClass('myclass');
            });
            $('input[name=Q12_leisure]').on('input change', function () {
                $('input[name=Q12_leisure]').addClass('myclass');
            });
            $('input[name=Q12_occupation]').on('input change', function () {
                $('input[name=Q12_occupation]').addClass('myclass');
            });
            $('input[name=Q12_health]').on('input change', function () {
                $('input[name=Q12_health]').addClass('myclass');
            });
            $('input[name=Q12_faith]').on('input change', function () {
                $('input[name=Q12_faith]').addClass('myclass');
            });

            $('input[name=Q12_driving]').on('input', function() {
                document.getElementById("feedback1").innerHTML = `You have selected `+$(this).val();
                document.getElementById("id_check_slider_one").value = 1;
            });
            $('input[name=Q12_financial]').on('input', function() {
                    document.getElementById("feedback2").innerHTML = `You have selected `+$(this).val();
                    document.getElementById("id_check_slider_two").value = 1;
            });
            $('input[name=Q12_leisure]').on('input', function() {
                document.getElementById("feedback3").innerHTML = `You have selected `+$(this).val();
                document.getElementById("id_check_slider_three").value = 1;
    	    });
    	    $('input[name=Q12_occupation]').on('input', function() {
                document.getElementById("feedback4").innerHTML = `You have selected `+$(this).val();
                document.getElementById("id_check_slider_four").value = 1;
    	    });
    	    $('input[name=Q12_health]').on('input', function() {
                document.getElementById("feedback5").innerHTML = `You have selected `+$(this).val();
                document.getElementById("id_check_slider_five").value = 1;
    	    });
    	    $('input[name=Q12_faith]').on('input', function() {
                document.getElementById("feedback6").innerHTML = `You have selected `+$(this).val();
                document.getElementById("id_check_slider_six").value = 1;
    	    });
        });

    var leavescreen_45 = 0;
    var lastVisibleTime = Date.now();

    function handleVisibilityChange() {
      if (document.visibilityState === 'hidden') {
        // User switched to another page or tab
        lastVisibleTime = Date.now();
      } else {
        // User returned to the page
        var secondsAway = Math.floor((Date.now() - lastVisibleTime) / 1000);
        leavescreen_45 += secondsAway;
        document.getElementById("leavescreen_45").value = leavescreen_45;
      }
    }

    document.addEventListener('visibilitychange', handleVisibilityChange, false);

</script>


{{ endblock }}