mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
mjaquiery
parent
982736bd97
commit
f15cf80afb
@ -1,160 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>My experiment</title>
|
|
||||||
<script src="../jsPsych/jspsych.js"></script>
|
|
||||||
<script src="../jsPsych/plugins/jspsych-html-keyboard-response.js"></script>
|
|
||||||
<script src="../jsPsych/plugins/jspsych-canvas-slider-response.js"></script>
|
|
||||||
<link rel="stylesheet" href="../jsPsych/css/jspsych.css"></link>
|
|
||||||
<style type="text/css">
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body></body>
|
|
||||||
<script type="text/javascript">
|
|
||||||
// This stuff defines a box with dots which is drawn on a canvas.
|
|
||||||
class DotGrid {
|
|
||||||
constructor(nDots, args = {}) {
|
|
||||||
this.dotCount = nDots;
|
|
||||||
this.gridWidth = args.gridWidth || 20;
|
|
||||||
this.gridHeight = args.gridHeight || 20;
|
|
||||||
this.dotWidth = args.dotWidth || 2;
|
|
||||||
this.dotHeight = args.dotHeight || 2;
|
|
||||||
this.paddingX = args.paddingX || 6;
|
|
||||||
this.paddingY = args.paddingY || 6;
|
|
||||||
this.renewGrid();
|
|
||||||
this.displayWidth = this.gridWidth*this.dotWidth + (this.gridWidth+2)*this.paddingX;
|
|
||||||
this.displayHeight = this.gridHeight*this.dotHeight + (this.gridHeight+2)*this.paddingY;
|
|
||||||
}
|
|
||||||
get html() {
|
|
||||||
return '<strong>hello, grid</strong>';
|
|
||||||
}
|
|
||||||
// Create a blank grid
|
|
||||||
renewGrid() {
|
|
||||||
let grid = [];
|
|
||||||
for(let i=0; i<this.gridWidth; i++) {
|
|
||||||
let row = [];
|
|
||||||
for(let j=0; j<this.gridHeight; j++) {
|
|
||||||
row.push(0);
|
|
||||||
}
|
|
||||||
grid.push(row);
|
|
||||||
}
|
|
||||||
this.grid = grid;
|
|
||||||
this.populateGrid();
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
// Populate a grid with dots
|
|
||||||
populateGrid() {
|
|
||||||
for(let i=0; i<this.dotCount; i++) {
|
|
||||||
let x = Math.floor(Math.random()*this.gridWidth);
|
|
||||||
let y = Math.floor(Math.random()*this.gridHeight);
|
|
||||||
if(this.grid[x][y]==1)
|
|
||||||
i--;
|
|
||||||
else
|
|
||||||
this.grid[x][y] = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
draw(canvasId) {
|
|
||||||
let canvas = document.getElementById(canvasId);
|
|
||||||
let ctx = canvas.getContext('2d');
|
|
||||||
// Draw frame
|
|
||||||
ctx.lineWidth = "3";
|
|
||||||
ctx.rect(0, 0, this.displayWidth, this.displayHeight);
|
|
||||||
ctx.stroke();
|
|
||||||
// Draw dots
|
|
||||||
ctx.lineWidth = "1";
|
|
||||||
for(let x=0; x<this.gridWidth; x++) {
|
|
||||||
for(let y=0; y<this.gridHeight; y++) {
|
|
||||||
if(this.grid[x][y] == 1) {
|
|
||||||
let startX = (x+1)*this.paddingX + x*this.dotWidth;
|
|
||||||
let startY = (y+1)*this.paddingY + y*this.dotHeight;
|
|
||||||
ctx.fillRect(startX, startY, this.dotWidth, this.dotHeight);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// This function does the actual drawing on the canvas, and is the one
|
|
||||||
// called by the trial (it is passed in as a stimulus and called with
|
|
||||||
// the id of the canvas supplied).
|
|
||||||
// At the moment this doesn't do anything exciting; it just presents
|
|
||||||
// 200 dots in random places in the box, but we could make it staircase
|
|
||||||
// the number of dots based on past performance, etc.
|
|
||||||
function drawDots(canvasId) {
|
|
||||||
var grid = new DotGrid(200);
|
|
||||||
grid.draw(canvasId);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
|
|
||||||
/* create timeline */
|
|
||||||
var timeline = [];
|
|
||||||
|
|
||||||
/* define welcome message trial */
|
|
||||||
var welcome = {
|
|
||||||
type: "html-keyboard-response",
|
|
||||||
stimulus: "Welcome to the experiment. Press any key to begin."
|
|
||||||
};
|
|
||||||
timeline.push(welcome);
|
|
||||||
|
|
||||||
/* define instructions trial */
|
|
||||||
var instructions = {
|
|
||||||
type: "html-keyboard-response",
|
|
||||||
stimulus: "<p>In this experiment, a box with dots will appear in the center of the screen."+
|
|
||||||
"Your task is to use the slider to give an estimate of the number of dots that"+
|
|
||||||
"are in the box. You will not know how many dots there can be in the box, except"+
|
|
||||||
"by observing the boxes on each trial; nevertheless, you should try to use the"+
|
|
||||||
"whole width of the scale, indicating the smallest number of dots by using the"+
|
|
||||||
"left side and the largest number by using the right side.</p>",
|
|
||||||
post_trial_gap: 2000
|
|
||||||
};
|
|
||||||
timeline.push(instructions);
|
|
||||||
|
|
||||||
/* test trials */
|
|
||||||
|
|
||||||
var test = {
|
|
||||||
type: "canvas-slider-response",
|
|
||||||
stimulus: drawDots,
|
|
||||||
labels: ['Sparse', 'Dense'],
|
|
||||||
prompt: '<p>How densely populated is this box?</p>',
|
|
||||||
canvasWidth: 172,
|
|
||||||
canvasHeight: 172
|
|
||||||
}
|
|
||||||
|
|
||||||
var test_procedure = {
|
|
||||||
timeline: [test],
|
|
||||||
repetitions: 5,
|
|
||||||
randomize_order: true
|
|
||||||
}
|
|
||||||
timeline.push(test_procedure);
|
|
||||||
|
|
||||||
/* define debrief */
|
|
||||||
|
|
||||||
var debrief_block = {
|
|
||||||
type: "html-keyboard-response",
|
|
||||||
stimulus: function() {
|
|
||||||
return "<p>You did it beautifully!</p>"+
|
|
||||||
"<p>Press any key to end.</p>"
|
|
||||||
var trials = jsPsych.data.get().filter({test_part: 'test'});
|
|
||||||
var correct_trials = trials.filter({correct: true});
|
|
||||||
var accuracy = Math.round(correct_trials.count() / trials.count() * 100);
|
|
||||||
var rt = Math.round(correct_trials.select('rt').mean());
|
|
||||||
|
|
||||||
return "<p>You responded correctly on "+accuracy+"% of the trials.</p>"+
|
|
||||||
"<p>Your average response time was "+rt+"ms.</p>"+
|
|
||||||
"<p>Press any key to complete the experiment. Thank you!</p>";
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
timeline.push(debrief_block);
|
|
||||||
|
|
||||||
/* start the experiment */
|
|
||||||
jsPsych.init({
|
|
||||||
timeline: timeline,
|
|
||||||
on_finish: function() {
|
|
||||||
jsPsych.data.displayData();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</html>
|
|
||||||
@ -1,218 +0,0 @@
|
|||||||
/**
|
|
||||||
* jspsych-canvas-slider-response
|
|
||||||
* a jspsych plugin for free response to questions presented using canvas
|
|
||||||
* drawing tools
|
|
||||||
*
|
|
||||||
* the drawing is done by a function which is supplied as the stimulus.
|
|
||||||
* this function is passed the id of the canvas on which it will draw.
|
|
||||||
*
|
|
||||||
* the canvas can either be supplied as customised HTML, or a default one
|
|
||||||
* can be used. If a customised on is supplied, its ID must be specified
|
|
||||||
* in a separate variable.
|
|
||||||
*
|
|
||||||
* Matt Jaquiery - https://github.com/mjaquiery/ - Feb 2018
|
|
||||||
*
|
|
||||||
* documentation: docs.jspsych.org
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
|
||||||
jsPsych.plugins['canvas-slider-response'] = (function() {
|
|
||||||
|
|
||||||
var plugin = {};
|
|
||||||
|
|
||||||
plugin.info = {
|
|
||||||
name: 'canvas-slider-response',
|
|
||||||
description: '',
|
|
||||||
parameters: {
|
|
||||||
stimulus: {
|
|
||||||
type: jsPsych.plugins.parameterType.FUNCTION,
|
|
||||||
pretty_name: 'Stimulus',
|
|
||||||
default: undefined,
|
|
||||||
description: 'The function to be called with the canvas ID. '+
|
|
||||||
'This should handle drawing operations.'
|
|
||||||
},
|
|
||||||
canvasHTML: {
|
|
||||||
type: jsPsych.plugins.parameterType.HTML_STRING,
|
|
||||||
pretty_name: 'Canvas HTML',
|
|
||||||
default: null,
|
|
||||||
description: 'HTML for drawing the canvas. '+
|
|
||||||
'Overrides canvas width and height settings.'
|
|
||||||
},
|
|
||||||
canvasId: {
|
|
||||||
type: jsPsych.plugins.parameterType.STRING,
|
|
||||||
pretty_name: 'Canvas ID',
|
|
||||||
default: false,
|
|
||||||
description: 'ID for the canvas. Only necessary when '+
|
|
||||||
'supplying canvasHTML. This is required so that the ID '+
|
|
||||||
'can be passed to the stimulus function.'
|
|
||||||
},
|
|
||||||
canvasWidth: {
|
|
||||||
type: jsPsych.plugins.parameterType.INT,
|
|
||||||
pretty_name: 'Canvas width',
|
|
||||||
default: 300,
|
|
||||||
description: 'Sets the width of the canvas.'
|
|
||||||
},
|
|
||||||
canvasHeight: {
|
|
||||||
type: jsPsych.plugins.parameterType.INT,
|
|
||||||
pretty_name: 'Canvas height',
|
|
||||||
default: 150,
|
|
||||||
description: 'Sets the height of the canvas.'
|
|
||||||
},
|
|
||||||
min: {
|
|
||||||
type: jsPsych.plugins.parameterType.INT,
|
|
||||||
pretty_name: 'Min slider',
|
|
||||||
default: 0,
|
|
||||||
description: 'Sets the minimum value of the slider.'
|
|
||||||
},
|
|
||||||
max: {
|
|
||||||
type: jsPsych.plugins.parameterType.INT,
|
|
||||||
pretty_name: 'Max slider',
|
|
||||||
default: 100,
|
|
||||||
description: 'Sets the maximum value of the slider',
|
|
||||||
},
|
|
||||||
start: {
|
|
||||||
type: jsPsych.plugins.parameterType.INT,
|
|
||||||
pretty_name: 'Slider starting value',
|
|
||||||
default: 50,
|
|
||||||
description: 'Sets the starting value of the slider',
|
|
||||||
},
|
|
||||||
step: {
|
|
||||||
type: jsPsych.plugins.parameterType.INT,
|
|
||||||
pretty_name: 'Step',
|
|
||||||
default: 1,
|
|
||||||
description: 'Sets the step of the slider'
|
|
||||||
},
|
|
||||||
labels: {
|
|
||||||
type: jsPsych.plugins.parameterType.KEYCODE,
|
|
||||||
pretty_name:'Labels',
|
|
||||||
default: [],
|
|
||||||
array: true,
|
|
||||||
description: 'Labels of the slider.',
|
|
||||||
},
|
|
||||||
button_label: {
|
|
||||||
type: jsPsych.plugins.parameterType.STRING,
|
|
||||||
pretty_name: 'Button label',
|
|
||||||
default: 'Continue',
|
|
||||||
array: false,
|
|
||||||
description: 'Label of the button to advance.'
|
|
||||||
},
|
|
||||||
prompt: {
|
|
||||||
type: jsPsych.plugins.parameterType.STRING,
|
|
||||||
pretty_name: 'Prompt',
|
|
||||||
default: null,
|
|
||||||
description: 'Any content here will be displayed below the slider.'
|
|
||||||
},
|
|
||||||
stimulus_duration: {
|
|
||||||
type: jsPsych.plugins.parameterType.INT,
|
|
||||||
pretty_name: 'Stimulus duration',
|
|
||||||
default: null,
|
|
||||||
description: 'How long to hide the stimulus.'
|
|
||||||
},
|
|
||||||
trial_duration: {
|
|
||||||
type: jsPsych.plugins.parameterType.INT,
|
|
||||||
pretty_name: 'Trial duration',
|
|
||||||
default: null,
|
|
||||||
description: 'How long to show the trial.'
|
|
||||||
},
|
|
||||||
response_ends_trial: {
|
|
||||||
type: jsPsych.plugins.parameterType.BOOL,
|
|
||||||
pretty_name: 'Response ends trial',
|
|
||||||
default: true,
|
|
||||||
description: 'If true, trial will end when user makes a response.'
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
plugin.trial = function(display_element, trial) {
|
|
||||||
let canvas = '';
|
|
||||||
// Use the supplied HTML for constructing the canvas, if supplied
|
|
||||||
if(trial.canvasId !== false) {
|
|
||||||
canvas = trial.canvasHTML;
|
|
||||||
} else {
|
|
||||||
// Otherwise create a new default canvas
|
|
||||||
trial.canvasId = '#jspsych-canvas-slider-response-canvas';
|
|
||||||
canvas = '<canvas id="'+trial.canvasId+'" height="'+trial.canvasHeight+
|
|
||||||
'" width="'+trial.canvasWidth+'"></canvas>';
|
|
||||||
}
|
|
||||||
var html = '<div id="jspsych-canvas-slider-response-wrapper" style="margin: 100px 0px;">';
|
|
||||||
html += '<div id="jspsych-canvas-slider-response-stimulus">'+canvas+'</div>';
|
|
||||||
html += '<div class="jspsych-canvas-slider-response-container" style="position:relative;">';
|
|
||||||
html += '<input type="range" value="'+trial.start+'" min="'+trial.min+'" max="'+trial.max+'" step="'+trial.step+'" style="width: 100%;" id="jspsych-canvas-slider-response-response"></input>';
|
|
||||||
html += '<div>'
|
|
||||||
for(var j=0; j < trial.labels.length; j++){
|
|
||||||
var width = 100/(trial.labels.length-1);
|
|
||||||
var left_offset = (j * (100 /(trial.labels.length - 1))) - (width/2);
|
|
||||||
html += '<div style="display: inline-block; position: absolute; left:'+left_offset+'%; text-align: center; width: '+width+'%;">';
|
|
||||||
html += '<span style="text-align: center; font-size: 80%;">'+trial.labels[j]+'</span>';
|
|
||||||
html += '</div>'
|
|
||||||
}
|
|
||||||
html += '</div>';
|
|
||||||
html += '</div>';
|
|
||||||
html += '</div>';
|
|
||||||
|
|
||||||
if (trial.prompt !== null){
|
|
||||||
html += trial.prompt;
|
|
||||||
}
|
|
||||||
|
|
||||||
// add submit button
|
|
||||||
html += '<button id="jspsych-canvas-slider-response-next" class="jspsych-btn">'+trial.button_label+'</button>';
|
|
||||||
|
|
||||||
display_element.innerHTML = html;
|
|
||||||
|
|
||||||
// Execute the supplied drawing function
|
|
||||||
trial.stimulus(trial.canvasId);
|
|
||||||
|
|
||||||
var response = {
|
|
||||||
rt: null,
|
|
||||||
response: null
|
|
||||||
};
|
|
||||||
|
|
||||||
display_element.querySelector('#jspsych-canvas-slider-response-next').addEventListener('click', function() {
|
|
||||||
// measure response time
|
|
||||||
var endTime = (new Date()).getTime();
|
|
||||||
response.rt = endTime - startTime;
|
|
||||||
response.response = display_element.querySelector('#jspsych-canvas-slider-response-response').value;
|
|
||||||
|
|
||||||
if(trial.response_ends_trial){
|
|
||||||
end_trial();
|
|
||||||
} else {
|
|
||||||
display_element.querySelector('#jspsych-canvas-slider-response-next').disabled = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
function end_trial(){
|
|
||||||
|
|
||||||
jsPsych.pluginAPI.clearAllTimeouts();
|
|
||||||
|
|
||||||
// save data
|
|
||||||
var trialdata = {
|
|
||||||
"rt": response.rt,
|
|
||||||
"response": response.response
|
|
||||||
};
|
|
||||||
|
|
||||||
display_element.innerHTML = '';
|
|
||||||
|
|
||||||
// next trial
|
|
||||||
jsPsych.finishTrial(trialdata);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (trial.stimulus_duration !== null) {
|
|
||||||
jsPsych.pluginAPI.setTimeout(function() {
|
|
||||||
display_element.querySelector('#jspsych-canvas-slider-response-stimulus').style.visibility = 'hidden';
|
|
||||||
}, trial.stimulus_duration);
|
|
||||||
}
|
|
||||||
|
|
||||||
// end trial if trial_duration is set
|
|
||||||
if (trial.trial_duration !== null) {
|
|
||||||
jsPsych.pluginAPI.setTimeout(function() {
|
|
||||||
end_trial();
|
|
||||||
}, trial.trial_duration);
|
|
||||||
}
|
|
||||||
|
|
||||||
var startTime = (new Date()).getTime();
|
|
||||||
};
|
|
||||||
|
|
||||||
return plugin;
|
|
||||||
})();
|
|
||||||
Loading…
Reference in New Issue
Block a user