{{ block title }}
    Emotions
{{ endblock }}


{{ block content }}
	<center>

    How did the photos make you feel? Use the sliders below each emotion to tell us. 
    
    <br>  <br>
	 <p>    
	 {{ if player.upsetOrder == 1 }}		1. Upset    {{ endif }}
	 {{ if player.angryOrder == 1 }}		1. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 1 }}	1. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 1 }}	1. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 1 }}1. Disgusted{{ endif }}
	 {{ if player.happyOrder == 1 }}		1. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 1 }}	1. Peaceful {{ endif }}
	 {{ if player.contentOrder == 1 }}	1. Content  {{ endif }}
	 {{ if player.delightedOrder == 1 }}1. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 1 }}1. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion1" min="0" max="10" step="0.1" class="range" id="id_emotion1"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion1" value="" id="id_checksliderEmotion1"/>
    <script>
      var selector1 = $('input[name=emotion1]');
      selector1.change(function() {
        $('#id_checksliderEmotion1').val(selector1.val());
		  liveSend({'slider': 1, 'v': selector1.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion1").value = js_vars.emotion1;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 2 }}		2. Upset    {{ endif }}
	 {{ if player.angryOrder == 2 }}		2. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 2 }}	2. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 2 }}	2. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 2 }}2. Disgusted{{ endif }}
	 {{ if player.happyOrder == 2 }}		2. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 2 }}	2. Peaceful {{ endif }}
	 {{ if player.contentOrder == 2 }}	2. Content  {{ endif }}
	 {{ if player.delightedOrder == 2 }}2. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 2 }}2. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion2" min="0" max="10" step="0.1" class="range" id="id_emotion2"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion2" value="" id="id_checksliderEmotion2"/>
    <script>
      var selector2 = $('input[name=emotion2]');
      selector2.change(function() {
        $('#id_checksliderEmotion2').val(selector2.val());
		  liveSend({'slider': 2, 'v': selector2.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion2").value = js_vars.emotion2;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 3 }}		3. Upset    {{ endif }}
	 {{ if player.angryOrder == 3 }}		3. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 3 }}	3. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 3 }}	3. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 3 }}3. Disgusted{{ endif }}
	 {{ if player.happyOrder == 3 }}		3. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 3 }}	3. Peaceful {{ endif }}
	 {{ if player.contentOrder == 3 }}	3. Content  {{ endif }}
	 {{ if player.delightedOrder == 3 }}3. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 3 }}3. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion3" min="0" max="10" step="0.1" class="range" id="id_emotion3"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion3" value="" id="id_checksliderEmotion3"/>
    <script>
      var selector3 = $('input[name=emotion3]');
      selector3.change(function() {
        $('#id_checksliderEmotion3').val(selector3.val());
		  liveSend({'slider': 3, 'v': selector3.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion3").value = js_vars.emotion3;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 4 }}		4. Upset    {{ endif }}
	 {{ if player.angryOrder == 4 }}		4. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 4 }}	4. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 4 }}	4. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 4 }}4. Disgusted{{ endif }}
	 {{ if player.happyOrder == 4 }}		4. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 4 }}	4. Peaceful {{ endif }}
	 {{ if player.contentOrder == 4 }}	4. Content  {{ endif }}
	 {{ if player.delightedOrder == 4 }}4. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 4 }}4. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion4" min="0" max="10" step="0.1" class="range" id="id_emotion4"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion4" value="" id="id_checksliderEmotion4"/>
    <script>
      var selector4 = $('input[name=emotion4]');
      selector4.change(function() {
        $('#id_checksliderEmotion4').val(selector4.val());
		  liveSend({'slider': 4, 'v': selector4.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion4").value = js_vars.emotion4;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 5 }}		5. Upset    {{ endif }}
	 {{ if player.angryOrder == 5 }}		5. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 5 }}	5. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 5 }}	5. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 5 }}5. Disgusted{{ endif }}
	 {{ if player.happyOrder == 5 }}		5. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 5 }}	5. Peaceful {{ endif }}
	 {{ if player.contentOrder == 5 }}	5. Content  {{ endif }}
	 {{ if player.delightedOrder == 5 }}5. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 5 }}5. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion5" min="0" max="10" step="0.1" class="range" id="id_emotion5"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion5" value="" id="id_checksliderEmotion5"/>
    <script>
      var selector5 = $('input[name=emotion5]');
      selector5.change(function() {
        $('#id_checksliderEmotion5').val(selector5.val());
		  liveSend({'slider': 5, 'v': selector5.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion5").value = js_vars.emotion5;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 6 }}		6. Upset    {{ endif }}
	 {{ if player.angryOrder == 6 }}		6. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 6 }}	6. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 6 }}	6. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 6 }}6. Disgusted{{ endif }}
	 {{ if player.happyOrder == 6 }}		6. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 6 }}	6. Peaceful {{ endif }}
	 {{ if player.contentOrder == 6 }}	6. Content  {{ endif }}
	 {{ if player.delightedOrder == 6 }}6. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 6 }}6. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion6" min="0" max="10" step="0.1" class="range" id="id_emotion6"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion6" value="" id="id_checksliderEmotion6"/>
    <script>
      var selector6 = $('input[name=emotion6]');
      selector6.change(function() {
        $('#id_checksliderEmotion6').val(selector6.val());
		  liveSend({'slider': 6, 'v': selector6.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion6").value = js_vars.emotion6;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 7 }}		7. Upset    {{ endif }}
	 {{ if player.angryOrder == 7 }}		7. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 7 }}	7. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 7 }}	7. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 7 }}7. Disgusted{{ endif }}
	 {{ if player.happyOrder == 7 }}		7. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 7 }}	7. Peaceful {{ endif }}
	 {{ if player.contentOrder == 7 }}	7. Content  {{ endif }}
	 {{ if player.delightedOrder == 7 }}7. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 7 }}7. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion7" min="0" max="10" step="0.1" class="range" id="id_emotion7"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion7" value="" id="id_checksliderEmotion7"/>
    <script>
      var selector7 = $('input[name=emotion7]');
      selector7.change(function() {
        $('#id_checksliderEmotion7').val(selector7.val());
		  liveSend({'slider': 7, 'v': selector7.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion7").value = js_vars.emotion7;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 8 }}		8. Upset    {{ endif }}
	 {{ if player.angryOrder == 8 }}		8. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 8 }}	8. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 8 }}	8. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 8 }}8. Disgusted{{ endif }}
	 {{ if player.happyOrder == 8 }}		8. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 8 }}	8. Peaceful {{ endif }}
	 {{ if player.contentOrder == 8 }}	8. Content  {{ endif }}
	 {{ if player.delightedOrder == 8 }}8. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 8 }}8. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion8" min="0" max="10" step="0.1" class="range" id="id_emotion8"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion8" value="" id="id_checksliderEmotion8"/>
    <script>
      var selector8 = $('input[name=emotion8]');
      selector8.change(function() {
        $('#id_checksliderEmotion8').val(selector8.val());
		  liveSend({'slider': 8, 'v': selector8.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion8").value = js_vars.emotion8;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 9 }}		9. Upset    {{ endif }}
	 {{ if player.angryOrder == 9 }}		9. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 9 }}	9. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 9 }}	9. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 9 }}9. Disgusted{{ endif }}
	 {{ if player.happyOrder == 9 }}		9. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 9 }}	9. Peaceful {{ endif }}
	 {{ if player.contentOrder == 9 }}	9. Content  {{ endif }}
	 {{ if player.delightedOrder == 9 }}9. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 9 }}9. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion9" min="0" max="10" step="0.1" class="range" id="id_emotion9"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion9" value="" id="id_checksliderEmotion9"/>
    <script>
      var selector9 = $('input[name=emotion9]');
      selector9.change(function() {
        $('#id_checksliderEmotion9').val(selector9.val());
		  liveSend({'slider': 9, 'v': selector9.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion9").value = js_vars.emotion9;
	</script>
    <br><br>


	 <p>    
	 {{ if player.upsetOrder == 10 }}		10. Upset    {{ endif }}
	 {{ if player.angryOrder == 10 }}		10. Angry    {{ endif }}
	 {{ if player.anxiousOrder == 10 }}	10. Anxious  {{ endif }}
	 {{ if player.afraidOrder == 10 }}	10. Afraid   {{ endif }}
	 {{ if player.disgustedOrder == 10 }}10. Disgusted{{ endif }}
	 {{ if player.happyOrder == 10 }}		10. Happy    {{ endif }}
	 {{ if player.peacefulOrder == 10 }}	10. Peaceful {{ endif }}
	 {{ if player.contentOrder == 10 }}	10. Content  {{ endif }}
	 {{ if player.delightedOrder == 10 }}10. Delighted{{ endif }}
	 {{ if player.enthusiasticOrder == 10 }}10. Enthusiastic  {{ endif }}
    </p>
    <div class="input-group">
    not at all <input type="range" name="emotion10" min="0" max="10" step="0.1" class="range" id="id_emotion10"> very much
	 </div>	 
	 <input type="hidden" name="checksliderEmotion10" value="" id="id_checksliderEmotion10"/>
    <script>
      var selector10 = $('input[name=emotion10]');
      selector10.change(function() {
        $('#id_checksliderEmotion10').val(selector10.val());
		  liveSend({'slider': 10, 'v': selector10.val()});
      });
    </script>
    <script>
    document.getElementById("id_emotion10").value = js_vars.emotion10;
	</script>
    <br><br>
    
    {{ formfield 'feelingRightNow' label="Type one sentence into the box below about how you feel right now." }}
   
	</center>	 
    {{ next_button }}


{{ endblock }}