{% block styles %}


<script type="text/javascript">document.theFormID.theFieldID.focus();</script>

{% endblock %}

{{ block title }}Practice 4{{ endblock }}
{{ block content }}

<style>

       .myclass::-webkit-slider-thumb {
        border: 1px solid #000000;
        height: 25px !important;
        width: 25px !important;
        border-radius: 50% !important;
        background: #007afe; !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: 0px !important;
    }
    
        .myclass::-moz-range-thumb {
        width: 25px !important;
        height: 25px !important;
        border-radius: 50% !important;
        background: #007afe !important;
        cursor: pointer !important;
    }


    .slider::-webkit-slider-thumb {
        border: 0px;
        height: 0px;
        width: 0px;
        border-radius: 0px;
        -webkit-appearance: none;
    }
    
    .slidecontainer {
      width: 100%;
    }

    .slider {
      -webkit-appearance: none;
      width: 80%;
      height: 15px;
      border-radius: 5px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }


    .slider:hover {
      opacity: 1;
    }


    .slider::-moz-range-thumb {
      border: 0px;
      height: 0px;
      width: 0px;
      border-radius: 0px;
      -webkit-appearance: none;
    }
</style>

<img src="{{ static image_path }}" width="300" height="300" />

<br><br>

{% if treatment == 2 %}

<p>The algorithmic score that this image is {{ Category1 }} is <b >{{ machine_prob }}</b> out of 100.</p>


{% else %}



{% endif %}

<p>
What do you think is the probability (from 0% to 100%) that this image is {{ category1 }} or {{ category2 }}?
</p>


Please move the slider to see how it works. 
When you are ready, place the slider at the probability you want and click the <b>Submit</b> button below 
to enter your choice.
<br><br>

More {{ Ctegory2 }} <input type="range" name="prac4" value="None" step="1" min="0" max="100" id="id_slider_one" class="slider"> More {{ Ctegory1 }} 

<input type="hidden" name="check_slider_four" value="" id="check_slider_four"/>

{{ formfield_errors 'check_slider_four' }}
{{ formfield_errors 'prac4' }}
<br>

<!--
<table width="100%" cellpadding="0" cellspacing="0" >
    <tr>
        <td align="left"><p id="feedback_two"><br></p></td>
        <td align="right"><p id="feedback_one"><br></p></td>
        
    </tr>
</table>
-->
<br>
<p align="center" id="feedback_one"><br>
<p align="center" id="feedback_two"><br>






<script>
	$(document).ready(function () {
        $('input[name=prac4]').on('input change', function () {
            $('input[name=prac4]').addClass('myclass');
        });
    	$('input[name=prac4]').on('input', function() {
        	var num1 = +$(this).val();
        	var num2 = 100-num1;
        	document.getElementById("feedback_one").innerHTML = `Probability {{ Ctegory1 }} : `+$(this).val()+'%';
            document.getElementById("feedback_two").innerHTML = `Probability {{ Ctegory2 }} : `+ num2 +'%';
        	$('input[name=check_slider_four]').val(1);
    	});
    });    
</script>
<!--{{ next_button }}-->

<p>
    <i></i>
</p>


<button disabled="disabled" id="problem" class="button2 btn btn-primary btn-large">Submit</button>

   <script>
   window.onload = function() {
       window.setTimeout(setDisabled2, 1);
   }

   function setDisabled2() {
       document.getElementById('problem').disabled = false;
   }

   </script>
   
   
{{ endblock }}