mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
initial commit
This commit is contained in:
Becky Gilbert
parent
386e5be719
commit
c367531d40
95
examples/jspsych-canvas-button-response.html
Normal file
95
examples/jspsych-canvas-button-response.html
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="../jspsych.js"></script>
|
||||||
|
<script src="../plugins/jspsych-canvas-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="../css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// stimulus function that takes the canvas and additional parameters (radius, color)
|
||||||
|
// this can be called inside of an anonymous stimulus function, which takes the canvas (c) as its only argument
|
||||||
|
function filledCirc(canvas, radius, color) {
|
||||||
|
var ctx = canvas.getContext("2d");
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(250, 250, radius, 0, 2 * Math.PI);
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
var circle_1 = {
|
||||||
|
type: 'canvas-button-response',
|
||||||
|
stimulus: function(c) {
|
||||||
|
filledCirc(c, 100, 'blue');
|
||||||
|
},
|
||||||
|
choices: ['Red', 'Green', 'Blue'],
|
||||||
|
prompt: '<p>What color is the circle?</p>',
|
||||||
|
data: {color: 'blue', radius: 100}
|
||||||
|
};
|
||||||
|
|
||||||
|
var circle_2 = {
|
||||||
|
type: 'canvas-button-response',
|
||||||
|
stimulus: function(c) {
|
||||||
|
filledCirc(c, 150, 'green');
|
||||||
|
},
|
||||||
|
choices: ['Larger', 'Smaller'],
|
||||||
|
stimulus_duration: 1000,
|
||||||
|
prompt: '<p>Is this circle larger or smaller than the last one?</p>'+
|
||||||
|
'<p>Stimulus will be hidden after 1 second.</p>',
|
||||||
|
data: {color: 'green', radius: 150}
|
||||||
|
};
|
||||||
|
|
||||||
|
// write the canvas stimulus drawing function without using a named function
|
||||||
|
// the anonymous function must take the canvas as an argument
|
||||||
|
var lines = {
|
||||||
|
type: 'canvas-button-response',
|
||||||
|
stimulus: function(c) {
|
||||||
|
var ctx = c.getContext("2d");
|
||||||
|
// first line
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(300, 10);
|
||||||
|
ctx.lineTo(300, 300);
|
||||||
|
ctx.lineWidth = 10;
|
||||||
|
ctx.strokeStyle = 'MediumBlue';
|
||||||
|
ctx.stroke();
|
||||||
|
// second line
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(20, 200);
|
||||||
|
ctx.lineTo(100, 350);
|
||||||
|
ctx.lineWidth = 10;
|
||||||
|
ctx.strokeStyle = 'MediumPurple';
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
choices: ['Blue line', 'Purple line'],
|
||||||
|
prompt: '<p>Which line is longer?</p>',
|
||||||
|
data: {line1_color: 'blue', line1_length: 290, line2_color: "purple", line2_length: 170}
|
||||||
|
};
|
||||||
|
|
||||||
|
// to use the canvas stimulus function with timeline variables,
|
||||||
|
// use the jsPsych.timelineVariable() function inside your stimulus function with the second 'true' argument
|
||||||
|
var circle_procedure = {
|
||||||
|
timeline: [{
|
||||||
|
type: 'canvas-button-response',
|
||||||
|
stimulus: function(c) {
|
||||||
|
filledCirc(c, jsPsych.timelineVariable('radius', true), jsPsych.timelineVariable('color', true));
|
||||||
|
},
|
||||||
|
choices: ['Red', 'Green', 'Blue'],
|
||||||
|
prompt: '<p>What color is the circle?</p>',
|
||||||
|
data: {radius: jsPsych.timelineVariable('radius'), color: jsPsych.timelineVariable('color')}
|
||||||
|
}],
|
||||||
|
timeline_variables: [
|
||||||
|
{radius: 100, color: 'red'},
|
||||||
|
{radius: 200, color: 'green'},
|
||||||
|
{radius: 50, color: 'blue'}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [circle_1, circle_2, lines, circle_procedure],
|
||||||
|
on_finish: function () {
|
||||||
|
jsPsych.data.displayData();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
78
examples/jspsych-canvas-keyboard-response.html
Normal file
78
examples/jspsych-canvas-keyboard-response.html
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="../jspsych.js"></script>
|
||||||
|
<script src="../plugins/jspsych-canvas-keyboard-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="../css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
// stimulus functions that take the canvas as its only argument
|
||||||
|
// these function names can be used as the value for the stimulus parameter
|
||||||
|
function drawRect(c){
|
||||||
|
var ctx = c.getContext('2d');
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.rect(150, 225, 200, 50);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawCirc(c) {
|
||||||
|
var ctx = c.getContext('2d');
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(250, 250, 200, 0, 2 * Math.PI);
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_1 = {
|
||||||
|
type: 'canvas-keyboard-response',
|
||||||
|
stimulus: drawRect,
|
||||||
|
choices: ['e','i'],
|
||||||
|
prompt: '<p>Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.</p>',
|
||||||
|
data: {shape: 'rectangle'}
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_2 = {
|
||||||
|
type: 'canvas-keyboard-response',
|
||||||
|
stimulus: drawCirc,
|
||||||
|
choices: ['e','i'],
|
||||||
|
prompt: '<p>Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.</p>',
|
||||||
|
data: {shape: 'circle'}
|
||||||
|
}
|
||||||
|
|
||||||
|
// to use the canvas stimulus function with timeline variables,
|
||||||
|
// use the jsPsych.timelineVariable() function inside your stimulus function with the second 'true' argument
|
||||||
|
var trial_procedure = {
|
||||||
|
timeline: [{
|
||||||
|
type: 'canvas-keyboard-response',
|
||||||
|
stimulus: function(c) {
|
||||||
|
var ctx = c.getContext('2d');
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.fillStyle = jsPsych.timelineVariable('color', true);
|
||||||
|
ctx.fillRect(
|
||||||
|
jsPsych.timelineVariable('upper_left_x', true),
|
||||||
|
jsPsych.timelineVariable('upper_left_y', true),
|
||||||
|
jsPsych.timelineVariable('width', true),
|
||||||
|
jsPsych.timelineVariable('height', true)
|
||||||
|
);
|
||||||
|
ctx.stroke();
|
||||||
|
},
|
||||||
|
choices: ['r','b'],
|
||||||
|
prompt: '<p>What color is the rectangle? Press "r" for red and "b" for blue.</p>',
|
||||||
|
data: {color: jsPsych.timelineVariable('color')}
|
||||||
|
}],
|
||||||
|
timeline_variables: [
|
||||||
|
{upper_left_x: 150, upper_left_y: 100, height: 100, width: 150, color: 'red'},
|
||||||
|
{upper_left_x: 270, upper_left_y: 200, height: 300, width: 200, color: 'blue'},
|
||||||
|
{upper_left_x: 150, upper_left_y: 130, height: 200, width: 50, color: 'blue'}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial_1, trial_2, trial_procedure],
|
||||||
|
on_finish: function () {
|
||||||
|
jsPsych.data.displayData();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
67
examples/jspsych-canvas-slider-response.html
Normal file
67
examples/jspsych-canvas-slider-response.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="../jspsych.js"></script>
|
||||||
|
<script src="../plugins/jspsych-canvas-slider-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="../css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var colors;
|
||||||
|
|
||||||
|
// stimulus function that takes the canvas as its only argument
|
||||||
|
// this function name can be used as the value for the stimulus parameter
|
||||||
|
function twoSquares(c) {
|
||||||
|
var ctx = c.getContext('2d');
|
||||||
|
ctx.fillStyle = '#FF3333';
|
||||||
|
ctx.fillRect(200, 70, 40, 40);
|
||||||
|
ctx.fillStyle = '#FF6A33';
|
||||||
|
ctx.fillRect(260, 70, 40, 40);
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_1 = {
|
||||||
|
type: 'canvas-slider-response',
|
||||||
|
stimulus: twoSquares,
|
||||||
|
labels: ['0','10'],
|
||||||
|
canvas_size: [200, 500],
|
||||||
|
prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)?</p>',
|
||||||
|
data: {color1: '#FF3333', color2: '#FF6A33'}
|
||||||
|
}
|
||||||
|
|
||||||
|
// stimulus function that takes the canvas and additional parameters
|
||||||
|
// this can be called inside of an anonymous stimulus function, which takes the canvas as its only argument
|
||||||
|
function twoSquaresColors(c, colors) {
|
||||||
|
var ctx = c.getContext('2d');
|
||||||
|
ctx.fillStyle = colors[0];
|
||||||
|
ctx.fillRect(200, 70, 40, 40);
|
||||||
|
ctx.fillStyle = colors[1];
|
||||||
|
ctx.fillRect(260, 70, 40, 40);
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_2 = {
|
||||||
|
type: 'canvas-slider-response',
|
||||||
|
stimulus: function(c) {
|
||||||
|
colors = ['darkred', 'cyan'];
|
||||||
|
twoSquaresColors(c, colors);
|
||||||
|
},
|
||||||
|
labels: ['Exactly<br>the same','Totally<br>different'],
|
||||||
|
canvas_size: [200, 500],
|
||||||
|
require_movement: true,
|
||||||
|
stimulus_duration: 1000,
|
||||||
|
prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)?</p>'+
|
||||||
|
'<p>Interaction with the slider is required to continue. Stimulus will be hidden after 1 second.</p>',
|
||||||
|
on_finish: function(data) {
|
||||||
|
data.color1 = colors[0];
|
||||||
|
data.color2 = colors[1];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [trial_1, trial_2],
|
||||||
|
on_finish: function () {
|
||||||
|
jsPsych.data.displayData();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user