initial commit

jspsych · Nov 10, 2020 · c367531 · c367531
1 parent 386e5be
commit c367531
Show file tree

Hide file tree

Showing 3 changed files with 240 additions and 0 deletions.
diff --git a/examples/jspsych-canvas-button-response.html b/examples/jspsych-canvas-button-response.html
@@ -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>
diff --git a/examples/jspsych-canvas-keyboard-response.html b/examples/jspsych-canvas-keyboard-response.html
@@ -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>
diff --git a/examples/jspsych-canvas-slider-response.html b/examples/jspsych-canvas-slider-response.html
@@ -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>