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