mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
Merge pull request #2133 from jspsych/modularization-plugin-param-type-changes
RDK and visual-search-circle plugins: parameter type changes - fixes #2132, #2139
This commit is contained in:
bjoluc
GitHub
commit
2acc8880c5
@ -1,56 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: "rdk",
|
||||
coherent_direction: 0,
|
||||
correct_choice: "p"
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,61 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: "rdk",
|
||||
post_trial_gap: 0,
|
||||
number_of_dots: 200,
|
||||
RDK_type: 3,
|
||||
choices: ["a", "l"],
|
||||
correct_choice: "a",
|
||||
coherent_direction: 180,
|
||||
trial_duration: 1000
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -1,61 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var start = {
|
||||
type: 'html-button-response',
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: 'html-button-response',
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: "rdk",
|
||||
number_of_apertures: 3, //This needs to be set if more than one aperture
|
||||
trial_duration: 10000,
|
||||
correct_choice: "a",
|
||||
RDK_type: 3, //Applied to all apertures if only one value
|
||||
aperture_width: 200, //Applied to all apertures if only one value
|
||||
number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures
|
||||
aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen)
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.init({
|
||||
timeline: [start, trial_loop]
|
||||
});
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
@ -49,13 +49,11 @@
|
||||
|
||||
var trial = {
|
||||
type: 'visual-search-circle',
|
||||
target: 'img/elephant.png',
|
||||
foil: ['img/lion.png', 'img/monkey.png'],
|
||||
stimuli: ['img/elephant.png', 'img/lion.png', 'img/monkey.png'],
|
||||
fixation_image: 'img/fixation.gif',
|
||||
target_present_key: 'e',
|
||||
target_absent_key: 'n',
|
||||
target_present: true,
|
||||
set_size: 3
|
||||
target_present: true
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
|
||||
@ -1,129 +0,0 @@
|
||||
# jspsych-rdk plugin
|
||||
|
||||
This plugin displays a Random Dot Kinematogram (RDK) and allows the subject to report the primary direction of motion by pressing a key on the keyboard. The stimulus can be displayed until a keyboard response is given or until a certain duration of time has passed. The RDK is fully customizable (see documentation below) and can display multiple apertures at the same time, each with its own parameters.
|
||||
|
||||
!!! citation
|
||||
We would appreciate it if you cited this paper when you use the RDK plugin
|
||||
|
||||
Rajananda, S., Lau, H. & Odegaard, B., (2018). A Random-Dot Kinematogram for Web-Based Vision Research. *Journal of Open Research Software. 6*(1), p.6. doi:[10.5334/jors.194](http://doi.org/10.5334/jors.194)
|
||||
|
||||
For optimal performance, fullscreen mode should be manually triggered by the user (e.g. F11 key in Chrome for Windows). Usage of the default Fullscreen trigger from the jsPsych API library with this plugin might result in the stimuli being displayed incorrectly.
|
||||
|
||||
## Parameters
|
||||
|
||||
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Parameters can be left unspecified if the default value is acceptable.
|
||||
|
||||
| Parameter | Type | Default Value | Descripton |
|
||||
| ------------------------ | ---------------- | -------------------- | ---------------------------------------- |
|
||||
| choices | array of strings | jsPsych.ALL_KEYS | The valid keys that the subject can press as a response. Must be an array of strings. If left unspecified, any key is a valid key. |
|
||||
| correct_choice | array or string | *undefined* | The keys that are considered the correct response for that particular trial. Can be a single string or an array of strings. This needs to be linked with the `coherent_direction` parameter (see Examples section below for an illustration). This is used to determine whether the subject chose the correct response. The boolean indicating whether or not the subject chose the correct response is returned in the `correct` key of the data object. |
|
||||
| trial_duration | numeric | 500 | The amount of time that the stimulus is displayed on the screen in ms. If -1, the stimulus will be displayed until the subject keys in a valid response. (`choices` parameter must contain valid keys or else the stimuli will run indefinitely). |
|
||||
| response_ends_trial | boolean | true | If `true`, then the subject's response will end the trial. If `false`, the stimuli will be presented for the full `trial_duration` (the response will be recorded as long as the subject responds within the trial duration). |
|
||||
| number_of_apertures | numeric | 1 | The number of apertures or RDKs on the screen. If set to more than one, remember to set the location (i.e., aperture_center_x and aperture_center_y) parameters to separate them. <br>In addition, each aperture can be customized individually by passing in an array of values as the parameter (see example below). If a single value (not an array) is passed as the parameter, then all apertures will have the same parameter. |
|
||||
| number_of_dots | numeric | 300 | Number of dots per set. Equivalent to number of dots per frame. |
|
||||
| number_of_sets | numeric | 1 | Number of sets to cycle through. Each frame displays one set of dots. (E.g. If 2 sets of dots, frame 1 will display dots from set 1, frame 2 will display dots from set 2, frame 3 will display sets from set 1, etc.) |
|
||||
| coherent_direction | numeric | 0 | The direction of movement for coherent dots in degrees. 0 degrees is in the 3 o'clock direction, and increasing this number moves counterclockwise. (E.g. 12 o'clock is 90, 9 o'clock is 180, etc.) Range is 0 - 360. |
|
||||
| coherence | numeric | 0.5 | The proportion of dots that move together in the coherent direction. Range is 0 to 1. |
|
||||
| opposite_coherence | numeric | 0 | The proportion of moving in the direction opposite of the coherent direction. Range is 0 to (1-coherence). |
|
||||
| dot_radius | numeric | 2 | The radius of each individual dot in pixels. |
|
||||
| dot_life | numeric | -1 | The number of frames that pass before a dot disappears and reappears in a new frame. -1 denotes that the dot life is infinite (i.e., a dot will only disappear and reappear if it moves out of the aperture). |
|
||||
| move_distance | numeric | 1 | The number of pixel lengths the dot will move in each frame (analogous to speed of dots). |
|
||||
| aperture_width | numeric | 600 | The width of the aperture in pixels. For a square aperture, this will determine both the width and height. For circular aperture, this will determine the diameter. |
|
||||
| aperture_height | numeric | 400 | The height of the aperture in pixels. For square and circle apertures, this will be ignored. |
|
||||
| dot_color | string | "white" | The color of the dots. |
|
||||
| background_color | string | "gray" | The color of the background. |
|
||||
| RDK_type | numeric | 3 | The Signal Selection Rule (Same/Different) and Noise Type (Random Position/Walk/Direction):<br><br>1 - Same && Random Position<br>2 - Same && Random Walk<br>3 - Same && Random Direction<br>4 - Different && Random Position<br>5 - Different && Random Walk<br>6 - Different && Random Direction<br><br>(See 'RDK parameter' below for more detailed information)<br> |
|
||||
| aperture_type | numeric | 2 | The shape of the aperture.<br><br>1 - Circle<br>2 - Ellipse<br>3 - Square<br>4 - Rectangle<br> |
|
||||
| reinsert_type | numeric | 2 | The type of reinsertion of a dot that has gone out of bounds<br><br>1 - Randomly appear anywhere in the aperture<br>2 - Appear on the opposite edge of the aperture. For squares and rectangles, a random point on the opposite edge is chosen as the reinsertion point. For circles and ellipses, the exit point is reflected about center to become the reinsertion point.<br> |
|
||||
| aperture_center_x | numeric | window.innerWidth/2 | The x-coordinate of the center of the aperture, in pixels.<br> |
|
||||
| aperture_center_y | numeric | window.innerHeight/2 | The y-coordinate of the center of the aperture, in pixels.<br> |
|
||||
| fixation_cross | boolean | false | Whether or not a fixation cross is presented in the middle of the screen.<br> |
|
||||
| fixation_cross_width | numeric | 20 | The width of the fixation cross in pixels.<br> |
|
||||
| fixation_cross_height | numeric | 20 | The height of the fixation cross in pixels.<br> |
|
||||
| fixation_cross_color | string | "black" | The color of the fixation cross.<br> |
|
||||
| fixation_cross_thickness | numeric | 1 | The thickness of the fixation cross in pixels.<br> |
|
||||
| border | boolean | false | The presence of a border around the aperture.<br> |
|
||||
| border_thickness | numeric | 1 | The thickness of the border in pixels.<br> |
|
||||
| border_color | string | "black" | The color of the border.<br> |
|
||||
|
||||
### RDK type parameter
|
||||
*See Fig. 1 in [Scase, Braddick, and Raymond (1996)](https://doi.org/10.1016/0042-6989(95)00325-8) for a visual depiction of these different signal selection rules and noise types.*
|
||||
|
||||
#### Signal Selection rule:
|
||||
- **Same**: Each dot is designated to be either a coherent dot (signal) or incoherent dot (noise) and will remain so throughout all frames in the display. Coherent dots will always move in the direction of coherent motion in all frames.
|
||||
- **Different**: Each dot can be either a coherent dot (signal) or incoherent dot (noise) and will be designated randomly (weighted based on the coherence level) at each frame. Only the dots that are designated to be coherent dots will move in the direction of coherent motion, but only in that frame. In the next frame, each dot will be designated randomly again on whether it is a coherent or incoherent dot.
|
||||
|
||||
#### Noise Type:
|
||||
- **Random position**: The incoherent dots appear in a random location in the aperture in each frame.<br/>
|
||||
- **Random walk**: The incoherent dots will move in a random direction (designated randomly in each frame) in each frame.<br/>
|
||||
- **Random direction**: Each incoherent dot has its own alternative direction of motion (designated randomly at the beginning of the trial), and moves in that direction in each frame.<br/>
|
||||
|
||||
|
||||
## Data Generated
|
||||
|
||||
In addition to the [default data collected by all plugins](/overview/plugins#data-collected-by-all-plugins), this plugin collects all parameter data described above and the following data for each trial.
|
||||
|
||||
| Name | Type | Value |
|
||||
| ---------------- | ----------- | ---------------------------------------- |
|
||||
| rt | numeric | The response time in ms for the subject to make a response. |
|
||||
| response | string | The key that the subject pressed. |
|
||||
| correct | boolean | Whether or not the subject's key press corresponded to those provided in correct_choice. |
|
||||
| frame_rate | numeric | The average frame rate for the trial. 0 denotes that the subject responded before the appearance of the second frame. |
|
||||
| number_of_frames | numeric | The number of frames that was shown in this trial. |
|
||||
| frame_rate_array | array | The array that holds the number of miliseconds for each frame in this trial. This will be encoded as a JSON string when data is saved using the `.json()` or `.csv()` functions. |
|
||||
| canvas_width | numeric | The width of the canvas in pixels. |
|
||||
| canvas_height | numeric | The height of the canvas in pixels. |
|
||||
|
||||
## Example
|
||||
|
||||
???+ example "Setting the correct_choice parameter by linking it to the coherent_direction parameter"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var trial = {
|
||||
type: "rdk",
|
||||
coherent_direction: 0,
|
||||
correct_choice: "p"
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-rdk-demo1.html">open the demo in a new tab</a>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-rdk-demo1.html">Open demo in new tab</a>
|
||||
|
||||
???+ example "Displaying a trial with 2 choices and 1 correct choice"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var trial = {
|
||||
type: "rdk",
|
||||
post_trial_gap: 0,
|
||||
number_of_dots: 200,
|
||||
RDK_type: 3,
|
||||
choices: ["a", "l"],
|
||||
correct_choice: "a",
|
||||
coherent_direction: 180,
|
||||
trial_duration: 1000
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-rdk-demo2.html">open the demo in a new tab</a>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-rdk-demo2.html">Open demo in new tab</a>
|
||||
|
||||
???+ example "Displaying a trial with multiple apertures"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var trial = {
|
||||
type: "rdk",
|
||||
number_of_apertures: 3, //This needs to be set if more than one aperture
|
||||
trial_duration: 10000,
|
||||
correct_choice: "a",
|
||||
RDK_type: 3, //Applied to all apertures if only one value
|
||||
aperture_width: 200, //Applied to all apertures if only one value
|
||||
number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures
|
||||
aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen)
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
This demo requires a larger viewing area to complete. Please <a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-rdk-demo3.html">open the demo in a new tab</a>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-rdk-demo3.html">Open demo in new tab</a>
|
||||
@ -6,15 +6,21 @@ This plugin presents a customizable visual-search task modelled after [Wang, Cav
|
||||
|
||||
## Parameters
|
||||
|
||||
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
||||
In addition to the [parameters available in all plugins](/overview/plugins#parameters-available-in-all-plugins), this plugin accepts the following parameters. The set of images to display must be defined in one of two ways:
|
||||
* The `target`, `foil` and `set_size` parameters: the combination of these parameters can be used to construct a 'classic' visual search task, where there is a single foil/distractor image that makes up all of the images in the set, with the exception of the target image if it is present.
|
||||
OR
|
||||
* The `stimuli` parameter: this array that can be used to present any arbitrary set of image files, with or without the target image, with any number of different foils/distractors, and with any number of repeated images.
|
||||
|
||||
The `target_present` and `fixation_image` parameters must always be specified. Other parameters can be left unspecified if the default value is acceptable.
|
||||
|
||||
| Parameter | Type | Default Value | Description |
|
||||
| ------------------ | --------------- | ------------- | ---------------------------------------- |
|
||||
| target_present | boolean | *undefined* | Is the target present? |
|
||||
| set_size | numeric | *undefined* | How many items should be displayed? |
|
||||
| target | string | *undefined* | Path to image file that is the search target. |
|
||||
| foil | string or array | *undefined* | Path to image file that is the foil/distractor. Can specify an array of distractors if the distractors are all different images. |
|
||||
| fixation_image | string | *undefined* | Path to image file that is a fixation target. |
|
||||
| target | string | null | Path to image file that is the search target. This parameter must specified when the stimuli set is defined using the `target`, `foil` and `set_size` parameters, but should NOT be specified when using the `stimuli` parameter. |
|
||||
| foil | string | null | Path to image file that is the foil/distractor. This image will be repeated for all distractors up to the `set_size` value. This parameter must specified when the stimuli set is defined using the `target`, `foil` and `set_size` parameters, but should NOT be specified when using the `stimuli` parameter. |
|
||||
| set_size | numeric | null | How many items should be displayed, including the target when `target_present` is `true`? The foil image will be repeated up to this value when `target_present` is `false`, or up to `set_size - 1` when `target_present` is `true`. This parameter must specified when using the `target`, `foil` and `set_size` parameters to define the stimuli set, but should NOT be specified when using the `stimuli` parameter. |
|
||||
| stimuli | array of images | null | Array containing all of the image files to be displayed. This parameter must be specified when NOT using the `target`, `foil`, and `set_size` parameters to define the stimuli set. |
|
||||
| target_present | boolean | *undefined* | Is the target present? This parameter must always be specified. When using the `target`, `foil` and `set_size` parameters, `false` means that the foil image will be repeated up to the set_size, and `true` means that the target will be presented along with the foil image repeated up to set_size - 1. When using the `stimuli` parameter, this parameter is only used to determine the response accuracy. |
|
||||
| fixation_image | string | *undefined* | Path to image file that is a fixation target. This parameter must always be specified. |
|
||||
| target_size | array | `[50, 50]` | Two element array indicating the height and width of the search array element images. |
|
||||
| fixation_size | array | `[16, 16]` | Two element array indicating the height and width of the fixation image. |
|
||||
| circle_diameter | numeric | 250 | The diameter of the search array circle in pixels. |
|
||||
@ -77,13 +83,11 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
|
||||
|
||||
var trial = {
|
||||
type: 'visual-search-circle',
|
||||
target: 'img/elephant.png',
|
||||
foil: ['img/lion.png', 'img/monkey.png'],
|
||||
stimuli: ['img/elephant.png', 'img/lion.png', 'img/monkey.png'],
|
||||
fixation_image: 'img/fixation.gif',
|
||||
target_present_key: 'e',
|
||||
target_absent_key: 'n',
|
||||
target_present: true,
|
||||
set_size: 3
|
||||
target_present: true
|
||||
}
|
||||
```
|
||||
|
||||
@ -92,4 +96,4 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
|
||||
<iframe src="/demos/jspsych-visual-search-circle-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-visual-search-circle-demo2.html">Open demo in new tab</a>
|
||||
<a target="_blank" rel="noopener noreferrer" href="/demos/jspsych-visual-search-circle-demo2.html">Open demo in new tab</a>
|
||||
|
||||
@ -30,7 +30,6 @@ Plugin | Description
|
||||
[jspsych‑instructions](/plugins/jspsych-instructions) | For displaying instructions to the subject. Allows the subject to navigate between pages of instructions using keys or buttons.
|
||||
[jspsych‑maxdiff](/plugins/jspsych-maxdiff) | Displays rows of alternatives to be selected for two mutually-exclusive categories, typically as 'most' or 'least' on a particular criteria (e.g. importance, preference, similarity). The participant responds by selecting one radio button corresponding to an alternative in both the left and right response columns.
|
||||
[jspsych‑preload](/plugins/jspsych-preload) | This plugin loads images, audio, and video files into the browser's memory before they are needed in the experiment, in order to improve stimulus and response timing, and to avoid disrupting the flow of the experiment.
|
||||
[jspsych‑rdk](/plugins/jspsych-rdk) | This plugin displays a Random Dot Kinematogram (RDK) and allows the subject to report the primary direction of motion by pressing a key on the keyboard.
|
||||
[jspsych‑reconstruction](/plugins/jspsych-reconstruction) | The subject interacts with a stimulus by modifying a parameter of the stimulus and observing the change in the stimulus in real-time.
|
||||
[jspsych‑resize](/plugins/jspsych-resize) | Calibrate the display so that materials display with a known physical size.
|
||||
[jspsych‑same‑different‑html](/plugins/jspsych-same-different-html) | A same-different judgment task. An HTML-formatted stimulus is shown, followed by a brief gap, and then another stimulus is shown. The subject indicates whether the stimuli are the same or different.
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../packages/jspsych/dist/index.browser.js"></script>
|
||||
<script src="../packages/plugin-rdk/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();
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
We would appreciate it if you cited this paper when you use the RDK:
|
||||
Rajananda, S., Lau, H. & Odegaard, B., (2018). A Random-Dot Kinematogram for Web-Based Vision Research. Journal of Open Research Software. 6(1), p.6. DOI: [http://doi.org/10.5334/jors.194]
|
||||
*/
|
||||
|
||||
//---------Create trials---------
|
||||
|
||||
// Create an array of 2 different trials (different conditions)
|
||||
var RDK_trials = [
|
||||
{ // Condition 1
|
||||
correct_choice: 'a', // The correct answer for Condition 1
|
||||
coherent_direction: 180 // The coherent direction for Condition 1 (dots move left)
|
||||
},
|
||||
{ // Condition 2
|
||||
correct_choice: 'l', // The correct answer for Condition 2
|
||||
coherent_direction: 0 // The coherent direction for Condition 2 (dots move right)
|
||||
},
|
||||
];
|
||||
|
||||
// The test block where all the trials are nested. The properties here will trickle down to all trials in the timeline unless they have their own properties defined
|
||||
var test_block = {
|
||||
type: jsPsychRdk,
|
||||
post_trial_gap: 500, // The Inter Trial Interval. You can either have no ITI, or have an ITI but change the display element to be the same color as the stimuli background to prevent flashing between trials
|
||||
number_of_dots: 200, // Total number of dots in each aperture
|
||||
RDK_type: 3, // The type of RDK used
|
||||
choices: ['a', 'l'], // Choices available to be keyed in by participant
|
||||
trial_duration: 1000, // Duration of each trial in ms
|
||||
timeline: RDK_trials, // The timeline of all the trials
|
||||
background_color: "white",
|
||||
dot_color: "black"
|
||||
};
|
||||
|
||||
//---------Run the experiment---------
|
||||
|
||||
jsPsych.run([test_block]);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
@ -27,6 +27,7 @@
|
||||
stimulus: '<p>You will see a set of Ns on the following screens. Press j if there is a backwards N. If there is no backwards N press f.</p><p>Press any key to begin.</p>'
|
||||
};
|
||||
|
||||
// examples using target, foil, and set_size parameters to define the visual search set
|
||||
var trial_1 = {
|
||||
target_present: true,
|
||||
set_size: 4
|
||||
@ -42,21 +43,23 @@
|
||||
set_size: 6
|
||||
};
|
||||
|
||||
var trial_4 = {
|
||||
target_present: false,
|
||||
foil: ['img/1.gif', 'img/2.gif', 'img/3.gif'], // example of using multiple foils.
|
||||
set_size: 3
|
||||
};
|
||||
|
||||
var trials = {
|
||||
type: jsPsychVisualSearchCircle,
|
||||
target: 'img/backwardN.gif',
|
||||
foil: 'img/normalN.gif',
|
||||
fixation_image: 'img/fixation.gif',
|
||||
timeline: [trial_1, trial_2, trial_3, trial_4]
|
||||
timeline: [trial_1, trial_2, trial_3]
|
||||
};
|
||||
|
||||
jsPsych.run([preload_images, intro, trials]);
|
||||
// example using arbitrary image array
|
||||
var trial_4 = {
|
||||
type: jsPsychVisualSearchCircle,
|
||||
stimuli: ['img/backwardN.gif', 'img/normalN.gif', 'img/1.gif', 'img/2.gif', 'img/3.gif'],
|
||||
fixation_image: 'img/fixation.gif',
|
||||
target_present: true
|
||||
};
|
||||
|
||||
jsPsych.run([preload_images, intro, trials, trial_4]);
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -89,7 +89,6 @@ nav:
|
||||
- 'jspsych-instructions': 'plugins/jspsych-instructions.md'
|
||||
- 'jspsych-maxdiff': 'plugins/jspsych-maxdiff.md'
|
||||
- 'jspsych-preload': 'plugins/jspsych-preload.md'
|
||||
- 'jspsych-rdk': 'plugins/jspsych-rdk.md'
|
||||
- 'jspsych-reconstruction': 'plugins/jspsych-reconstruction.md'
|
||||
- 'jspsych-resize': 'plugins/jspsych-resize.md'
|
||||
- 'jspsych-same-different-html': 'plugins/jspsych-same-different-html.md'
|
||||
|
||||
@ -3,16 +3,40 @@ import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
|
||||
const info = <const>{
|
||||
name: "visual-search-circle",
|
||||
parameters: {
|
||||
/** The target image to be displayed. */
|
||||
/** The target image to be displayed. This must specified when using the target, foil and set_size parameters to define the stimuli set, rather than the stimuli parameter. */
|
||||
target: {
|
||||
type: ParameterType.IMAGE,
|
||||
pretty_name: "Target",
|
||||
default: undefined,
|
||||
default: null,
|
||||
},
|
||||
/** Path to image file(s) that is/are the foils/distractors. */
|
||||
/** The image to use as the foil/distractor. This must specified when using the target, foil and set_size parameters to define the stimuli set, rather than the stimuli parameter. */
|
||||
foil: {
|
||||
type: ParameterType.IMAGE, // TO DO: another parameter that can either be an image path string or an array of image path strings. Require this to always be an array?
|
||||
type: ParameterType.IMAGE,
|
||||
pretty_name: "Foil",
|
||||
default: null,
|
||||
},
|
||||
/** How many items should be displayed, including the target when target_present is true? This must specified when using the target, foil and set_size parameters to define the stimuli set, rather than the stimuli parameter. */
|
||||
set_size: {
|
||||
type: ParameterType.INT,
|
||||
pretty_name: "Set size",
|
||||
default: null,
|
||||
},
|
||||
/** Array containing one or more image files to be displayed. This only needs to be specified when NOT using the target, foil, and set_size parameters to define the stimuli set. */
|
||||
stimuli: {
|
||||
type: ParameterType.IMAGE,
|
||||
pretty_name: "Stimuli",
|
||||
default: null,
|
||||
array: true,
|
||||
},
|
||||
/**
|
||||
* Is the target present?
|
||||
* When using the target, foil and set_size parameters, false means that the foil image will be repeated up to the set_size,
|
||||
* and if true, then the target will be presented along with the foil image repeated up to set_size - 1.
|
||||
* When using the stimuli parameter, this parameter is only used to determine the response accuracy.
|
||||
*/
|
||||
target_present: {
|
||||
type: ParameterType.BOOL,
|
||||
pretty_name: "Target present",
|
||||
default: undefined,
|
||||
},
|
||||
/** Path to image file that is a fixation target. */
|
||||
@ -21,18 +45,6 @@ const info = <const>{
|
||||
pretty_name: "Fixation image",
|
||||
default: undefined,
|
||||
},
|
||||
/** How many items should be displayed? */
|
||||
set_size: {
|
||||
type: ParameterType.INT,
|
||||
pretty_name: "Set size",
|
||||
default: undefined,
|
||||
},
|
||||
/** Is the target present? */
|
||||
target_present: {
|
||||
type: ParameterType.BOOL,
|
||||
pretty_name: "Target present",
|
||||
default: true,
|
||||
},
|
||||
/** Two element array indicating the height and width of the search array element images. */
|
||||
target_size: {
|
||||
type: ParameterType.INT,
|
||||
@ -115,9 +127,32 @@ class VisualSearchCirclePlugin implements JsPsychPlugin<Info> {
|
||||
Math.floor(paper_size / 2 - trial.fixation_size[1] / 2),
|
||||
];
|
||||
|
||||
// check for correct combination of parameters and create stimuli set
|
||||
var possible_display_locs: number;
|
||||
var to_present = [];
|
||||
if (trial.target !== null && trial.foil !== null && trial.set_size !== null) {
|
||||
possible_display_locs = trial.set_size;
|
||||
if (trial.target_present) {
|
||||
for (var i = 0; i < trial.set_size - 1; i++) {
|
||||
to_present.push(trial.foil);
|
||||
}
|
||||
to_present.push(trial.target);
|
||||
} else {
|
||||
for (var i = 0; i < trial.set_size; i++) {
|
||||
to_present.push(trial.foil);
|
||||
}
|
||||
}
|
||||
} else if (trial.stimuli !== null) {
|
||||
possible_display_locs = trial.stimuli.length;
|
||||
to_present = trial.stimuli;
|
||||
} else {
|
||||
console.error(
|
||||
"Error in visual-search-circle plugin: you must specify an array of images via the stimuli parameter OR specify the target, foil and set_size parameters."
|
||||
);
|
||||
}
|
||||
|
||||
// possible stimulus locations on the circle
|
||||
var display_locs = [];
|
||||
var possible_display_locs = trial.set_size;
|
||||
var random_offset = Math.floor(Math.random() * 360);
|
||||
for (var i = 0; i < possible_display_locs; i++) {
|
||||
display_locs.push([
|
||||
@ -139,18 +174,6 @@ class VisualSearchCirclePlugin implements JsPsychPlugin<Info> {
|
||||
'px"></div>';
|
||||
var paper = display_element.querySelector("#jspsych-visual-search-circle-container");
|
||||
|
||||
// check distractors - array?
|
||||
var foil_arr = [];
|
||||
if (!Array.isArray(trial.foil)) {
|
||||
const fa = [];
|
||||
for (var i = 0; i < trial.set_size; i++) {
|
||||
fa.push(trial.foil);
|
||||
}
|
||||
foil_arr = fa;
|
||||
} else {
|
||||
foil_arr = trial.foil;
|
||||
}
|
||||
|
||||
const show_fixation = () => {
|
||||
// show fixation
|
||||
//var fixation = paper.image(trial.fixation_image, fix_loc[0], fix_loc[1], trial.fixation_size[0], trial.fixation_size[1]);
|
||||
@ -192,14 +215,6 @@ class VisualSearchCirclePlugin implements JsPsychPlugin<Info> {
|
||||
show_fixation();
|
||||
|
||||
const show_search_array = () => {
|
||||
var search_array_images = [];
|
||||
|
||||
var to_present = [];
|
||||
if (trial.target_present) {
|
||||
to_present.push(trial.target);
|
||||
}
|
||||
to_present = to_present.concat(foil_arr);
|
||||
|
||||
for (var i = 0; i < display_locs.length; i++) {
|
||||
paper.innerHTML +=
|
||||
"<img src='" +
|
||||
|
||||
Loading…
Reference in New Issue
Block a user