{% block styles %}



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

{% endblock %}

{{ block title }}Practice 2{{ 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>

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



<p>What do you think is the probability (from 0% to 100%) that this image is a truck or a car?</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 CAR <input type="range" name="prac2" value="None" step="1" min="0" max="100" id="id_slider_two" class="slider"> More TRUCK 







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

{{ formfield_errors 'check_slider_two' }}
{{ formfield_errors 'prac2' }}
<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=prac2]').on('input change', function () {
            $('input[name=prac2]').addClass('myclass');
        });
    	$('input[name=prac2]').on('input', function() {
        	var num1 = +$(this).val();
        	var num2 = 100-num1;
        	document.getElementById("feedback_one").innerHTML = `Probability TRUCK : `+$(this).val()+'%';
            document.getElementById("feedback_two").innerHTML = `Probability CAR : `+ num2 +'%';
        	$('input[name=check_slider_two]').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 }}