mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
Added jspsych-survey-html-form plugin
This commit is contained in:
Jan Simson
parent
e2b73655e6
commit
1b36f56daa
36
examples/jspsych-survey-html-form.html
Normal file
36
examples/jspsych-survey-html-form.html
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||||
|
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
|
||||||
|
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
|
||||||
|
<script src="../jspsych.js"></script>
|
||||||
|
<script src="../plugins/jspsych-survey-html-form.js"></script>
|
||||||
|
<script src="../plugins/jspsych-html-keyboard-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="../css/jspsych.css"></script>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title></title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var text_trial = {
|
||||||
|
type: 'html-keyboard-response',
|
||||||
|
stimulus: 'Press any key to view form.'
|
||||||
|
}
|
||||||
|
|
||||||
|
var form_trial = {
|
||||||
|
type: 'survey-html-form',
|
||||||
|
html: '<p> How are you feeling <b>right now?</b> </p>' +
|
||||||
|
'<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />_.</p>'
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [text_trial, form_trial],
|
||||||
|
on_finish: function(){ jsPsych.data.displayData(); }
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
146
plugins/jspsych-survey-html-form.js
Normal file
146
plugins/jspsych-survey-html-form.js
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-survey-html-form
|
||||||
|
* a jspsych plugin for free html forms
|
||||||
|
*
|
||||||
|
* Jan Simson
|
||||||
|
*
|
||||||
|
* documentation: docs.jspsych.org
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
jsPsych.plugins['survey-html-form'] = (function() {
|
||||||
|
|
||||||
|
/*!
|
||||||
|
* Serialize all form data into an array
|
||||||
|
* (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
|
||||||
|
* @param {Node} form The form to serialize
|
||||||
|
* @return {String} The serialized form data
|
||||||
|
*/
|
||||||
|
var serializeArray = function (form) {
|
||||||
|
// Setup our serialized data
|
||||||
|
var serialized = [];
|
||||||
|
|
||||||
|
// Loop through each field in the form
|
||||||
|
for (var i = 0; i < form.elements.length; i++) {
|
||||||
|
var field = form.elements[i];
|
||||||
|
|
||||||
|
// Don't serialize fields without a name, submits, buttons, file and reset inputs, and disabled fields
|
||||||
|
if (!field.name || field.disabled || field.type === 'file' || field.type === 'reset' || field.type === 'submit' || field.type === 'button') continue;
|
||||||
|
|
||||||
|
// If a multi-select, get all selections
|
||||||
|
if (field.type === 'select-multiple') {
|
||||||
|
for (var n = 0; n < field.options.length; n++) {
|
||||||
|
if (!field.options[n].selected) continue;
|
||||||
|
serialized.push({
|
||||||
|
name: field.name,
|
||||||
|
value: field.options[n].value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert field data to a query string
|
||||||
|
else if ((field.type !== 'checkbox' && field.type !== 'radio') || field.checked) {
|
||||||
|
serialized.push({
|
||||||
|
name: field.name,
|
||||||
|
value: field.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return serialized;
|
||||||
|
};
|
||||||
|
|
||||||
|
// from https://stackoverflow.com/questions/1184624/convert-form-data-to-javascript-object-with-jquery
|
||||||
|
function objectifyForm(formArray) {//serialize data function
|
||||||
|
var returnArray = {};
|
||||||
|
for (var i = 0; i < formArray.length; i++){
|
||||||
|
returnArray[formArray[i]['name']] = formArray[i]['value'];
|
||||||
|
}
|
||||||
|
return returnArray;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'survey-html-form',
|
||||||
|
description: '',
|
||||||
|
parameters: {
|
||||||
|
html: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'HTML',
|
||||||
|
default: null,
|
||||||
|
description: 'HTML formatted string containing all the input elements to display. Every element has to have its own distinctive name attribute. The <form> tag must not be included and is generated by the plugin.'
|
||||||
|
},
|
||||||
|
preamble: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Preamble',
|
||||||
|
default: null,
|
||||||
|
description: 'HTML formatted string to display at the top of the page above all the questions.'
|
||||||
|
},
|
||||||
|
button_label: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Button label',
|
||||||
|
default: 'Continue',
|
||||||
|
description: 'The text that appears on the button to finish the trial.'
|
||||||
|
},
|
||||||
|
dataAsArray: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOLEAN,
|
||||||
|
pretty_name: 'Data As Array',
|
||||||
|
default: false,
|
||||||
|
description: 'Retrieve the data as an array e.g. [{name: "INPUT_NAME", value: "INPUT_VALUE"}, ...] instead of an object e.g. {INPUT_NAME: INPUT_VALUE, ...}.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
// show preamble text
|
||||||
|
if(trial.preamble !== null){
|
||||||
|
html += '<div id="jspsych-survey-html-form-preamble" class="jspsych-survey-html-form-preamble">'+trial.preamble+'</div>';
|
||||||
|
}
|
||||||
|
// start form
|
||||||
|
html += '<form id="jspsych-survey-html-form">'
|
||||||
|
|
||||||
|
// add form HTML / input elements
|
||||||
|
html += trial.html;
|
||||||
|
|
||||||
|
// add submit button
|
||||||
|
html += '<input type="submit" id="jspsych-survey-html-form-next" class="jspsych-btn jspsych-survey-html-form" value="'+trial.button_label+'"></input>';
|
||||||
|
|
||||||
|
html += '</form>'
|
||||||
|
display_element.innerHTML = html;
|
||||||
|
|
||||||
|
display_element.querySelector('#jspsych-survey-html-form').addEventListener('submit', function(event) {
|
||||||
|
// don't submit form
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
// measure response time
|
||||||
|
var endTime = performance.now();
|
||||||
|
var response_time = endTime - startTime;
|
||||||
|
|
||||||
|
var question_data = serializeArray(this);
|
||||||
|
|
||||||
|
if (!trial.dataAsArray) {
|
||||||
|
question_data = objectifyForm(question_data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// save data
|
||||||
|
var trialdata = {
|
||||||
|
"rt": response_time,
|
||||||
|
"responses": JSON.stringify(question_data)
|
||||||
|
};
|
||||||
|
|
||||||
|
display_element.innerHTML = '';
|
||||||
|
|
||||||
|
// next trial
|
||||||
|
jsPsych.finishTrial(trialdata);
|
||||||
|
});
|
||||||
|
|
||||||
|
var startTime = performance.now();
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
Loading…
Reference in New Issue
Block a user