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

more plugin refactoring #422

Browse Source
This commit is contained in:
Josh de Leeuw 2017-07-06 13:48:00 -04:00
parent 045560d2f5
commit 7f62f0b52b
2 changed files with 54 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
examples/jspsych-image-slider-response.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<script src="../jspsych.js"></script>
<script src="../plugins/jspsych-image-slider-response.js"></script>
<link rel="stylesheet" href="../css/jspsych.css"></link>
<style>
img {
width: 300px;
}
</style>
</head>
<body></body>
<script>
var trial_1 = {
type: 'image-slider-response',
stimulus: 'img/happy_face_1.jpg',
labels: ['1 (least happy)', '100 (most happy)'],
prompt: '<p>How happy is this person on a scale of 1-100?</p>'
}
var trial_2 = {
type: 'image-slider-response',
stimulus: 'img/happy_face_2.jpg',
labels: ['1 (least happy)', '100 (most happy)'],
prompt: '<p>How happy is this person on a scale of 1-100? (5s time limit)</p>',
trial_duration: 5000
}
var trial_3 = {
type: 'image-slider-response',
stimulus: 'img/happy_face_2.jpg',
labels: ['1 (least happy)', '100 (most happy)'],
prompt: '<p>How happy is this person on a scale of 1-100? (1s stimulus duration)</p>',
stimulus_duration: 1000
}
jsPsych.init({
timeline: [trial_1, trial_2, trial_3],
on_finish: function() {
jsPsych.data.displayData();
},
default_iti: 250
});
</script>
</html>

9
plugins/jspsych-image-slider-response.js
View File

@ -56,8 +56,8 @@ jsPsych.plugins['image-slider-response'] = (function() {
// it with the output of the function // it with the output of the function
trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial); trial = jsPsych.pluginAPI.evaluateFunctionParameters(trial);
var html = '<div id="jspsych-image-slider-response" class="jspsych-image-slider-response-question" style="margin: 100px 0px;">'; var html = '<div id="jspsych-image-slider-response-wrapper" style="margin: 100px 0px;">';
html += '<div class="jspsych-image-slider-response-stimulus"><img src="' + trial.stimulus + '"></div>'; html += '<div id="jspsych-image-slider-response-stimulus"><img src="' + trial.stimulus + '"></div>';
html += '<div class="jspsych-image-slider-response-container" style="position:relative;">'; html += '<div class="jspsych-image-slider-response-container" style="position:relative;">';
html += '<input type="range" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>'; html += '<input type="range" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-image-slider-response-response"></input>';
html += '<div>' html += '<div>'
@ -90,7 +90,7 @@ jsPsych.plugins['image-slider-response'] = (function() {
response.rt = endTime - startTime; response.rt = endTime - startTime;
response.response = display_element.querySelector('#jspsych-image-slider-response-response').value; response.response = display_element.querySelector('#jspsych-image-slider-response-response').value;
if(response_ends_trial){ if(trial.response_ends_trial){
end_trial(); end_trial();
} else { } else {
display_element.querySelector('#jspsych-image-slider-response-next').disabled = true; display_element.querySelector('#jspsych-image-slider-response-next').disabled = true;
@ -99,6 +99,9 @@ jsPsych.plugins['image-slider-response'] = (function() {
}); });
function end_trial(){ function end_trial(){
jsPsych.pluginAPI.clearAllTimeouts();
// save data // save data
var trialdata = { var trialdata = {
"rt": response.rt, "rt": response.rt,