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

{% block title %}
    Questionnaire
{% endblock %}

{% block content %}



<div class="card">
  <div class="card-header">
    <b>Imagine the following situation: <br>
        Today you unexpectedly received 1,000 £. How much of this amount would you donate to a good cause?</b>
  </div>
  <div class="card-body">


<center>


<input type="hidden" name="check_slider_one" value="" id="id_check_slider_one"/>

<p id="feedback_one"><br></p>

<input type="hidden" name="donation_survey" id="id_donation" />
<input type="hidden" name="keep_survey" id="id_keep" />

<input type="range" name="slider_one" value="None" step="1" style="width:500px" min="0" max="1000" id="id_slider_one" class="form-control">

 <p style="color:#808080">Click on the bar above to reveal the slider. Drag it to the amount you would donate.</p>



  </div>
</div>

    <br>
<script>


	$(document).ready(function () {
    	$('input[name=slider_one]').on('input change', function() {
    	   $('input[name=slider_one]').addClass('myclass');
        });
        $('input[name=slider_one]').on('input', function() {
        	document.getElementById("feedback_one").innerHTML = `<strong>I would donate</strong> ` +$(this).val()+' <strong> £ and keep </strong>' + Math.round((1000-$(this).val()))+ ` <strong>£ for myself. </strong>` ;
    	    $('#id_check_slider_one').val(1);
    	    document.getElementById("id_donation").value = $(this).val();
    	    document.getElementById("id_keep").value = Math.round((1000-$(this).val()));
    	});
    });


</script>

<div class="card">
  <div class="card-header">
    <b>How willing are you to give to good causes without expecting anything in return?</b>
  </div>
  <div class="card-body">

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


<input type="hidden" name="willing_give_survey" id="id_willing_give" />
</center>
<br>

<div style="display:flex; align-items: center; justify-content: center;">

    <span  style="display:inline; background-color: lightgray;padding: 2px;border-radius: 5px 5px 5px;border: 0.5px solid gray;padding-right:5px;padding-left:5px;">Completely unwilling to do so </span>
 <input type="range" name="slider_two" value="None" style="width:500px" min="0" max="10" step="1" id="id_slider_two" class="form-control" list="steplist">
    <datalist id="steplist">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
    <option>7</option>
	<option>8</option>
	<option>9</option>
	<option>10</option>
	<option>11</option>
</datalist>
         <span style="display:inline; background-color: lightgray;padding: 2px;border-radius: 5px 5px 5px;border: 0.5px solid gray;padding-right:5px;padding-left:5px;">Very willing to do so </span>

    </div>

</div>
<center>
       <p style="color:#808080">Click on the bar above to answer the question.</p>
    </center>
</div>

<p><b>In general, how willing are you to take risks?</b></p>
<p>
    Completely unwilling to take risks &nbsp;
    {{ for choice in form.risk }}
        {{ choice }}
    {{ endfor }}
    &nbsp; Very willing to take risks
</p>

    <style>
input[type="range"]::-moz-range-track {
  padding: 0 9px;
  background: repeating-linear-gradient(to right,
    #000,
    #ccc 1%,
    #ccc 9.9%,
    #000 9.9%);
}



input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: lightgrey;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: grey;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

 </style>





</div>






<script>


	$(document).ready(function () {
    	$('input[name=slider_two]').on('input', function() {
    	    $('#id_check_slider_two').val(1);
    	    document.getElementById("id_willing_give").value = $(this).val();
    	});
    });



</script>
<br>













    <style>

input[type="range"]::-ms-fill-lower {
  background-color: #D3D3D3;
}

input[type="range"]::-ms-fill-upper {
  background-color: #D3D3D3;
}

input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: white;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: grey;
    margin-top: -4px;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}
    </style>



</center>
  </div>
</div>


<style>

</style>

{% if form.errors %}
<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading"> Before you can proceed to the next page, you have to make a decision! </h4>
  <p>Click on the slider above to make a decision.</p>
</div>
{% endif %}

<br>
    <center> {% next_button %} </center>
{% endblock %}