The demos/draw_two_images_repeatedly.html is added.

kurokida · May 16, 2020 · 10c9f70 · 10c9f70
1 parent c7a1e4d
commit 10c9f70
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 2 deletions.
diff --git a/demos/draw_two_images_repeatedly.html b/demos/draw_two_images_repeatedly.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="../jspsych.js"></script>
+  <script src="../jspsych-psychophysics.js"></script>
+  <link rel="stylesheet" href="../css/jspsych.css"></link>
+</head>
+<body></body>
+<script>
+    // This file demonstrates how to present two images repeatedly until a participant responds to them.
+    // This demonstration can be applied to the study on like change blindness.
+
+    const images = [ // All the images used in this demo
+        './img/scissors.png',
+        './img/pen.png',
+        './img/battery.png',
+        './img/pin.png',
+        './img/tape.png',
+        './img/clip.png'
+    ];
+
+
+    const trial = {
+        timeline: [
+            {
+                type: 'psychophysics',
+                stimuli: [
+                    {
+                        obj_type: 'image',
+                        file: jsPsych.timelineVariable('firstImage'),
+                    },
+                    {
+                        obj_type: 'image',
+                        file: jsPsych.timelineVariable('secondImage'),
+                    }
+                ],
+                canvas_height: 500,
+                prompt: 'Press any key to proceed.',
+                stepFunc: function(trial, canvas, context, elapsedTime){
+                    const first_image_onset = 0; // ms
+                    const second_image_onset = 1000; // ms
+                    const display_duration = 500; // ms
+                    const isi = 500; // ms
+                    const period = (display_duration + isi) * 2; // 2 images
+
+                    const time_from_first_image_onset = elapsedTime % period;
+
+                    if (time_from_first_image_onset > first_image_onset && time_from_first_image_onset < first_image_onset + display_duration){
+                        const stim = trial.stimuli[0];
+                        context.drawImage(stim.img, 0, 0); 
+                    }
+
+                    if (time_from_first_image_onset > second_image_onset && time_from_first_image_onset < second_image_onset + display_duration){
+                        const stim = trial.stimuli[1];
+                        context.drawImage(stim.img, 0, 0); 
+                    }
+                }
+            },
+        ],
+        timeline_variables: [
+            {firstImage: images[0], secondImage: images[1]},
+            {firstImage: images[2], secondImage: images[3]},
+            {firstImage: images[4], secondImage: images[5]}
+        ],
+        randomize_order: true
+    }
+
+    jsPsych.init({
+        timeline: [trial],
+        preload_images: images, // The image data should be preloaded.
+        on_finish: function(){jsPsych.data.displayData();}
+    });
+</script>
+
+</html>
diff --git a/docs/pluginParams.md b/docs/pluginParams.md
@@ -4,13 +4,13 @@ Only the 'stimuli' parameter is required; Other parameters can be left unspecifi
 
 |Parameter|Type|Default Value|Description|
 |---|---|---|---|
-|stimuli|array|undefined|An array of objects, each object represents a stimulus to be presented in this trial. The properties of each object are depend on the type of the object. See [the properties of the stimulus object](objectProperties.md). The stimuli is not needed when you use the stepFunc which is called by the requestAnimationFrame method.|
+|stimuli|array|undefined|An array of objects, each object represents a stimulus to be presented in this trial. The properties of each object are depend on the type of the object. See [the properties of the stimulus object](objectProperties.md). The stimuli is not necessarily needed when you use the stepFunc which is called by the requestAnimationFrame method.|
 |canvas_width|numeric|window.innerWidth|The width of the canvas in which stimuli are drawn. If it is not specified, the width of the canvas is identical to that of the window.|
 |canvas_height|numeric|window.innerHeight|The height of the canvas in which stimuli are drawn. If it is not specified, the height of the canvas is identical to that of the window.|
 |background_color|string|'grey'|The background color of the canvas.The color can be specified using the HTML color names, hexadecimal (HEX) colors, and RGB values that are often used in a general HTML file. |
 |response_type|string|'key'|To have a participant respond to the stimulus using a mouse instead of a keyboard, specify `'mouse'`.|
 |response_start_time|numeric|0|The defalut value (0) means that the participant can respond to the stimuli from the start of the trial, and the reaction time is the time from the start of the trial until the participant's response. If the response_start_time is set to 1000, the participant can respond to the stimuli 1000 ms after from the start of the trial, and the reaction time is the time from 1000 ms after the start of the trial until the participant's response.|
-|stepFunc|function|null|**Advanced.** This function is called by the *requestAnimationFrame* method, and excuted synchronized with the refresh of the display. When you specify the *stepFunc*, the *stimuli* should not be specified. If you would like to draw stimuli using the canvas-drawing methods manually, the *stepFunc* would be benefit. See, `demos/stepFunc.html`.|
+|stepFunc|function|null|**Advanced.** This function is called by the *requestAnimationFrame* method, and excuted synchronized with the refresh of the display. When you specify the *stepFunc*, the *stimuli* is not necessarily specified. If you would like to draw stimuli using the canvas-drawing methods manually, the *stepFunc* would be benefit. See, `demos/stepFunc.html` and `demos/draw_two_images_repeatedly.html`.|
 |choices|array of keycodes|jsPsych.ALL_KEYS|This array contains the keys that the participant is allowed to press in order to respond to the stimulus. Keys can be specified as their [numeric key code](https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) or as characters (e.g., 'a', 'q'). The default value of jsPsych.ALL_KEYS means that all keys will be accepted as valid responses. Specifying jsPsych.NO_KEYS will mean that no responses are allowed.|
 |prompt|string|null|This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the participant is supposed to take (e.g., which key(s) to press).|
 |trial_duration|numeric|null|How long to wait for the participant to make a response before ending the trial in milliseconds. If the participant fails to make a response before this timer is reached, the participant's response will be recorded as null for the trial and the trial will end. If the value of this parameter is null, the trial will wait for a response indefinitely.|