{{ block title }}Image {{ a }} out of {{C.NUM_ROUNDS}} {{ 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>
What do you think is the probability (from 0% to 100%) that this image is a truck or a car?</p>



Click anywhere on the bar to move around your choice.
<br><br>

More CAR <input type="range" name="prob" value="None" step="1" min="0" max="100" id="id_slider_one" class="slider"> More TRUCK 

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

{{ formfield_errors 'check_slider_main' }}
{{ formfield_errors 'prob' }}
<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=prob]').on('input change', function () {
            $('input[name=prob]').addClass('myclass');
        });
    	$('input[name=prob]').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_main]').val(1);
    	});
    });    
</script>





<!--
{{ next_button }}
-->

<!--
<button type="submit" class="btn btn-primary btn-large" onclick="errorMessage()" onSubmit="return submit();">Submit</button>


<script>
    function errorMessage() {
        var error = document.getElementById("error")
        if (document.getElementById("prob").value > 100)
        {
             
            // Changing content and color of content
            error.textContent = "Number must be between 0 and 100."
            error.style.color = "red"
        } else {
            error.textContent = ""
        }
    }
    
    function submit(){
        
        if(document.getElementById("prob").value < 100){
            return true;
        }
        else{
            alert("Please check value of VAR")
            return false;
        }
    }
</script>
-->


<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 }}