{{ block title }}
   Part 2: Group Decision
{{ endblock }}
{{ block content }}



<script>
function sendField(input) {
  liveSend({'field': input.name, 'value': parseFloat(input.value)});
}
</script>



<p>
    You are still a member of your previous assigned group.
    Each group member is endowed with {{ C.ENDOWMENT }} and decides how much to contribute to a group project.

<ul>
    <li>You can invest any amount of the {{ C.ENDOWMENT }} into a group project. </li>
    <li>Any amount of the {{ C.ENDOWMENT }} you are not investing in the group project is automatically transferred to your private account.</li>
</ul>

Any amount contributed to the project will be multiplied by 1.6 and distributed equally among all {{ C.PLAYERS_PER_GROUP }} members of the group. Therefore, each group member receives $0.4 for each dollar contributed to the project by any member.


<br>
<br>

<div class="card">
  <div class="card-header">
    <b>How much of your {{ C.ENDOWMENT }} do you contribute?</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="contribution" id="id_contribution">

<input type="range" name="slider_one" value="None" step="0.01" style="width:500px" min="0" max="3" 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 want to contribute.</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 contribute $</strong>` +$(this).val()+' <strong>  and keep $</strong>'+ (Math.round(100*(3-$(this).val())))/100+ ` <strong>for myself. </strong>` ;
    	    document.getElementById("id_contribution").value = $(this).val();
    	});
    });


</script>


<div style="text-align:center;">

<style>
    .otree-timer {
         position: fixed;
        bottom: 0;
        right: 0;
        width: 10%;
        border: 3px solid #FF0000;
    }
</style>

    <br>
{{ next_button }}
</div>

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



{{ endblock }}