{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block title %}
    Some questions about Telecom Co. (Page 7/12)
{% endblock %}

{% block content %}
<style>
    .otree-timer {
        display: none;
    }
    .myclass::-webkit-slider-thumb {
        box-shadow: 2px 2px 2px #000000, 0px 0px 1px #007afe;
        border: 1px solid #000000;
        height: 21px;
        width: 10px;
        border-radius: 0px;
        background: #ffffff;
        cursor: pointer;
        -webkit-appearance: none !important;
        margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
    }

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

    .myclass::-ms-thumb {
        box-shadow: 2px 2px 2px #000000, 0px 0px 1px #007afe;
        border: 1px solid #000000;
        height: 21px;
        width: 10px;
        -webkit-appearance: none !important;
        border-radius: 0px;
        background: #ffffff;
        cursor: pointer;
    }
        .myclass::-ms-track {
        width: 100%;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }

    .myclass:focus {
        outline: none;
    }

    .myclass {
        -webkit-appearance: none;
        width: 90%;
        margin: 18px 0;
        height: 12px;
        background: #007afe;
        border-radius: 15px;
        border: 0.0px solid #ffffff;
    }

    .slider::-moz-range-thumb {
        box-shadow: 2px 2px 2px #000000, 0px 0px 1px #007afe;
        border: 1px solid #000000;
        height: 21px;
        width: 10px;
        border-radius: 0px;
        background: #ffffff;
        cursor: pointer;
        visibility: hidden;
    }

    .slider::-webkit-slider-thumb {
        border: 1px solid #000000;
        height: 21px;
        width: 10px;
        border-radius: 0px;
        background: #ffffff;
        cursor: pointer;
        margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
        box-shadow: 2px 2px 2px #000000, 0px 0px 1px #007afe;
        visibility: hidden;
    }

    .slider::-ms-thumb {
        box-shadow: 2px 2px 2px #000000, 0px 0px 1px #007afe;
        border: 1px solid #000000;
        height: 21px;
        width: 10px;
        border-radius: 0px;
        background: #ffffff;
        cursor: pointer;
        visibility: hidden;
    }
    .slider::-ms-track {
        width: 100%;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }

    .slider:focus {
        outline: none;
    }

    .slider {
        -webkit-appearance: none;
        width: 90%;
        margin: 18px 0;
        height: 12px;
        background: #007afe;
        border-radius: 15px;
        border: 0.0px solid #ffffff;
    }
    </style>

<div align="center">
<hr>
    <p>
        How does the financial information you consulted on the previous screen influence your willingness to invest in Telecom Co.?<br>
        Answer scale varies from -100% (strongly decreases my willingness to invest) to 100% (strongly increases my willingness to invest).
    </p>

    <b id="demo1"> </b>
    <br>
    <input type="range" id="i_judge_1" name="i_judge_1" class="slider" step="1" min="-100" max="100" style="width:500px;">

    <input type="hidden" name="check_i_judge_1" value="" id="check_i_judge_1"/>
<hr>
    <p>
        How does the financial information you consulted on the previous screen influence your valuation of Telecom Co.?<br>
        Answer scale varies from -100% (strongly decreases my valuation) to 100% (strongly increases my valuation).
    </p>

    <b id="demo2"> </b>
    <br>
    <input type="range" id="i_judge_2" name="i_judge_2" class="slider" step="1" min="-100" max="100" style="width:500px;">

    <input type="hidden" name="check_i_judge_2" value="" id="check_i_judge_2"/>
<hr>
    <p>
        How does the financial information you consulted on the previous screen influence your pricing of Telecom Co.’s stock?<br>
        Answer scale varies from -100% (strongly decreases my pricing) to 100% (strongly increases my pricing).
    </p>

    <b id="demo3"> </b>
    <br>
    <input type="range" id="i_judge_3" name="i_judge_3" class="slider" step="1" min="-100" max="100" style="width:500px;">

    <input type="hidden" name="check_i_judge_3" value="" id="check_i_judge_3"/>
<hr>

</div>
{% next_button %}

{% endblock %}

 {% block scripts %}

    <script>
    	$('input[name=i_judge_1]').on('input change', function () {
    	    $('input[name=i_judge_1]').removeClass('slider');
            $('input[name=i_judge_1]').addClass('myclass');
        });
        $('input[name=i_judge_1]').on('input', function() {
            document.getElementById("demo1").innerHTML = $(this).val()+'<b>%</b>';
            $('#check_i_judge_1').val(1);
        });
    </script>

    <script>
    	$('input[name=i_judge_2]').on('input change', function () {
    	    $('input[name=i_judge_2]').removeClass('slider');
            $('input[name=i_judge_2]').addClass('myclass');
        });
        $('input[name=i_judge_2]').on('input', function() {
            document.getElementById("demo2").innerHTML = $(this).val()+'<b>%</b>';
            $('#check_i_judge_2').val(1);
        });
    </script>

    <script>
    	$('input[name=i_judge_3]').on('input change', function () {
    	    $('input[name=i_judge_3]').removeClass('slider');
            $('input[name=i_judge_3]').addClass('myclass');
        });
        $('input[name=i_judge_3]').on('input', function() {
            document.getElementById("demo3").innerHTML = $(this).val()+'<b>%</b>';
            $('#check_i_judge_3').val(1);
        });
    </script>

{% endblock %}