{% 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>
        Completely unwilling to do so &nbsp;
    {{ for choice in form.willing_give_survey }}
        {{ choice }}
    {{ endfor }}
    &nbsp; Very willing to do so
      </center>

    </div>
</div>

    <br>

<div class="card">
  <div class="card-header">
    <b>In general, how willing are you to take risks?</b>
  </div>
  <div class="card-body">
      <center>
        Completely unwilling to take risks &nbsp;
    {{ for choice in form.risk }}
        {{ choice }}
    {{ endfor }}
    &nbsp; Very willing to take risks
          </center>


    </div>
</div>

    <br>

     <div class="card">
  <div class="card-header">
    <b>Please indicate how much the respective statement applies to you:
        <br> I like to compete with others.</b>
  </div>
  <div class="card-body">
      <center>
        Doesn't apply at all &nbsp;
    {{ for choice in form.compete }}
        {{ choice }}
    {{ endfor }}
    &nbsp; Fully applies
      </center>

    </div>
</div>

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


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