HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

slider plugin #403

Browse Source
This commit is contained in:
Josh de Leeuw 2017-06-26 12:10:56 -04:00
parent 2c9c849e66
commit a70a858526
2 changed files with 112 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
examples/jspsych-survey-slider.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-survey-slider.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 200px;
height: 150px;
margin: 10px;
}
</style>
</head>
<body></body>
<script>
var block_1 = {
type: 'survey-slider',
questions: ['<p>How similar are these pictures?</p><img src="img/happy_face_1.jpg"></img><img src="img/sad_face_1.jpg"></img>'],
}
jsPsych.init({
timeline: [block_1],
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>

81
plugins/jspsych-survey-slider.js Normal file
View File

@ -0,0 +1,81 @@
/**
* jspsych-survey-slider
* a jspsych plugin for free response survey questions
*
* Josh de Leeuw
*
* documentation: docs.jspsych.org
*
*/
jsPsych.plugins['survey-slider'] = (function() {
var plugin = {};
plugin.info = {
name: 'survey-slider',
description: '',
parameters: {
}
}
plugin.trial = function(display_element, trial) {
trial.preamble = typeof trial.preamble == 'undefined' ? "" : trial.preamble;
trial.button_label = typeof trial.button_label === 'undefined' ? 'Next' : trial.button_label;
// if any trial variables are functions
// this evaluates the function and replaces
// it with the output of the function
trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial);
// show preamble text
var html = '<div id="jspsych-survey-slider-preamble" class="jspsych-survey-slider-preamble">'+trial.preamble+'</div>';
// add questions
for (var i = 0; i < trial.questions.length; i++) {
html += '<div id="jspsych-survey-slider-"'+i+'" class="jspsych-survey-slider-question" style="margin: 2em 0em;">';
html += '<div class="jspsych-survey-slider-question-text">' + trial.questions[i] + '</div>';
html += '<input type="range" name="#jspsych-survey-slider-response-' + i + '"></input>';
html += '</div>';
}
// add submit button
html += '<button id="jspsych-survey-slider-next" class="jspsych-btn">'+trial.button_label+'</button>';
display_element.innerHTML = html;
display_element.querySelector('#jspsych-survey-slider-next').addEventListener('click', function() {
// measure response time
var endTime = (new Date()).getTime();
var response_time = endTime - startTime;
// create object to hold responses
var question_data = {};
var matches = display_element.querySelectorAll('div.jspsych-survey-slider-question');
for(var index=0; index<matches.length; index++){
var id = "Q" + index;
var val = matches[index].querySelector('input').value;
var obje = {};
obje[id] = val;
Object.assign(question_data, obje);
}
// save data
var trialdata = {
"rt": response_time,
"responses": JSON.stringify(question_data)
};
display_element.innerHTML = '';
// next trial
jsPsych.finishTrial(trialdata);
});
var startTime = (new Date()).getTime();
};
return plugin;
})();