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


{{ block content }}
	<center>

    Please enter the following information.
    
    {{ formfield 'age' label="1. How old are you?" }}

    {{ formfield 'gender' label="2. Your gender:" }}

    {{ formfield 'education' label="3. Highest level of education (completed):" }}
    
    4. What is your race? Check all that apply.
	<br>
	 {{ if player.whiteOrder == 1 }}		<label>
    	<input type="checkbox" name="white" value="1">
    	White/Caucasian
	</label><br>    {{ endif }}
	 {{ if player.blackOrder == 1 }}		<label>
    	<input type="checkbox" name="black" value="1">
    	Black/African American
	</label><br>   {{ endif }}
	 {{ if player.hispanicOrder == 1 }}		<label>
    	<input type="checkbox" name="hispanic" value="1">
    	Hispanic/Latino
	</label><br> {{ endif }}
	 {{ if player.asianOrder == 1 }}	<label>
    	<input type="checkbox" name="asian" value="1">
    	Asian/Pacific Islander
	</label><br>  {{ endif }}
	 {{ if player.nativeOrder == 1 }}<label>
    	<input type="checkbox" name="native" value="1">
    	Native American
	</label><br>{{ endif }}
	
	
	 {{ if player.whiteOrder == 2 }}		<label>
    	<input type="checkbox" name="white" value="1">
    	White/Caucasian
	</label><br>    {{ endif }}
	 {{ if player.blackOrder == 2 }}		<label>
    	<input type="checkbox" name="black" value="1">
    	Black/African American
	</label><br>   {{ endif }}
	 {{ if player.hispanicOrder == 2 }}		<label>
    	<input type="checkbox" name="hispanic" value="1">
    	Hispanic/Latino
	</label><br> {{ endif }}
	 {{ if player.asianOrder == 2 }}	<label>
    	<input type="checkbox" name="asian" value="1">
    	Asian/Pacific Islander
	</label><br>  {{ endif }}
	 {{ if player.nativeOrder == 2 }}<label>
    	<input type="checkbox" name="native" value="1">
    	Native American
	</label><br>{{ endif }}
	
	
	 {{ if player.whiteOrder == 3 }}		<label>
    	<input type="checkbox" name="white" value="1">
    	White/Caucasian
	</label><br>    {{ endif }}
	 {{ if player.blackOrder == 3 }}		<label>
    	<input type="checkbox" name="black" value="1">
    	Black/African American
	</label><br>   {{ endif }}
	 {{ if player.hispanicOrder == 3 }}		<label>
    	<input type="checkbox" name="hispanic" value="1">
    	Hispanic/Latino
	</label><br> {{ endif }}
	 {{ if player.asianOrder == 3 }}	<label>
    	<input type="checkbox" name="asian" value="1">
    	Asian/Pacific Islander
	</label><br>  {{ endif }}
	 {{ if player.nativeOrder == 3 }}<label>
    	<input type="checkbox" name="native" value="1">
    	Native American
	</label><br>{{ endif }}
	
	
	 {{ if player.whiteOrder == 4 }}		<label>
    	<input type="checkbox" name="white" value="1">
    	White/Caucasian
	</label><br>    {{ endif }}
	 {{ if player.blackOrder == 4 }}		<label>
    	<input type="checkbox" name="black" value="1">
    	Black/African American
	</label><br>   {{ endif }}
	 {{ if player.hispanicOrder == 4 }}		<label>
    	<input type="checkbox" name="hispanic" value="1">
    	Hispanic/Latino
	</label><br> {{ endif }}
	 {{ if player.asianOrder == 4 }}	<label>
    	<input type="checkbox" name="asian" value="1">
    	Asian/Pacific Islander
	</label><br>  {{ endif }}
	 {{ if player.nativeOrder == 4 }}<label>
    	<input type="checkbox" name="native" value="1">
    	Native American
	</label><br>{{ endif }}


	 {{ if player.whiteOrder == 5}}		<label>
    	<input type="checkbox" name="white" value="1">
    	White/Caucasian
	</label><br>    {{ endif }}
	 {{ if player.blackOrder == 5 }}		<label>
    	<input type="checkbox" name="black" value="1">
    	Black/African American
	</label><br>   {{ endif }}
	 {{ if player.hispanicOrder == 5 }}		<label>
    	<input type="checkbox" name="hispanic" value="1">
    	Hispanic/Latino
	</label><br> {{ endif }}
	 {{ if player.asianOrder == 5 }}	<label>
    	<input type="checkbox" name="asian" value="1">
    	Asian/Pacific Islander
	</label><br>  {{ endif }}
	 {{ if player.nativeOrder == 5 }}<label>
    	<input type="checkbox" name="native" value="1">
    	Native American
	</label><br>{{ endif }}
	
	
	<label>
    	<input type="checkbox" name="otherRace" value="1">
    	Other
	</label><br>

    {{ formfield 'income' label="5. What is your total yearly household income?" }}

    {{ formfield 'didVoteLastElection' label="6. Did you vote during the last presidential election?" }}
    
    <br>
	 <p>7. In politics people commonly talk of ’left/liberals’ and ’right/conservatives’. Where would you place yourself on that scale?</p>
    <div class="input-group">
    Left &nbsp <input type="range" name="partisanship" min="0" max="10" step="0.1" class="range" id="id_partisanship"> &nbsp Right
	 </div>	 
	 <input type="hidden" name="checksliderPartisanship" value="" id="id_checksliderPartisanship"/>
    <script>
      var selector1 = $('input[name=partisanship]');
      selector1.change(function() {
        $('#id_checksliderPartisanship').val(selector1.val());
		  liveSend({'slider': 1, 'v': selector1.val()});
      });
    </script>
    <script>
    document.getElementById("id_partisanship").value = js_vars.partisanship;
	</script>
    <br><br>
    
	 <p>8. How polarized do you think the US is?</p>
    <div class="input-group">
    Not polarized <input type="range" name="perceivedPolarization" min="0" max="10" step="0.1" class="range" id="id_perceivedPolarization"> Very polarized
	 </div>
	 <input type="hidden" name="checksliderPerceivedPolarization" value="" id="id_checksliderPerceivedPolarization"/>
    <script>
      var selector2 = $('input[name=perceivedPolarization]');
      selector2.change(function() {
        $('#id_checksliderPerceivedPolarization').val(selector2.val());
		  liveSend({'slider': 2, 'v': selector2.val()});
      });
    </script>
    <script>
    document.getElementById("id_perceivedPolarization").value = js_vars.perceivedPolarization;
	</script>
    <br><br>
    
    <p>9. How polarized do you think people in the US are regarding {{ if player.myTreatment == 0 }} environmental questions {{ endif }} {{ if player.myTreatment == 1 }} racial questions {{ endif }}?</p>
    <div class="input-group">
    Not polarized <input type="range" name="perceivedPolarizationCC" min="0" max="10" step="0.1" class="range" id="id_perceivedPolarizationCC"> Very polarized
	 </div>
	 <input type="hidden" name="checksliderPerceivedPolarizationCC" value="" id="id_checksliderPerceivedPolarizationCC"/>
    <script>
      var selector3 = $('input[name=perceivedPolarizationCC]');
      selector3.change(function() {
        $('#id_checksliderPerceivedPolarizationCC').val(selector3.val());
		  liveSend({'slider': 3, 'v': selector3.val()});
      });
    </script>
    <script>
    document.getElementById("id_perceivedPolarizationCC").value = js_vars.perceivedPolarizationCC;
	</script>
    <br><br>
     
    {{ formfield 'directPartyPreference' label="10. If you would have to choose between the Republican and the Democratic party, which would you vote for?" }}
   
   
	</center>	 
    {{ next_button }}


{{ endblock }}