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


{{ block content }}
	<center>

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

    {{ formfield 'gender' label="2. Do you identify as a ..." }}

    {{ formfield 'education' label="3. What is the highest level of education you have completed?" }}

    4. What is your race? Check all that apply.
	<br>
	<label>
    	<input type="checkbox" name="white" value="1">
    	White/Caucasian
	</label><br>
	<label>
    	<input type="checkbox" name="black" value="1">
    	Black/African American
	</label><br>
	<label>
    	<input type="checkbox" name="hispanic" value="1">
    	Hispanic/Latino
	</label><br>
	<label>
    	<input type="checkbox" name="asian" value="1">
    	Asian/Pacific Islander
	</label><br>
	<label>
    	<input type="checkbox" name="native" value="1">
    	Native American
	</label><br>
	<label>
    	<input type="checkbox" name="otherRace" value="1">
    	Other
	</label><br>
	
    {{ formfield 'income' label="5. What is your total yearly household income?" }}

    
    <br>
	 <p>6. Generally speaking, do you consider yourself more liberal or more conversative? Use the slider below to place yourself</p>
    <div class="input-group">
    Liberal &nbsp <input type="range" name="ideology" min="0" max="10" step="0.1" class="range" id="id_ideology"> &nbsp Conservative
	 </div>	 
	 <input type="hidden" name="checksliderIdeology" value="" id="id_checksliderIdeology"/>
    <script>
      var selector2 = $('input[name=ideology]');
      selector2.change(function() {
        $('#id_checksliderIdeology').val(selector2.val());
		  liveSend({'slider': 6, 'v': selector2.val()});
      });
    </script>
    <script>
    document.getElementById("id_ideology").value = js_vars.ideology;
	</script>
    <br><br>
    
    <br>
	 <p>7. Would you say you are closer to Democrats or Republicans? Use the slider below to place yourself</p>
    <div class="input-group">
    Democrat &nbsp <input type="range" name="partisanship" min="0" max="10" step="0.1" class="range" id="id_partisanship"> &nbsp Republican
	 </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': 7, 'v': selector1.val()});
      });
    </script>
    <script>
    document.getElementById("id_partisanship").value = js_vars.partisanship;
	</script>
    <br><br>
   
	</center>	 
    {{ next_button }}


{{ endblock }}