115 lines
3.8 KiB
JavaScript
115 lines
3.8 KiB
JavaScript
|
var demoSurvey = {
|
||
|
|
maybeLoadSurvey: function(config) {
|
||
|
|
if (config.advanced.includeDemographicSurvey) {
|
||
|
|
console.log("loading demo survey");
|
||
|
|
$('#demo-survey').load("assets/html/demo_survey.html");
|
||
|
|
$('#demo-survey').hide();
|
||
|
|
$('#feedback-field').hide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hideSurvey: function() {
|
||
|
|
$('#demo-survey').hide();
|
||
|
|
},
|
||
|
|
showTask: function() {
|
||
|
|
|
||
|
|
// make sure to hide experiment: use the appropriate div references (or add div wrappers) to hide the previous task elements
|
||
|
|
//$('#custom-experiment').hide();
|
||
|
|
$(".subtask").hide();
|
||
|
|
// -----------------------
|
||
|
|
|
||
|
|
$('#demo-survey').show();
|
||
|
|
|
||
|
|
// Rules for collecting demographic survey data
|
||
|
|
$('#survey-form')
|
||
|
|
.form({
|
||
|
|
fields: {
|
||
|
|
gender: {
|
||
|
|
identifier: 'gender',
|
||
|
|
rules: [{
|
||
|
|
type: 'checked',
|
||
|
|
prompt: 'Please select a gender'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
ageGroup: {
|
||
|
|
identifier: 'ageGroup',
|
||
|
|
rules: [{
|
||
|
|
type: 'checked',
|
||
|
|
prompt: 'Please select an age group'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
ethnicity: {
|
||
|
|
identifier: 'ethnicity',
|
||
|
|
rules: [{
|
||
|
|
type: 'checked',
|
||
|
|
prompt: 'Please select an ethnicity'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
education: {
|
||
|
|
identifier: 'education',
|
||
|
|
rules: [{
|
||
|
|
type: 'checked',
|
||
|
|
prompt: 'Please select an education level'
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
vizExperience: {
|
||
|
|
identifier: 'vizExperience',
|
||
|
|
rules: [{
|
||
|
|
type: 'checked',
|
||
|
|
prompt: 'Please select your experience with visualizations'
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$("input:checkbox[name=ethnicity]").change(function() {
|
||
|
|
var unspecified = $("#ethnicUnspecified").is(":checked");
|
||
|
|
if (unspecified) {
|
||
|
|
$("input:checkbox[name=ethnicity]").not("#ethnicUnspecified")
|
||
|
|
.prop("checked", false);
|
||
|
|
$(".ethnicityOption").addClass("disabled");
|
||
|
|
} else {
|
||
|
|
$(".ethnicityOption").removeClass("disabled");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
collectData: function() {
|
||
|
|
var gender = $("input[type=radio][name=gender]:checked").val();
|
||
|
|
var ageGroup = $("input[type=radio][name=ageGroup]:checked").val();
|
||
|
|
var ethnicity = $("input[type=checkbox][name=ethnicity]:checked").val();
|
||
|
|
var education = $("input[type=radio][name=education]:checked").val();
|
||
|
|
var vizExperience = $("input[type=radio][name=vizExperience]:checked").val();
|
||
|
|
var feedback = htmlEscape($("textarea[name=feedback]").val());
|
||
|
|
|
||
|
|
var data = {
|
||
|
|
gender: gender,
|
||
|
|
ageGroup: ageGroup,
|
||
|
|
ethnicity: ethnicity,
|
||
|
|
education: education,
|
||
|
|
vizExperience: vizExperience,
|
||
|
|
feedback: feedback
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
survey_data: data
|
||
|
|
};
|
||
|
|
},
|
||
|
|
validateTask: function() {
|
||
|
|
console.log("validating demographic survey");
|
||
|
|
$('#survey-form').form('validate form');
|
||
|
|
// falsey value indicates no error...
|
||
|
|
if (!$('#survey-form').form('is valid')) {
|
||
|
|
return {errorMessage: ""}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function htmlEscape(str) {
|
||
|
|
/* Html-escape a sensitive string. */
|
||
|
|
return String(str)
|
||
|
|
.replace(/&/g, '&')
|
||
|
|
.replace(/"/g, '"')
|
||
|
|
.replace(/'/g, ''')
|
||
|
|
.replace(/</g, '<')
|
||
|
|
.replace(/>/g, '>');
|
||
|
|
}
|