243 lines
11 KiB
HTML
243 lines
11 KiB
HTML
|
<div class="row">
|
||
|
|
<div class="left aligned fourteen wide column">
|
||
|
|
<h2>Demographic Survey</h2>
|
||
|
|
<h4> Before you submit the task, please take a moment to fill out this survey.</h4>
|
||
|
|
<div class="ui form" id="survey-form" method="post">
|
||
|
|
|
||
|
|
<div class="inline fields">
|
||
|
|
<label>Gender</label>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="gender" id="genderMale" value="male">
|
||
|
|
<label>Male</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="gender" id="genderFemale" value="female">
|
||
|
|
<label>Female</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="gender" id="genderOther" value="unspecified">
|
||
|
|
<label>Prefer not to say</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="inline fields">
|
||
|
|
<label>Age</label>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="ageGroup" id="ageGroup1" value="ageGroup18">
|
||
|
|
<label>18 to 24</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="ageGroup" id="ageGroup2" value="ageGroup25">
|
||
|
|
<label>25 to 34</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="ageGroup" id="ageGroup3" value="ageGroup35">
|
||
|
|
<label>35 to 44</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="ageGroup" id="ageGroup4" value="ageGroup45">
|
||
|
|
<label>45 to 54</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="ageGroup" id="ageGroup5" value="ageGroup55">
|
||
|
|
<label>55 to 64</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="ageGroup" id="ageGroup6" value="ageGroup65">
|
||
|
|
<label>65 and over</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="ageGroup" id="ageGroup7" value="unspecified">
|
||
|
|
<label>Prefer not to say</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grouped fields">
|
||
|
|
<label>Ethnicity</label>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicAsian" value="Asian">
|
||
|
|
<label>Asian</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicLatino" value="Latino_Hispanic">
|
||
|
|
<label>Latino / Hispanic</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicPacific" value="Pacific_Islander">
|
||
|
|
<label>Pacific Islander</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicAfrican" value="Black_African">
|
||
|
|
<label>Black / African Descent</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicMiddle" value="Middle_Eastern">
|
||
|
|
<label>Middle Eastern</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicWhite" value="White_Caucasian">
|
||
|
|
<label>White / Caucasian</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicEastInd" value="East_Indian">
|
||
|
|
<label>East Indian</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicNative" value="Native_American">
|
||
|
|
<label>Native American</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui checkbox ethnicityOption">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicOther" value="Other">
|
||
|
|
<label>Other</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui toggle checkbox">
|
||
|
|
<input name="ethnicity" type="checkbox" id="ethnicUnspecified" value="unspecified">
|
||
|
|
<label>Prefer not to say</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grouped fields">
|
||
|
|
<label>Educational Background</label>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education1" value="lessThanHighSchool">
|
||
|
|
<label>Less than high school</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education2" value="highSchool">
|
||
|
|
<label>High school/GED</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education3" value="someCollege">
|
||
|
|
<label>Some college</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education4" value="twoYearDegree">
|
||
|
|
<label>2-year college degree</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education5" value="fourYearDegree">
|
||
|
|
<label>4-year college degree</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education6" value="mastersDegree">
|
||
|
|
<label>Master's degree</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education7" value="doctoralDegree">
|
||
|
|
<label>Doctoral degree</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education8" value="professionalDegree">
|
||
|
|
<label>Professional degree</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="education" id="education9" value="unspecified">
|
||
|
|
<label>Prefer not to say</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="grouped fields">
|
||
|
|
<label>How would you characterize your experience with data plots and visualizations?</label>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="vizExperience" id="vizExperience1" value="professional">
|
||
|
|
<label>I am a professional visualization or infographic designer.</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="vizExperience" id="vizExperience2" value="frequentInteraction">
|
||
|
|
<label>I frequently interact with or view graphs or visualizations in my job.</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="vizExperience" id="vizExperience3" value="someExposure">
|
||
|
|
<label>I do not interact with graphs or visualizations at work, but I do see them on TV News or in magazines.</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="vizExperience" id="vizExperience4" value="littleExposure">
|
||
|
|
<label>I rarely see or view graphs or visualizations.</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<div class="ui radio checkbox">
|
||
|
|
<input type="radio" name="vizExperience" id="vizExperience5" value="unspecified">
|
||
|
|
<label>Prefer not to say</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label>Feedback</label>
|
||
|
|
<textarea name="feedback" rows="2" placeholder="If you have any feedback, comments, or suggestions, please describe them here."></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui error message"></div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|