mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
97 lines
3.2 KiB
HTML
97 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../packages/jspsych/dist/index.browser.js"></script>
|
|
<script src="../packages/plugin-canvas-button-response/dist/index.browser.js"></script>
|
|
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
|
|
</head>
|
|
<body></body>
|
|
<script>
|
|
|
|
var jsPsych = initJsPsych({
|
|
on_finish: function () {
|
|
jsPsych.data.displayData();
|
|
}
|
|
});
|
|
|
|
// 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: jsPsychCanvasButtonResponse,
|
|
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: jsPsychCanvasButtonResponse,
|
|
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: jsPsychCanvasButtonResponse,
|
|
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,
|
|
// the jsPsych.timelineVariable() function can be used inside your stimulus function
|
|
var circle_procedure = {
|
|
timeline: [{
|
|
type: jsPsychCanvasButtonResponse,
|
|
stimulus: function (c) {
|
|
filledCirc(c, jsPsych.evaluateTimelineVariable('radius'), jsPsych.evaluateTimelineVariable('color'));
|
|
},
|
|
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.run([circle_1, circle_2, lines, circle_procedure]);
|
|
</script>
|
|
</html>
|