Plugins for jspsych@6.1
This commit is contained in:
Etienne Gaudrain
14
README.md
14
README.md
@@ -4,3 +4,17 @@ Some plugins developed at dBSPLab for jsPsych 6. Mostly they concern audio prese
|
|||||||
|
|
||||||
Three versions of jsPsych are supported: 6.1, 6.2 and 6.3. We use branches to maintain
|
Three versions of jsPsych are supported: 6.1, 6.2 and 6.3. We use branches to maintain
|
||||||
the different versions.
|
the different versions.
|
||||||
|
|
||||||
|
## Plugins
|
||||||
|
|
||||||
|
We've implemented some generic methods for audio testing with jsPsych:
|
||||||
|
|
||||||
|
* A plugin to do alternative forced choice with sounds: [jspsych-audio-sequence-button-response](docs/jspsych-audio-sequence-button-response.md).
|
||||||
|
* A plugin to do extend `audio-keyboard-response`: [jspsych-audio-keyboard-response-wait](docs/jspsych-audio-keyboard-response-wait.md).
|
||||||
|
* A plugin to display a Coordinate Response Measure interface: [jspsych-crm](docs/jspsych-crm.md).
|
||||||
|
* A plugin to do display a loading spinner while waiting for a (possible async) function to complete: [jspsych-waitfor-function](docs/jspsych-waitfor-function.md).
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
|
||||||
|
* A function that generates timelines for adaptive testing using a nAFC interface: [jspsych-nafc-adaptive](docs/jspsych-nafc-adaptive.md).
|
||||||
|
* In `js/tools.js`, some globally useful functions are available.
|
||||||
|
|||||||
50
docs/jspsych-audio-keyboard-response-wait.md
Normal file
50
docs/jspsych-audio-keyboard-response-wait.md
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
# jspsych-audio-keyboard-response-wait
|
||||||
|
|
||||||
|
This plugin is similar to [jspsych-audio-keyboard-response](https://www.jspsych.org/plugins/jspsych-audio-keyboard-response/), but allows more control on when the trial stops.
|
||||||
|
|
||||||
|
This plugin plays audio files and records responses generated with the keyboard.
|
||||||
|
|
||||||
|
If the browser supports it, audio files are played using the WebAudio API. This allows for reasonably precise timing of the playback. The timing of responses generated is measured against the WebAudio specific clock, improving the measurement of response times. If the browser does not support the WebAudio API, then the audio file is played with HTML5 audio.
|
||||||
|
|
||||||
|
Audio files are automatically preloaded by jsPsych. However, if you are using timeline variables or another dynamic method to specify the audio stimulus you will need to [manually preload](https://www.jspsych.org/overview/media-preloading/#manual-preloading) the audio.
|
||||||
|
|
||||||
|
The trial can end when the subject responds, when the audio file has finished playing, or if the subject has failed to respond within a fixed length of time. In addition, the trial can end after the subject has responded *and* the audio file has finished playing if you want to make sure the subject always hears the stimulus completely. Once the subject pressed a key, following key presses are not registered anymore. It is possible to dim the interface to signify this to the participant.
|
||||||
|
|
||||||
|
## Parameters
|
||||||
|
|
||||||
|
Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
||||||
|
|
||||||
|
Parameter | Type | Default Value | Description
|
||||||
|
----------------|-------------------|---------------|------------
|
||||||
|
stimulus | string (audio) | undefined | The audio to be played.
|
||||||
|
choices | array of keycodes | ALL_KEYS | The keys the subject is allowed to press to respond to the stimulus.
|
||||||
|
prompt | string | null | This string can contain HTML markup. The intention is that it can be used to provide a reminder about the action the subject is supposed to take.
|
||||||
|
trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial, in milliseconds. If the subject fails to make a response before this timer is reached, the subject'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.
|
||||||
|
response_ends_trial | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until another condition ends the trial (either `trial_duration` or `trials_ends_after_audio`, but see `wait_for_audio`).
|
||||||
|
trial_ends_after_audio | boolean | false | If true, then the trial will end as soon as the audio file finishes playing.
|
||||||
|
wait_for_audio | boolean | false | If `response_ends_trial` is true, this will still wait for the audio to end before ending the trial.
|
||||||
|
dim_content_after_response | boolean | false | Will dim the content once the response has been given (a key has been pressed).
|
||||||
|
## Data Generated
|
||||||
|
|
||||||
|
In addition to the [default data collected by all plugins](overview#data-collected-by-plugins), this plugin collects the following data for each trial.
|
||||||
|
|
||||||
|
Name | Type | Value
|
||||||
|
-----|------|------
|
||||||
|
key_press | numeric | Indicates which key the subject pressed. The value is the [numeric key code](http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes) corresponding to the subject's response.
|
||||||
|
rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response.
|
||||||
|
stimulus | string | Path to the audio file that played during the trial.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
#### Plays a sound, and keeps playing until the end of the sound even if a response was given
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var trial = {
|
||||||
|
type: 'audio-keyboard-response-wait',
|
||||||
|
stimulus: 'sound/tone.mp3',
|
||||||
|
choices: ['e', 'i'],
|
||||||
|
prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>",
|
||||||
|
response_ends_trial: true.
|
||||||
|
wait_for_audio: true
|
||||||
|
};
|
||||||
|
```
|
||||||
82
docs/jspsych-audio-sequence-button-response.md
Normal file
82
docs/jspsych-audio-sequence-button-response.md
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
# jspsych-audio-sequence-button-response
|
||||||
|
|
||||||
|
This plugin plays a sequence of audio files, highlighting answer buttons as they are played.
|
||||||
|
|
||||||
|
This plugin is based on [jspsych-audio-button-response](https://www.jspsych.org/plugins/jspsych-audio-button-response/).
|
||||||
|
|
||||||
|
Audio files are automatically preloaded by jsPsych. However, if you are using timeline variables or another dynamic method to specify the audio stimulus you will need to manually preload the audio.
|
||||||
|
|
||||||
|
The trial can end when the subject responds, when the audio file has finished playing, or if the subject has failed to respond within a fixed length of time.
|
||||||
|
|
||||||
|
Note that the buttons are disabled during playing so the subject cannot press any button during that time.
|
||||||
|
|
||||||
|
## Parameters
|
||||||
|
|
||||||
|
Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
||||||
|
|
||||||
|
Parameter | Type | Default Value | Description
|
||||||
|
----------------|------------------|---------------|------------
|
||||||
|
stimuli | array of strings | undefined | An array listing the path (url) to the audio files to be played.
|
||||||
|
choices | array of strings | [] | Labels for the buttons. Each different string in the array will generate a different button. It is not absolutely mandatory, but it is probably a good idea to have this being the same length as `stimuli`.
|
||||||
|
button_html | HTML string | `'<button class="jspsych-btn">%choice%</button>'` | A template of HTML for generating the button elements. You can override this to create customized buttons of various kinds. The string `%choice%` will be changed to the corresponding element of the `choices` array. You may also specify an array of strings, if you need different HTML to render for each button. If you do specify an array, the `choices` array and this array must have the same length. The HTML from position 0 in the `button_html` array will be used to create the button for element 0 in the `choices` array, and so on.
|
||||||
|
prompt | string | null | This string can contain HTML markup. Any content here will be displayed below or above the stimulus (see `prompt_position`). The intention is that it can be used to provide a reminder about the action the subject is supposed to take.
|
||||||
|
prompt_position | string | `'bottom'` | The position of the prompt: `'bottom'` or `'above'`.
|
||||||
|
isi | numeric | 0 | Inter-stimulus-interval: The delay in between stimulus presentation (in ms).
|
||||||
|
trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject'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.
|
||||||
|
margin_vertical | string | `'0px'` | Vertical margin of the button(s).
|
||||||
|
margin_horizontal | string | `'8px'` | Horizontal margin of the button(s).
|
||||||
|
response_ends_trial | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter). If false, then the trial will continue until the value for `timing_response` is reached. You can use this parameter to force the subject to view a stimulus for a fixed amount of time, even if they respond before the time is complete.
|
||||||
|
trial_ends_after_audio | boolean | false | If true, then the trial will end as soon as the audio file finishes playing.
|
||||||
|
visual_feedback | boolean | false | If true, provides feedback after the subject gave their answer. If this is set to true, `i_correct` has to be also specified.
|
||||||
|
i_correct | numeric | null | The index of the choice that corresponds to the correct answer (for feedback, otherwise it is optional).
|
||||||
|
|
||||||
|
## Data Generated
|
||||||
|
|
||||||
|
In addition to the [default data collected by all plugins](https://www.jspsych.org/plugins/overview/#data-collected-by-plugins), this plugin collects the following data for each trial.
|
||||||
|
|
||||||
|
Name | Type | Value
|
||||||
|
-----|------|------
|
||||||
|
rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response.
|
||||||
|
stimuli | array of strings | The list of stimuli that was passed as parameter (just for convenience).
|
||||||
|
button_pressed | numeric | Indicates which button the subject pressed. The first button in the `choices` array is 0, the second is 1, and so on.
|
||||||
|
|
||||||
|
## Styling elements
|
||||||
|
|
||||||
|
### IDs
|
||||||
|
|
||||||
|
id | Description
|
||||||
|
-------------------------------------------|------------------------------------
|
||||||
|
`jspsych-audio-sequence-button-response-#` | Where `#` is the index of the choice. This is the div that is wrapping each response button (not the button itself).
|
||||||
|
|
||||||
|
|
||||||
|
### CSS Classes
|
||||||
|
|
||||||
|
Class | Description
|
||||||
|
-------------------------------------------|------------------------------------
|
||||||
|
jspsych-audio-button-response-btngroup | The `<div>` wrapping the button group.
|
||||||
|
jspsych-audio-sequence-button-response | This class is applied to the `<div>`s wrapping the buttons.
|
||||||
|
jspsych-prompt | The `<p>` that contains the prompt.
|
||||||
|
highlighted | The button inside the `<div>`s receive this class when the button is highlighted.
|
||||||
|
disabled | When the buttons are disabled. This is a class, for convenience, although attribute selector should also work `[disabled]`.
|
||||||
|
visual-feedback | This class is given to the button that represents the correct option, *after* the subject has given their answer.
|
||||||
|
correct, incorrect | One of these classes is given to the button that represents the correct option, depending on whether the subject's answer was correct or incorrect.
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
This plugin relies on [jQuery](https://jquery.com/). Note that this is not absolutely necessary, but it makes some things fail silently instead of raising errors. If you need this plugin without jQuery, you can easily
|
||||||
|
replace the jQuery syntax with standard Javascript DOM manipulation.
|
||||||
|
|
||||||
|
The animation of the visual feedback can make use of [Semantic UI's transitions](https://semantic-ui.com/modules/transition.html) ('bounce' for correct, 'shake' for incorrect). But if it's not available a simpler blink animation is implemented within this plugin.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
#### Three alternative forced choice (3AFC)
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var trial = {
|
||||||
|
type: 'audio-button-response',
|
||||||
|
stimuli: ['sound/bi.mp3', 'sound/ba.mp3', 'sound/bi.mp3'],
|
||||||
|
choices: ['1', '2', '3'],
|
||||||
|
prompt: "<p>Which one is different from the two others?</p>"
|
||||||
|
};
|
||||||
|
```
|
||||||
84
docs/jspsych-crm.md
Normal file
84
docs/jspsych-crm.md
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
# jspsych-crm
|
||||||
|
|
||||||
|
This plugin displays an interface for the Coordinate Response Measure [(Bolia _et al._, 2000)](https://doi.org/10.1121/1.428288). The interface is a grid where
|
||||||
|
each row corresponds to a color and each column corresponds to a number. The participants hear a sound and then can click on one of the cells to give their response.
|
||||||
|
|
||||||
|
The trial can end when the subject responds, when the audio file has finished playing, or if the subject has failed to respond within a fixed length of time.
|
||||||
|
|
||||||
|
Note that the buttons are disabled during playing so the subject cannot press any button during that time.
|
||||||
|
|
||||||
|
## Parameters
|
||||||
|
|
||||||
|
Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
||||||
|
|
||||||
|
Parameter | Type | Default Value | Description
|
||||||
|
----------------|------------------|---------------|------------
|
||||||
|
stimulus | string | undefined | The path (url) to the audio file to play.
|
||||||
|
colors | array of strings | undefined | Labels for the rows.
|
||||||
|
numbers | array | undefined | Labels for the columns (can be strings or plain numbers).
|
||||||
|
prompt | string | null | This string can contain HTML markup. Any content here will be displayed above the response grid. The intention is that it can be used to provide a reminder about the action the subject is supposed to take.
|
||||||
|
trial_duration | numeric | null | How long to wait for the subject to make a response before ending the trial in milliseconds. If the subject fails to make a response before this timer is reached, the subject'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.
|
||||||
|
response_ends_trial | boolean | true | If true, then the trial will end whenever the subject makes a response (assuming they make their response before the cutoff specified by the `trial_duration` parameter).
|
||||||
|
trial_ends_after_audio | boolean | false | If true, then the trial will end as soon as the audio file finishes playing.
|
||||||
|
visual_feedback | boolean | false | If true, provides feedback after the subject gave their answer. Visual feedback automatically ends the trial.
|
||||||
|
correct | object | undefined | An object containing the correct color and number (used to calculate the score and to provide feedback).
|
||||||
|
color_values | object | null | An object with keys corresponding to the `colors`, and containing a valid CSS color description. If left to `null`, some default colors are used (see below).
|
||||||
|
text_color_values | object | 'auto' | Same as `color_values` but for the text color of the cells. `'auto'` (the default) means that the text color is either black or white depending on the computed luminance of the background.
|
||||||
|
|
||||||
|
Default color values:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
color_values = {
|
||||||
|
red: "#ff3333",
|
||||||
|
blue: "#6b6bff",
|
||||||
|
green: "#80ee59",
|
||||||
|
yellow: "#ffe534",
|
||||||
|
pink: "#ff57df",
|
||||||
|
purple: "#a522ff",
|
||||||
|
brown: "#7a5630",
|
||||||
|
black: "#22222",
|
||||||
|
white: "#fcfcfc",
|
||||||
|
grey: "#8c8c8c",
|
||||||
|
gray: "#8c8c8c"
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
## Data Generated
|
||||||
|
|
||||||
|
In addition to the [default data collected by all plugins](https://www.jspsych.org/plugins/overview/#data-collected-by-plugins), this plugin collects the following data for each trial.
|
||||||
|
|
||||||
|
Name | Type | Value
|
||||||
|
---------|----------|------
|
||||||
|
rt | numeric | The response time in milliseconds for the subject to make a response. The time is measured from when the stimulus first appears on the screen until the subject's response.
|
||||||
|
stimulus | string | The stimulus that was passed as parameter (just for convenience).
|
||||||
|
response_color | string | Indicate which color was selected by the participant. `null` if not response was given.
|
||||||
|
response_number | string | Indicate which number was selected by the participant. `null` if not response was given.
|
||||||
|
correct_color | string | Indicate which color was the correct one (from `trial.correct`).
|
||||||
|
correct_number | string | Indicate which number was the correct one (from `trial.correct`).
|
||||||
|
|
||||||
|
## Styling elements
|
||||||
|
|
||||||
|
### IDs
|
||||||
|
|
||||||
|
id | Description
|
||||||
|
---------------------------------|------------------------------------
|
||||||
|
`jspsych-crm-buttons-container` | The `<div>` that wraps around the grid and prompt.
|
||||||
|
|
||||||
|
|
||||||
|
### Classes and elements
|
||||||
|
|
||||||
|
CSS selectors | Description
|
||||||
|
-------------------------------------------|------------------------------------
|
||||||
|
`table.jspsych-crm` | The grid containing the CRM buttons.
|
||||||
|
`table.jspsych-crm th` | The color labels on the sides of each row.
|
||||||
|
`table.jspsych-crm td` | The cells of the grid.
|
||||||
|
`.visual-feedback` | This class is given to the button that represents the correct option, *after* the subject has given their answer.
|
||||||
|
`.correct`, `.incorrect` | One of these classes is given to the button that represents the correct option, depending on whether the subject's answer was correct or incorrect.
|
||||||
|
`.crm-`*{color}* | Each element displayed in a color receives a class which is constructed from the name of the color.
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
This plugin relies on [jQuery](https://jquery.com/). Note that this is not absolutely necessary, but it makes some things fail silently instead of raising errors. If you need this plugin without jQuery, you can easily
|
||||||
|
replace the jQuery syntax with standard Javascript DOM manipulation.
|
||||||
|
|
||||||
|
The animation of the visual feedback can make use of [Semantic UI's transitions](https://semantic-ui.com/modules/transition.html) ('bounce' for correct, 'shake' for incorrect). But if it's not available a simpler blink animation is implemented within this plugin.
|
||||||
361
docs/jspsych-nafc-adaptive.md
Normal file
361
docs/jspsych-nafc-adaptive.md
Normal file
@@ -0,0 +1,361 @@
|
|||||||
|
# jspsych-nafc-adaptive
|
||||||
|
|
||||||
|
This is not a jsPsych plugin, but instead a module that generates a timeline for adaptive
|
||||||
|
tracking of a threshold using an odd-one-out task (nAFC).
|
||||||
|
|
||||||
|
An adaptive method is a method where each new set of stimuli in a trial is based on the
|
||||||
|
previous response(s). [Levitt (1971)](https://doi.org/10.1121/1.1912375) has described these
|
||||||
|
methods for auditory stimuli. In the case of a discrimination task, the difference between
|
||||||
|
a reference and test stimuli decreases progressively to reach a certain point of the psychometric
|
||||||
|
function. Rules to go up and down, i.e. increase or decrease the physical distance between
|
||||||
|
the reference and test are described in number of 'up' and 'down'. For instance, "2-down, 1-up"
|
||||||
|
means that the difference is decreased by a given step when two consecutive correct answers are given,
|
||||||
|
while the difference is increased as soon as one mistake is made. This yields a threshold corresponding
|
||||||
|
to 70.7%-correct. Adaptive procedures are meant to be a faster alternative to a *constant-stimuli* method.
|
||||||
|
|
||||||
|
The threshold is defined as the average difference over a number of "turn-points" or "reversals". A
|
||||||
|
turn-point occurs when a the difference was increasing and start decreasing, or vice-versa.
|
||||||
|
|
||||||
|
The procedure also stops after a number of turn-points.
|
||||||
|
|
||||||
|
Some adaptive procedures use a fixed step size. These generally end-up being almost as long as constant-stimuli
|
||||||
|
approaches. To benefit from the adaptiveness of the method, it is better to use an initial step that is
|
||||||
|
large, and then refine it when we get close to threshold. The method proposed here packs mechanisms
|
||||||
|
to do so.
|
||||||
|
|
||||||
|
A progress bar is shown per run. The progress is updated using the number of turn-points.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
To use it you'll need the following jsPsych dependencies included in your webpage (after adapting the path to wherever your Javascript files are):
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="/js/vendor/jspsych.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-instructions.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-waitfor-function.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-audio-sequence-button-response.js"></script>
|
||||||
|
<script src="/js/tools.js"></script>
|
||||||
|
<script src="/js/jspsych-nafc-adaptive.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
* `jspsych-audio-sequence-button-response.js` can be found [here](../plugins/jspsych-audio-sequence-button-response.js).
|
||||||
|
* `jspsych-waitfor-response.js` can be found [here](../plugins/jspsych-waitfor-response.js).
|
||||||
|
* `tools.js` can be found [here](../../js/tools.js).
|
||||||
|
|
||||||
|
`tools.js` defines new functions to `Array.prototype` to help some calculations of the threshold.
|
||||||
|
|
||||||
|
The module defines a single function called `nAFC_adapt` that generates a timeline. It is then used like
|
||||||
|
this in a `<script>` markup:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var options = ...;
|
||||||
|
var condition = "...";
|
||||||
|
var main_timeline = main_timeline.push( nAFC_adapt(options, condition) );
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: main_timeline,
|
||||||
|
display_element: 'jspsych-target',
|
||||||
|
show_progress_bar: true,
|
||||||
|
auto_update_progress_bar: false,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
The values of `options` and `condition` are described below.
|
||||||
|
|
||||||
|
## Options
|
||||||
|
|
||||||
|
Options is an object that contains all the parameters of the adaptive method.
|
||||||
|
|
||||||
|
Parameter | Type | Description
|
||||||
|
-------------------------------|------------------|-----------------------------
|
||||||
|
initial_step_size | numeric | The step-size at the beginning. Make it big to go down fast, but no so big that the learning curve is too steep for the subject.
|
||||||
|
starting_difference | numeric | The initial difference. Make it big too, so the first trials are dead obvious, but no so big that it'll take forever to get it to converge.
|
||||||
|
step_size_modifier | numeric | When we update the step-size, by how much do we do so? The modifier is multiplied to the previous step.
|
||||||
|
down_up | array of ints | An array of length 2. The first number is the number of correct responses needed to go down. The second number is the number of incorrect responses needed to go up.
|
||||||
|
terminate_on_nturns | int | We consider the procedure will have converged after this number of turn-points.
|
||||||
|
terminate_on_ntrials | int | This is a safety measure so that the procedure doesn't go on forever if the participant hears nothing... The procedure will stop, no matter what, after this many trials.
|
||||||
|
terminate_on_max_difference | numeric | Similar, but will stop the procedure when the we reach a difference larger or equal to this.
|
||||||
|
threshold_on_last_nturns | int | The number of turn-points used for the calculation of the threshold. This has to be smaller than `terminate_on_nturns`, and it is recommended to keep it even.
|
||||||
|
change_step_size_on_difference | numeric | Is used to determine when the step-size should be updated. When the current difference ≤ current step-size * `change_step_size_on_difference`, the step-size will be updated.
|
||||||
|
change_step_size_on_ntrials | int | We also change the step size every `change_step_size_on_ntrials`.
|
||||||
|
prompt | string | The prompt that is displayed above the buttons (e.g. "Click on the sound that is different from the others"). If `null` or unspecified, no prompt will be shown.
|
||||||
|
isi | int | The inter-stimulus-interval in milliseconds.
|
||||||
|
intervals | array of strings | An array of strings specifying the labels of the buttons shown on the screen.
|
||||||
|
prepare_trial | function | A callback function to prepare the stimuli for the next trial.
|
||||||
|
after_the_run | function | A callback function executed once the run is finished.
|
||||||
|
start_button | string | The label of the start button after the instructions.
|
||||||
|
opening_message | HTML string | The instructions before the first trial is presented. If `null` or omitted, this is skipped.
|
||||||
|
closing_message | HTML string | The closing message after the run is finished. If `null` or omitted, this is skipped.
|
||||||
|
visual_feedback | boolean | Wether visual feedback is used.
|
||||||
|
|
||||||
|
The callback functions are detailed below.
|
||||||
|
|
||||||
|
Here's an example:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var options = {
|
||||||
|
initial_step_size: 2,
|
||||||
|
starting_difference: 12,
|
||||||
|
step_size_modifier: 1/Math.sqrt(2),
|
||||||
|
down_up: [2, 1], // 2-down, 1-up => 70.7%
|
||||||
|
terminate_on_nturns: 8,
|
||||||
|
terminate_on_ntrials: 150,
|
||||||
|
terminate_on_max_difference: 25,
|
||||||
|
threshold_on_last_nturns: 6,
|
||||||
|
change_step_size_on_difference: 2,
|
||||||
|
change_step_size_on_ntrials: 15,
|
||||||
|
prompt: "Which of the three is different from the two others?",
|
||||||
|
isi: 500,
|
||||||
|
intervals: ['1', '2', '3'],
|
||||||
|
prepare_trial: prepare_trial, // function(last_trial, step, options, condition, done_cb())
|
||||||
|
after_the_run: send_data_securely_to_server, // function(options, condition, data, success_cb())
|
||||||
|
start_button: 'Beginnen',
|
||||||
|
opening_message: "<h1>Test</h1><p>You will hear three sounds. Choose the one that is different from the two others.</p>",
|
||||||
|
closing_message: "<h1>Thank you!</h1><p>This is the end of this block. Thank you for your help!</p>"
|
||||||
|
visual_feedback: true,
|
||||||
|
/* ------- You can also add yur custom options ------- */
|
||||||
|
sound_folder: 'CV/nl_nl',
|
||||||
|
sound_format: 'wav',
|
||||||
|
syllables: ["su", "si+", "po", "l@", "sa"],
|
||||||
|
ref_f0: 242
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### `prepare_trial()`
|
||||||
|
|
||||||
|
This callback is called before the trial is presented. It has the following signature:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function prepare_trial(last_trial, step, options, condition, done_cb) {
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
It receives the following arguments:
|
||||||
|
|
||||||
|
* `last_trial`: This is the data from the last 'audio-sequence-button-response' trial. It corresponds to:
|
||||||
|
`var last_trial = jsPsych.data.get().filter({trial_type: 'audio-sequence-button-response'}).last().values()[0];`.
|
||||||
|
|
||||||
|
It contains the following fields:
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
button_pressed: "2"
|
||||||
|
correct: false
|
||||||
|
difference: 12
|
||||||
|
i_correct: 1
|
||||||
|
internal_node_id: "0.0-0.0-1.0-1.0"
|
||||||
|
rt: 17810.014999995474
|
||||||
|
step: 0
|
||||||
|
stimuli: ["snd/a.mp3", "snd/b.mp3", "snd/c.mp3"]
|
||||||
|
time_elapsed: 22901
|
||||||
|
trial_definition: {df0: "12st", syllables: Array(3)}
|
||||||
|
trial_index: 2
|
||||||
|
trial_type: "audio-sequence-button-response"
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You can use these to construct the next trial. On the first trial, `last_trial` is `undefined`.
|
||||||
|
|
||||||
|
* `step`: This is the current, computed value for the trial we're preparing. That is, step size modifications have been applied and the sign determines whether we're going up or down.
|
||||||
|
You can compute the new value of the difference with: `var diff = options.current_difference + step;`. The reason we don't pass on the difference is because there may be reasons to alter the
|
||||||
|
step-size in the trial preparation process, or the difference may be quantised if we're dealing with a set of pre-computed stimuli. In other words, the actual difference may end up being different from
|
||||||
|
the value of `diff` as computed above. The actual value of the difference will be passed on to the `done_cb` callback within the `next_trial` structure (see below).
|
||||||
|
|
||||||
|
* `options`: The general options. It contains the parameters passed on to `nAFC_adapt`, including the custom ones, but also `current_difference`, which was the difference applied during the last trial (it is equal to `starting_difference` on the first trial).
|
||||||
|
|
||||||
|
* `condition`: You can use this field to specify the type of condition you're testing. For instance you can use a label to distinguish between a condition "A" and a condition "B", that then allows you to write a generic function for the preparation of all your stimuli, since most of the code would likely be the same for different conditions.
|
||||||
|
|
||||||
|
* `done_cb`: This is a callback with a single argument `next_trial` you need to call once your function's finished. If the function is synchronous, then just call it at the end. If it is asynchronous, you can pass that as callback to the asynchronous function. The function takes one argument: `next_trial`, which is an object with the following properties:
|
||||||
|
|
||||||
|
- `stimuli`: The list of sound files to load. Will be used to pre-load the stimuli before the trial begins.
|
||||||
|
- `i_correct`: The index of the correct response.
|
||||||
|
- `trial_definition`: The parameters that define the trial (can be anything, string, array, or object).
|
||||||
|
- `step`: The step used to create the new trial.
|
||||||
|
- `difference`: The difference used to create the new trial. This is used to update `options.current_difference`.
|
||||||
|
|
||||||
|
You have to prepare this object in your `prepare_trial` function and pass it to `done_cb` when you're done.
|
||||||
|
|
||||||
|
This callback is executed as the main function in a (`jspsych-waitfor-function`)[jspsych-waitfor-function.md] trial. That means a loader will be displayed on the page (for at least 1 s) while this is running.
|
||||||
|
|
||||||
|
### `after_the_run()`
|
||||||
|
|
||||||
|
This callback is called after a run is finished, i.e. after the procedure has converged and a threshold has been obtained, or when there's been too many trials, or a difference too large has been requested. You can use this to send data to the server. It has the following signature:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function after_the_run(options, condition, data, success_cb) {
|
||||||
|
...
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Here are the arguments:
|
||||||
|
|
||||||
|
* `options`: The general options.
|
||||||
|
|
||||||
|
* `condition`: The condition label (or definition).
|
||||||
|
|
||||||
|
* `data`: This is a jsPsych [DataCollection](https://www.jspsych.org/core_library/jspsych-data/#datacollection) object containing the trials of the run. At the end of the run, a new row is added with `type: 'threshold'`, containing the threshold information.
|
||||||
|
|
||||||
|
* `success_cb`: You have to call this callback once you're done. It takes no argument (or optionally some data you might want to add to the jsPsych experiment data). If the function is synchronous, just call it at the end of your function. If it runs asynchronously, pass the callback to your async function.
|
||||||
|
|
||||||
|
## Data
|
||||||
|
|
||||||
|
When a run is finished, the following data row is added to the jsPsych data collection:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
{
|
||||||
|
type: 'threshold',
|
||||||
|
threshold: thr, // this is the arithmetic mean of the turn-points, or NaN
|
||||||
|
geom_threshold: geom_thr, // this is the geometric mean of the turn-points, or NaN
|
||||||
|
reason: 'nturns', // the reason why the run ended, can be 'ntrials', 'max_difference'
|
||||||
|
steps: steps, // the list of steps
|
||||||
|
differences: differences, // the list of differences
|
||||||
|
condition: condition, // the condition label
|
||||||
|
corrects: corrects, // the list of responses
|
||||||
|
internal_node_id: data.last().select('internal_node_id').values[0] // The internal_node_id, this can be removed before transmission to server.
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Example
|
||||||
|
|
||||||
|
Here's a simplified example with some pseudo code so that you get an idea of how to implement this experiment. This is the code of the whole HTML file:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Required meta tags -->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Adaptive nAFC</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/css/semantic.css">
|
||||||
|
<script src="/css/semantic.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="/css/jspsych.css">
|
||||||
|
|
||||||
|
<script src="/js/vendor/jquery.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-instructions.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-waitfor-function.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-audio-sequence-button-response.js"></script>
|
||||||
|
<script src="/js/jspsych-nafc-adaptive.js"></script>
|
||||||
|
<script src="/js/tools.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="jspsych-target"></div>
|
||||||
|
<script>
|
||||||
|
function show_error_nAFC(msg){
|
||||||
|
$('#jspsych-target').append("<div class='ui error message'>"+msg+"</div>");
|
||||||
|
}
|
||||||
|
|
||||||
|
function send_nAFC_data(options, condition, data, success_cb)
|
||||||
|
{
|
||||||
|
var dat = {
|
||||||
|
exp_id: EXP_ID,
|
||||||
|
subject_id: SUBJECT_ID,
|
||||||
|
to: 'trial',
|
||||||
|
trial_id: TRIAL_ID+'/'+condition,
|
||||||
|
trial: data.values(),
|
||||||
|
response: jsPsych.data.get().filter({type: 'threshold'}).last().values()[0],
|
||||||
|
};
|
||||||
|
$.post({
|
||||||
|
url: "myserver.org/ajax/data-handler.php",
|
||||||
|
data: dat,
|
||||||
|
success: success_cb,
|
||||||
|
error: function(jqXHR, textStatus, errorThrown) {
|
||||||
|
show_error_nAFC(errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepare_trial(last_trial, step, options, condition, done){
|
||||||
|
|
||||||
|
// If this is the first time, `last_trial` will be undefined
|
||||||
|
|
||||||
|
var diff = options.current_difference + step;
|
||||||
|
|
||||||
|
// We can get some random stuff and access our custom options (see below)
|
||||||
|
var syllables = jsPsych.randomization.sampleWithoutReplacement(options.syllables, 3);
|
||||||
|
|
||||||
|
// We pre-allocate `new_trial`
|
||||||
|
var new_trial = {
|
||||||
|
stimuli: null,
|
||||||
|
i_correct: getRandomIntInclusive(0,options.intervals.length-1),
|
||||||
|
trial_definition: {
|
||||||
|
dim: diff,
|
||||||
|
condition: condition,
|
||||||
|
stimuli: syllables
|
||||||
|
}, // The parameters that define the trial
|
||||||
|
step: step, // Just in case we modified the provided step
|
||||||
|
difference: diff
|
||||||
|
};
|
||||||
|
|
||||||
|
// We need to prepare N stimuli, where one is the odd-one-out,
|
||||||
|
// based on diff. This can be done server side, with a callback.
|
||||||
|
$.post({
|
||||||
|
url: "myserver.org/prepare_stimuli.php",
|
||||||
|
data: new_trial,
|
||||||
|
success: function(dat) {
|
||||||
|
var files = JSON.parse(dat); // Assuming we're getting a list of files from server
|
||||||
|
new_trial.stimuli = files;
|
||||||
|
// We call 'done' to start the trial.
|
||||||
|
done(new_trial);
|
||||||
|
},
|
||||||
|
error: function(jqXHR, textStatus, errorThrown) {
|
||||||
|
show_error_nAFC(errorThrown);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
initial_step_size: 2,
|
||||||
|
starting_difference: 12,
|
||||||
|
step_size_modifier: 1/Math.sqrt(2),
|
||||||
|
down_up: [2, 1], // 2-down, 1-up => 70.7%
|
||||||
|
terminate_on_nturns: 8,
|
||||||
|
terminate_on_ntrials: 150,
|
||||||
|
terminate_on_max_difference: 25,
|
||||||
|
threshold_on_last_nturns: 6,
|
||||||
|
change_step_size_on_difference: 2,
|
||||||
|
change_step_size_on_ntrials: 15,
|
||||||
|
intervals: ['1', '2', '3'],
|
||||||
|
prepare_trial: prepare_trial,
|
||||||
|
after_the_run: send_nAFC_data, // function(data, success_cb())
|
||||||
|
start_button: 'Start',
|
||||||
|
prompt: "Which of the three is different from the two others?",
|
||||||
|
opening_message: "<h1>Test</h1><p>You will hear three sounds. Choose the one that is different from the two others.</p>",
|
||||||
|
closing_message: "<h1>Thank you!</h1><p>This is the end of this block. Thank you for your help!</p>",
|
||||||
|
isi: 500, // Note that the original experiment had more like 600ms
|
||||||
|
visual_feedback: true,
|
||||||
|
|
||||||
|
/* ------- Our custom options ------- */
|
||||||
|
sound_folder: 'CV/nl_nl',
|
||||||
|
sound_format: 'wav',
|
||||||
|
syllables: ["su", "si+", "po", "l@", "sa", "r3", "di", "f3", "ra", "t@", "pi", "ni+"]
|
||||||
|
};
|
||||||
|
|
||||||
|
// We do this to defer to when the document is ready
|
||||||
|
$(function(){
|
||||||
|
|
||||||
|
var main_timeline = [];
|
||||||
|
var conditions = ['A', 'B', 'C'];
|
||||||
|
|
||||||
|
// We create a run for each condition
|
||||||
|
for(c of conditions)
|
||||||
|
{
|
||||||
|
main_timeline.push( nAFC_adapt(options, c) );
|
||||||
|
}
|
||||||
|
|
||||||
|
// You can add other trials before or after the adaptive runs, here.
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: main_timeline,
|
||||||
|
display_element: 'jspsych-target',
|
||||||
|
show_progress_bar: true,
|
||||||
|
auto_update_progress_bar: false,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
61
docs/jspsych-waitfor-function.md
Normal file
61
docs/jspsych-waitfor-function.md
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
# jspsych-waitfor-function
|
||||||
|
|
||||||
|
This plugin executes a specified function and displays a spinning wheel while waiting for the function to complete.
|
||||||
|
This allows the experimenter to run arbitrary code at any point during the experiment.
|
||||||
|
|
||||||
|
The function cannot take any arguments. If arguments are needed, then an anonymous function should be used to wrap the function call (see examples below).
|
||||||
|
|
||||||
|
This plugin is based on [jspsych-call-function](https://www.jspsych.org/plugins/jspsych-call-function/).
|
||||||
|
|
||||||
|
## Parameters
|
||||||
|
|
||||||
|
Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
||||||
|
|
||||||
|
Parameter | Type | Default Value | Description
|
||||||
|
-------------|----------|---------------|------------
|
||||||
|
func | function | *undefined* | The function to call. See the `async` argument for details.
|
||||||
|
async | boolean | `false` | If set to true, `func` will be executed asynchoronously. In that case, the first argument passed to `func` is a callback that jsPsych will pass to it, and that you need to call when the async operation is complete. This callback can receive data as argument, that will be added to the trial's data. See example below.
|
||||||
|
min_duration | int | 0 | The spinner will be displayed *at least* this time. Value in milliseconds.
|
||||||
|
|
||||||
|
## Data Generated
|
||||||
|
|
||||||
|
In addition to the [default data collected by all plugins](https://www.jspsych.org/plugins/overview/#data-collected-by-plugins), this plugin collects the following data for each trial.
|
||||||
|
|
||||||
|
Name | Type | Value
|
||||||
|
-----|------|------
|
||||||
|
value | any | The return value of the called function.
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
The spinner is currently using Semantic UI's [loader](https://semantic-ui.com/elements/loader.html), so you need to add the related CSS (and its dependencies) to your page, or the whole Semantic CSS.
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
### Async function call
|
||||||
|
|
||||||
|
When doing an asynchronous function call, the function needs to take a argument that will be a callback function (called `done` in the example below),
|
||||||
|
and you need to execute that callback when the function is done doing its work:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
var trial = {
|
||||||
|
type: 'call-function',
|
||||||
|
async: true,
|
||||||
|
func: function(done){
|
||||||
|
// can perform async operations here like
|
||||||
|
// creating an XMLHttpRequest to communicate
|
||||||
|
// with a server
|
||||||
|
var xhttp = new XMLHttpRequest();
|
||||||
|
xhttp.onreadystatechange = function() {
|
||||||
|
if (this.readyState == 4 && this.status == 200) {
|
||||||
|
var response_data = xhttp.responseText;
|
||||||
|
// line below is what causes jsPsych to
|
||||||
|
// continue to next trial. response_data
|
||||||
|
// will be stored in jsPsych data object.
|
||||||
|
done(response_data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhttp.open("GET", "path_to_server_script.php", true);
|
||||||
|
xhttp.send();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
386
js/tools.js
Normal file
386
js/tools.js
Normal file
@@ -0,0 +1,386 @@
|
|||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* Various tools for experiments
|
||||||
|
*------------------------------------------------------------------------------
|
||||||
|
* Requires jQuery, Semantic UI modal and icon, and the dbsplab.fun DataHandler
|
||||||
|
* (only to check if the sound level adjustment has been done already).
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
function is_browser_compatible(){
|
||||||
|
// Add here everything that needs to be tested for browser compatibility
|
||||||
|
if( (new Audio()).canPlayType('audio/mp3') != 'probably' )
|
||||||
|
return false;
|
||||||
|
|
||||||
|
/*
|
||||||
|
if( (new Audio()).canPlayType('audio/mpeg') != 'probably' )
|
||||||
|
return false;
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
if( (new Audio()).canPlayType('audio/wav') != 'probably' )
|
||||||
|
return false;
|
||||||
|
if( (new Audio()).canPlayType('audio/flac') != 'probably' )
|
||||||
|
return false;
|
||||||
|
*/
|
||||||
|
return true;
|
||||||
|
|
||||||
|
// for of
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_error(msg, to="body", after=false)
|
||||||
|
{
|
||||||
|
if(after)
|
||||||
|
$("<div class='ui error message'>"+msg+"</div>").appendTo(to);
|
||||||
|
else
|
||||||
|
$("<div class='ui error message'>"+msg+"</div>").prependTo(to);
|
||||||
|
}
|
||||||
|
|
||||||
|
function sound_level_adjustment(sound_file, after_cb)
|
||||||
|
{
|
||||||
|
// Checks in the session if sound level adjustment has been performed for this
|
||||||
|
// experiment, and if not, shows a sound level adjustment dialog.
|
||||||
|
|
||||||
|
if(typeof after_cb==='undefined')
|
||||||
|
after_cb = function(){};
|
||||||
|
|
||||||
|
window.DataHandler.get_sound_level_adj(
|
||||||
|
// success
|
||||||
|
function(is_adjusted){
|
||||||
|
if(is_adjusted)
|
||||||
|
after_cb();
|
||||||
|
else
|
||||||
|
_make_sound_level_adjustment(sound_file, after_cb);
|
||||||
|
},
|
||||||
|
// error
|
||||||
|
show_error
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sound level adjustment dialog internationalisation
|
||||||
|
var SLADi18n = {};
|
||||||
|
SLADi18n['title'] = {};
|
||||||
|
SLADi18n['title']['fr'] = "Réglage du volume";
|
||||||
|
SLADi18n['title']['en'] = "Sound level adjustment";
|
||||||
|
SLADi18n['title']['nl'] = "Geluidsvolume";
|
||||||
|
SLADi18n['intro'] = {};
|
||||||
|
SLADi18n['intro']['fr'] = "Il est conseillé de completer cette expérience dans un <b>environnement calme</b>, et de préférence en utilisant un <b>casque de bonne qualité</b>. Ajustez le volume de votre ordinateur de façon à ce que le son soit présenté à un niveau confortable, et gardez le volume identique pendant toute la durée de l'expérience.";
|
||||||
|
SLADi18n['intro']['en'] = "You are kindly asked to perform this experiment in a <b>calm environment</b>, and preferably using <b>good quality headphones</b>. Adjust the sound level on your computer so that the sound plays at a comfortable level, and keep the volume the same during the whole experiment.";
|
||||||
|
SLADi18n['intro']['nl'] = "U wordt vriendelijk verzocht om dit experiment in een <b>stille omgeving</b> uit te voeren en bij voorkeur een <b>koptelefoon van goede kwaliteit</b> te gebruiken. Pas het geluidsvolume op uw computer aan zodat het geluid op een comfortabel niveau wordt afgespeeld, en verander het geluidsniveau verder niet meer gedurende het experiment.";
|
||||||
|
SLADi18n['loading'] = {};
|
||||||
|
SLADi18n['loading']['fr'] = "Chargement...";
|
||||||
|
SLADi18n['loading']['en'] = "Loading...";
|
||||||
|
SLADi18n['loading']['nl'] = "Bezig met laden...";
|
||||||
|
SLADi18n['when-ready'] = {};
|
||||||
|
SLADi18n['when-ready']['fr'] = "Quand vous êtes prêt.e, cliquez sur \"Continuer\".";
|
||||||
|
SLADi18n['when-ready']['en'] = "When you are ready, click on \"Continue\".";
|
||||||
|
SLADi18n['when-ready']['nl'] = "Als u klaar bent, klik je op \"Doorgaan\".";
|
||||||
|
SLADi18n['continue'] = {};
|
||||||
|
SLADi18n['continue']['fr'] = "Continuer";
|
||||||
|
SLADi18n['continue']['en'] = "Continue";
|
||||||
|
SLADi18n['continue']['nl'] = "Doorgaan";
|
||||||
|
|
||||||
|
function _make_sound_level_adjustment(sound_file, after_cb)
|
||||||
|
{
|
||||||
|
// The global LANG has to be defined
|
||||||
|
|
||||||
|
var eLANG = LANG;
|
||||||
|
// Fallback to English if lanugage is not supported
|
||||||
|
if(typeof SLADi18n['intro'][eLANG] === 'undefined'){
|
||||||
|
eLANG = 'en';
|
||||||
|
}
|
||||||
|
|
||||||
|
var snd;
|
||||||
|
var dialog = $(
|
||||||
|
"<div class='ui modal' id='sound_adjustment' style='max-width: 20em;'>"+
|
||||||
|
"<div class='header'>"+
|
||||||
|
SLADi18n['title'][eLANG]+
|
||||||
|
"</div>"+
|
||||||
|
"<div class='content'>"+
|
||||||
|
"<p>"+SLADi18n['intro'][eLANG]+"</p>"+
|
||||||
|
"<p style='text-align: center;'>"+
|
||||||
|
"<button class='ui huge icon button' id='play-pause'>"+
|
||||||
|
"<i class='asterisk loading icon'></i>"+
|
||||||
|
"</button>"+
|
||||||
|
"</p>"+
|
||||||
|
"</div>"+
|
||||||
|
"<div class='actions'>"+
|
||||||
|
"<button class='ui right labeled icon disabled ok button'>"+
|
||||||
|
"<i class='right arrow icon'></i>"+
|
||||||
|
SLADi18n['continue'][eLANG]+
|
||||||
|
"</button>"+
|
||||||
|
"</div>"+
|
||||||
|
"</div>").appendTo("body");
|
||||||
|
dialog.modal({
|
||||||
|
closable: false,
|
||||||
|
onApprove: function(elmt){
|
||||||
|
snd.pause();
|
||||||
|
snd = null;
|
||||||
|
},
|
||||||
|
onHidden: function(){
|
||||||
|
window.DataHandler.set_sound_level_adj(after_cb, show_error);
|
||||||
|
}
|
||||||
|
}).modal('show');
|
||||||
|
$("#sound_adjustment").css("max-width", "25em");
|
||||||
|
$("#sound_adjustment .content").css("box-sizing", "border-box");
|
||||||
|
|
||||||
|
function load_sound(snd_file)
|
||||||
|
{
|
||||||
|
snd = new Audio(snd_file);
|
||||||
|
snd.loop = true;
|
||||||
|
snd.autoplay = false;
|
||||||
|
snd.volume = 1;
|
||||||
|
|
||||||
|
snd.canplaythrough_1st = true;
|
||||||
|
|
||||||
|
snd.addEventListener("canplaythrough", function(){
|
||||||
|
if(this.canplaythrough_1st){
|
||||||
|
$('#play-pause i.icon').removeClass('asterisk loading').addClass("play");
|
||||||
|
$('#sound_adjustment').find(".ok.button").removeClass('disabled');
|
||||||
|
$('#play-pause').click(function() {
|
||||||
|
if($(this).children("i.icon").hasClass("play"))
|
||||||
|
snd.play();
|
||||||
|
else
|
||||||
|
snd.pause();
|
||||||
|
$(this).children("i.icon").toggleClass("play pause");
|
||||||
|
});
|
||||||
|
this.canplaythrough_1st = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
snd.load();
|
||||||
|
}
|
||||||
|
|
||||||
|
if(typeof sound_file === 'string' || sound_file instanceof String)
|
||||||
|
{
|
||||||
|
load_sound(sound_file);
|
||||||
|
}
|
||||||
|
else if(typeof sound_file === 'object')
|
||||||
|
{
|
||||||
|
// This must be VT query
|
||||||
|
vt(sound_file, load_sound, show_error);
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
show_error("The sound that was passed for adjustment is not valid...: "+sound_file);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Some polyfills for IE
|
||||||
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
|
||||||
|
if(!String.prototype.startsWith) {
|
||||||
|
Object.defineProperty(String.prototype, 'startsWith', {
|
||||||
|
value: function(search, rawPos) {
|
||||||
|
var pos = rawPos > 0 ? rawPos|0 : 0;
|
||||||
|
return this.substring(pos, pos + search.length) === search;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign
|
||||||
|
if(!Math.sign) {
|
||||||
|
Math.sign = function(x) {
|
||||||
|
return ((x > 0) - (x < 0)) || +x;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.fill) {
|
||||||
|
Object.defineProperty(Array.prototype, 'fill', {
|
||||||
|
value: function(value) {
|
||||||
|
|
||||||
|
// Steps 1-2.
|
||||||
|
if(this == null) {
|
||||||
|
throw new TypeError('this is null or not defined');
|
||||||
|
}
|
||||||
|
|
||||||
|
var O = Object(this);
|
||||||
|
|
||||||
|
// Steps 3-5.
|
||||||
|
var len = O.length >>> 0;
|
||||||
|
|
||||||
|
// Steps 6-7.
|
||||||
|
var start = arguments[1];
|
||||||
|
var relativeStart = start >> 0;
|
||||||
|
|
||||||
|
// Step 8.
|
||||||
|
var k = relativeStart < 0 ?
|
||||||
|
Math.max(len + relativeStart, 0) :
|
||||||
|
Math.min(relativeStart, len);
|
||||||
|
|
||||||
|
// Steps 9-10.
|
||||||
|
var end = arguments[2];
|
||||||
|
var relativeEnd = end === undefined ?
|
||||||
|
len : end >> 0;
|
||||||
|
|
||||||
|
// Step 11.
|
||||||
|
var finalValue = relativeEnd < 0 ?
|
||||||
|
Math.max(len + relativeEnd, 0) :
|
||||||
|
Math.min(relativeEnd, len);
|
||||||
|
|
||||||
|
// Step 12.
|
||||||
|
while(k < finalValue) {
|
||||||
|
O[k] = value;
|
||||||
|
k++;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Step 13.
|
||||||
|
return O;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Some utility functions
|
||||||
|
|
||||||
|
function getRandomIntInclusive(min, max) {
|
||||||
|
min = Math.ceil(min);
|
||||||
|
max = Math.floor(max);
|
||||||
|
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.min){
|
||||||
|
Array.prototype.min = function() {
|
||||||
|
if(this.length==0)
|
||||||
|
return null;
|
||||||
|
return this.reduce(function(m,v){ return (v<m)?v:m; }, +Infinity);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.min already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.max){
|
||||||
|
Array.prototype.max = function() {
|
||||||
|
if(this.length==0)
|
||||||
|
return null;
|
||||||
|
return this.reduce(function(m,v){ return (v>m)?v:m; }, -Infinity);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.max already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.diff){
|
||||||
|
Array.prototype.diff = function() {
|
||||||
|
var a = [];
|
||||||
|
for(var i = 0; i < this.length - 1; i++) {
|
||||||
|
a.push(this[i + 1] - this[i])
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.diff already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.sum){
|
||||||
|
Array.prototype.sum = function() {
|
||||||
|
return this.reduce(function(S, v) {
|
||||||
|
return S + v;
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.sum already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.mean){
|
||||||
|
Array.prototype.mean = function() {
|
||||||
|
return this.sum() / this.length;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.mean already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.findIndices){
|
||||||
|
Array.prototype.findIndices = function(cnd) {
|
||||||
|
return this.reduce(function(a, v, i) {
|
||||||
|
if(cnd(v)) {
|
||||||
|
a.push(i);
|
||||||
|
};
|
||||||
|
return a;
|
||||||
|
}, []);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.findIndices already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.select){
|
||||||
|
Array.prototype.select = function(idx) {
|
||||||
|
var a = []
|
||||||
|
for(var i of idx){
|
||||||
|
a.push(this[i]);
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.select already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.non_zero){
|
||||||
|
Array.prototype.non_zero = function() {
|
||||||
|
return this.filter(function(x) { return x != 0; });
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.non_zero already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.prototype.frequencies){
|
||||||
|
// Adapted from jsPsych DataColumn
|
||||||
|
Array.prototype.frequencies = function() {
|
||||||
|
return this.reduce(function(unique, v){
|
||||||
|
if(typeof unique[v] == 'undefined') {
|
||||||
|
unique[v] = 1;
|
||||||
|
} else {
|
||||||
|
unique[v]++;
|
||||||
|
}
|
||||||
|
return unique;
|
||||||
|
}, {});
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.prototype.frequencies already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.range) {
|
||||||
|
Array.range = function(arg1, arg2=null, step = 1) {
|
||||||
|
if(arg2===null) {
|
||||||
|
start = 0;
|
||||||
|
stop = arg1;
|
||||||
|
} else {
|
||||||
|
start = arg1;
|
||||||
|
stop = arg2;
|
||||||
|
}
|
||||||
|
return Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.warn("Array.range already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!Array.linspace) {
|
||||||
|
Array.linspace = function(start, end, n){
|
||||||
|
var a = [];
|
||||||
|
var step = (end-start)/n;
|
||||||
|
for(var i=0; i<n; i++){
|
||||||
|
a.push(start+step*i);
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
console.warn("Array.range already exists! Its definition may not correspond to what was intended.");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if(!Array.prototype.keys){
|
||||||
|
Array.prototype.keys = function() {
|
||||||
|
// Not an iterator, but good enough
|
||||||
|
return Array.range(this.length);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function stringToIntArray(s){
|
||||||
|
var a = new Array();
|
||||||
|
for(var i=0; i<s.length; i++){
|
||||||
|
a.push(s.charCodeAt(i));
|
||||||
|
}
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!console) {
|
||||||
|
console.log = function(){};
|
||||||
|
console.warn = function(){};
|
||||||
|
}
|
||||||
397
jspsych-nafc-adaptive.js
Executable file
397
jspsych-nafc-adaptive.js
Executable file
@@ -0,0 +1,397 @@
|
|||||||
|
/*------------------------------------------------------------------------------
|
||||||
|
* n-AFC Adaptive Task generic for jsPsych
|
||||||
|
*------------------------------------------------------------------------------
|
||||||
|
* This template requires the jspsych-audio-sequence-button-response plugin.
|
||||||
|
*------------------------------------------------------------------------------
|
||||||
|
* Author: Etienne Gaudrain <etienne.gaudrain@cnrs.fr>
|
||||||
|
* 2020-05-19: Fixed some typos
|
||||||
|
* 2020-12-08: Fixed threshold calculation
|
||||||
|
*----------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
/* To use, you need to include the following in your webpage:
|
||||||
|
<script src="/js/vendor/jspsych.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-instructions.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-waitfor-function.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-audio-sequence-button-response.js"></script>
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Here's an example for next_trial:
|
||||||
|
function prepare_trial(last_trial, step, options, condition, done){
|
||||||
|
var diff = last_trial.trial_definition.f0 + step;
|
||||||
|
var new_trial = {
|
||||||
|
stimuli: null,
|
||||||
|
i_correct: getRandomIntInclusive(0,3),
|
||||||
|
trial_definition: {f0: diff+"st"}, // The parameters that define the trial
|
||||||
|
step: step, // Just in case we modified the provided step
|
||||||
|
difference: diff
|
||||||
|
};
|
||||||
|
async_generate_stimuli(function(){
|
||||||
|
new_trial.stimuli = ['blah', 'blah', 'blih'];
|
||||||
|
done(new_trial);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function send_data_securely_to_server(data){
|
||||||
|
console.log(data.last().values().json());
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* Here's an example for options:
|
||||||
|
var options = {
|
||||||
|
initial_step_size: 2,
|
||||||
|
starting_difference: 12,
|
||||||
|
step_size_modifier: 1/Math.sqrt(2),
|
||||||
|
down_up: [2, 1], // 2-down, 1-up => 70.7%
|
||||||
|
terminate_on_nturns: 8,
|
||||||
|
terminate_on_ntrials: 150,
|
||||||
|
terminate_on_max_difference: 25,
|
||||||
|
threshold_on_last_nturns: 6,
|
||||||
|
change_step_size_on_difference: 2,
|
||||||
|
change_step_size_on_ntrials: 15,
|
||||||
|
prompt: "Which of the three is different from the two others?",
|
||||||
|
isi: 250,
|
||||||
|
intervals: ['1', '2', '3'],
|
||||||
|
prepare_trial: prepare_trial,
|
||||||
|
after_the_run: send_data_securely_to_server, // function(options, condition, data, success_cb())
|
||||||
|
start_button: 'Beginnen',
|
||||||
|
opening_message: "<h1>Test</h1><p>You will hear three sounds. Choose the one that is different from the two others.</p>",
|
||||||
|
closing_message: "<h1>Thank you!</h1><p>This is the end of this block. Thank you for your help!</p>"
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
|
// This relies on some tools and polyfills that are in /js/tools.js
|
||||||
|
|
||||||
|
function nAFC_adapt(opts, condition) {
|
||||||
|
// This generates trials for one "condition", that is a whole run that leads
|
||||||
|
// to a threshold.
|
||||||
|
//
|
||||||
|
// `options` defines the parameters of the AFC
|
||||||
|
// `condition` defines the condition along which the parameters are being adapted.
|
||||||
|
|
||||||
|
var options = jsPsych.utils.deepCopy(opts);
|
||||||
|
|
||||||
|
// Mandatory arguments in options
|
||||||
|
var mand_opts = ['initial_step_size', 'starting_difference', 'down_up', 'terminate_on_nturns',
|
||||||
|
'terminate_on_ntrials', 'terminate_on_max_difference', 'threshold_on_last_nturns', 'step_size_modifier', 'change_step_size_on_difference',
|
||||||
|
'change_step_size_on_ntrials', 'intervals', 'prepare_trial'
|
||||||
|
];
|
||||||
|
for(var k of mand_opts) {
|
||||||
|
if(!(k in options)) {
|
||||||
|
throw "nAFC_adapt: " + k + " is a mandatory option to provide.";
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(typeof options.opening_message === 'undefined')
|
||||||
|
options.opening_message = null;
|
||||||
|
if(typeof options.closing_message === 'undefined')
|
||||||
|
options.closing_message = null;
|
||||||
|
if(typeof options.prompt === 'undefined')
|
||||||
|
options.prompt = null;
|
||||||
|
if(typeof options.isi === 'undefined')
|
||||||
|
options.isi = 0;
|
||||||
|
if(typeof options.after_the_run === 'undefined')
|
||||||
|
options.after_the_run = function(dat, done){ done(); };
|
||||||
|
|
||||||
|
options.current_step = 0;
|
||||||
|
options.current_step_size = options.initial_step_size;
|
||||||
|
options.current_difference = options.starting_difference;
|
||||||
|
options.change_step_size_on_ntrials_counter = 0;
|
||||||
|
|
||||||
|
function is_correct(t) {
|
||||||
|
return parseInt(t.button_pressed) == t.i_correct;
|
||||||
|
}
|
||||||
|
|
||||||
|
function whereto_next(last_trials) {
|
||||||
|
// This returns the new step based on the last n trials.
|
||||||
|
|
||||||
|
if(typeof whereto_next.v === 'undefined')
|
||||||
|
whereto_next.v = [];
|
||||||
|
|
||||||
|
whereto_next.v.push(last_trials.slice(-1)[0].correct);
|
||||||
|
|
||||||
|
// We go neither up nor down
|
||||||
|
var step = 0;
|
||||||
|
|
||||||
|
console.log("---------------------- WHERE TO NEXT?");
|
||||||
|
console.log(whereto_next.v);
|
||||||
|
|
||||||
|
options.change_step_size_on_ntrials_counter++;
|
||||||
|
|
||||||
|
// Are we going down?
|
||||||
|
//if(typeof last_trials[last_trials.length - options.down_up[0]] !== 'undefined') {
|
||||||
|
if(whereto_next.v.length >= options.down_up[0] && whereto_next.v.slice(-options.down_up[0]).every(Boolean)) {
|
||||||
|
// We're goin' down!
|
||||||
|
if(options.current_difference - options.current_step_size <= 0)
|
||||||
|
options.current_step_size = options.current_difference / 2;
|
||||||
|
else if(options.current_difference <= options.current_step_size * options.change_step_size_on_difference ||
|
||||||
|
options.change_step_size_on_ntrials_counter == options.change_step_size_on_ntrials) {
|
||||||
|
options.current_step_size = options.current_step_size * options.step_size_modifier;
|
||||||
|
options.change_step_size_on_ntrials_counter = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
step = -options.current_step_size;
|
||||||
|
|
||||||
|
console.log("WE'RE GOIN' DOWN!");
|
||||||
|
|
||||||
|
whereto_next.v = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Are we going up?
|
||||||
|
//if(typeof last_trials[last_trials.length - options.down_up[1]] !== 'undefined') {
|
||||||
|
else if(whereto_next.v.length >= options.down_up[1] && whereto_next.v.slice(-options.down_up[1]).every(function(t) { return !t; })) {
|
||||||
|
// We're goin' up!
|
||||||
|
if(options.current_difference <= options.current_step_size * options.change_step_size_on_difference ||
|
||||||
|
options.change_step_size_on_ntrials_counter == options.change_step_size_on_ntrials) {
|
||||||
|
options.current_step_size = options.current_step_size * options.step_size_modifier;
|
||||||
|
options.change_step_size_on_ntrials_counter = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
step = options.current_step_size;
|
||||||
|
|
||||||
|
console.log("WE'RE GOIN' UP!");
|
||||||
|
|
||||||
|
whereto_next.v = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
else {
|
||||||
|
console.log("WE'RE GOIN' NOWHERE!");
|
||||||
|
}
|
||||||
|
|
||||||
|
if(options.change_step_size_on_ntrials_counter == options.change_step_size_on_ntrials) {
|
||||||
|
options.change_step_size_on_ntrials_counter = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
return step;
|
||||||
|
}
|
||||||
|
|
||||||
|
function do_we_keep_going(data) {
|
||||||
|
// Data is a jsPsych DataCollection that contains all the audio-sequence-button-response trials so far
|
||||||
|
// returns true to continue, and false to stop
|
||||||
|
// When we stop we insert a new row in the data collection containing the threshold or the reason why we stopped
|
||||||
|
|
||||||
|
var steps = data.select('step').values;
|
||||||
|
steps.push(options.current_step);
|
||||||
|
var differences = data.select('difference').values;
|
||||||
|
// The current difference hasn't been computed yet, this happens prepare_trial(), so we add the likely next value
|
||||||
|
differences.push(options.current_difference + options.current_step);
|
||||||
|
|
||||||
|
if(data.count() >= options.terminate_on_ntrials) {
|
||||||
|
|
||||||
|
jsPsych.setProgressBar(1);
|
||||||
|
var corrects = data.select('correct').values;
|
||||||
|
jsPsych.data.get().push({
|
||||||
|
type: 'threshold',
|
||||||
|
threshold: NaN,
|
||||||
|
geom_threshold: NaN,
|
||||||
|
reason: 'ntrials',
|
||||||
|
steps: steps,
|
||||||
|
differences: differences,
|
||||||
|
condition: condition,
|
||||||
|
corrects: corrects,
|
||||||
|
internal_node_id: data.last().select('internal_node_id').values[0]
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
|
||||||
|
} else if(differences.slice(-1)[0]>options.terminate_on_max_difference) {
|
||||||
|
|
||||||
|
jsPsych.setProgressBar(1);
|
||||||
|
var corrects = data.select('correct').values;
|
||||||
|
jsPsych.data.get().push({
|
||||||
|
type: 'threshold',
|
||||||
|
threshold: NaN,
|
||||||
|
geom_threshold: NaN,
|
||||||
|
reason: 'max_difference',
|
||||||
|
steps: steps,
|
||||||
|
differences: differences,
|
||||||
|
condition: condition,
|
||||||
|
corrects: corrects,
|
||||||
|
internal_node_id: data.last().select('internal_node_id').values[0]
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
var snnsd = steps.non_zero().map(Math.sign).diff().non_zero();
|
||||||
|
nturns = snnsd.length;
|
||||||
|
|
||||||
|
console.log("---------------------- DO WE KEEP GOIN'?");
|
||||||
|
console.log("Corrects: ["+data.select('correct').values+"]");
|
||||||
|
console.log("steps: ["+steps+"]");
|
||||||
|
console.log("steps!=0: ["+steps.non_zero()+"]");
|
||||||
|
console.log("sign(steps!=0): ["+steps.non_zero().map(Math.sign)+"]");
|
||||||
|
console.log("diff(sign(steps!=0)): ["+steps.non_zero().map(Math.sign).diff()+"]");
|
||||||
|
console.log("snnsd: ["+snnsd+"]");
|
||||||
|
console.log("nturns:"+nturns);
|
||||||
|
|
||||||
|
jsPsych.setProgressBar(nturns/options.terminate_on_nturns);
|
||||||
|
|
||||||
|
if(nturns >= options.terminate_on_nturns) {
|
||||||
|
// That's a nice way of ending... Let's calculate the threshold
|
||||||
|
|
||||||
|
var i_nz = steps.findIndices(function(x) { return x != 0; });
|
||||||
|
// EG: 2020-12-07, correcting stupid mistake
|
||||||
|
//var i_tp = i_nz.filter(function(x, i) { return snnsd[i] != 0; });
|
||||||
|
var i_d = steps.non_zero().map(Math.sign).diff().findIndices(function(x) { return x != 0; });
|
||||||
|
var i_tp = i_nz.select(i_d);
|
||||||
|
// -- end edit 2020-12-07
|
||||||
|
i_tp.push(differences.length - 1);
|
||||||
|
i_tp = i_tp.slice(-options.threshold_on_last_nturns);
|
||||||
|
|
||||||
|
var corrects = data.select('correct').values;
|
||||||
|
|
||||||
|
thr = differences.select(i_tp).mean();
|
||||||
|
geom_thr = Math.exp(differences.select(i_tp).map(Math.log).mean());
|
||||||
|
|
||||||
|
jsPsych.data.get().push({
|
||||||
|
type: 'threshold',
|
||||||
|
threshold: thr,
|
||||||
|
geom_threshold: geom_thr,
|
||||||
|
reason: 'nturns',
|
||||||
|
steps: steps,
|
||||||
|
differences: differences,
|
||||||
|
condition: condition,
|
||||||
|
corrects: corrects,
|
||||||
|
internal_node_id: data.last().select('internal_node_id').values[0]
|
||||||
|
});
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make an adaptive run based on a condition
|
||||||
|
|
||||||
|
var run_timeline = [];
|
||||||
|
|
||||||
|
if(options.opening_message != null) {
|
||||||
|
run_timeline.push({
|
||||||
|
type: 'instructions',
|
||||||
|
pages: [
|
||||||
|
options.opening_message
|
||||||
|
],
|
||||||
|
show_clickable_nav: true,
|
||||||
|
button_label_next: options.start_button,
|
||||||
|
allow_backward: false,
|
||||||
|
on_start: function(){
|
||||||
|
jsPsych.setProgressBar(0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//var ExpState = { N: 0 };
|
||||||
|
|
||||||
|
var t = {
|
||||||
|
timeline: [{
|
||||||
|
type: 'waitfor-function',
|
||||||
|
func: function(done) {
|
||||||
|
//var files = ['/audio/Beer.wav', '/audio/Beer.wav', '/audio/Beer.wav'];
|
||||||
|
//ExpState.files = files;
|
||||||
|
|
||||||
|
var last_trial = jsPsych.data.get().filter({trial_type: 'audio-sequence-button-response'}).last().values()[0];
|
||||||
|
|
||||||
|
// prepare_trial is a user provided function that expects the following arguments:
|
||||||
|
// last_trial: the last trial
|
||||||
|
// step: the new step that needs applying
|
||||||
|
// options: all the options
|
||||||
|
// condition: a definition of the condition we're in
|
||||||
|
// success_callback: the function that will be called upon success, which takes the new trial definition
|
||||||
|
// new_trial has the following keys:
|
||||||
|
// stimuli: the list of sound files to load
|
||||||
|
// i_correct: the index of the correct response
|
||||||
|
// trial_definition: the parameters that define the trial
|
||||||
|
// step: the step used to create the new trial
|
||||||
|
// difference: the difference used to create the new trial
|
||||||
|
|
||||||
|
options.prepare_trial(
|
||||||
|
last_trial, options.current_step, options, condition,
|
||||||
|
function(new_trial) {
|
||||||
|
options.current_difference = new_trial.difference;
|
||||||
|
jsPsych.pluginAPI.preloadAudioFiles(new_trial.stimuli, function() {
|
||||||
|
done(new_trial);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
async: true,
|
||||||
|
min_duration: 1000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'audio-sequence-button-response',
|
||||||
|
stimuli: function() {
|
||||||
|
return jsPsych.data.getLastTrialData().values()[0].value.stimuli;
|
||||||
|
},
|
||||||
|
data: function() {
|
||||||
|
return jsPsych.data.getLastTrialData().values()[0].value;
|
||||||
|
},
|
||||||
|
trial_ends_after_audio: false,
|
||||||
|
i_correct: function() {
|
||||||
|
return jsPsych.data.getLastTrialData().values()[0].value.i_correct;
|
||||||
|
},
|
||||||
|
visual_feedback: options.visual_feedback,
|
||||||
|
button_html: "<button class='jspsych-btn afc-btn'>%choice%</button>",
|
||||||
|
choices: options.intervals,
|
||||||
|
prompt: options.prompt,
|
||||||
|
prompt_position: 'top',
|
||||||
|
isi: options.isi,
|
||||||
|
on_finish: function(data) {
|
||||||
|
data.correct = is_correct(data);
|
||||||
|
console.log("Correct? "+data.correct);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
loop_function: function(data) {
|
||||||
|
// If only we had access to the current nodeID, things would be a bit simpler... but we'll hack something
|
||||||
|
|
||||||
|
var last_trial_node_id = jsPsych.data.getLastTrialData().select('internal_node_id').values[0];
|
||||||
|
var the_node_id_we_want = last_trial_node_id.split('-').slice(0,-2).join("-");
|
||||||
|
|
||||||
|
options.current_step = whereto_next(jsPsych.data.get().filter({trial_type: 'audio-sequence-button-response'}).last(Math.max(options.down_up[0], options.down_up[1]) + 1).values());
|
||||||
|
|
||||||
|
return do_we_keep_going(jsPsych.data.getDataByTimelineNode(the_node_id_we_want).filter({ trial_type: 'audio-sequence-button-response' }));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
run_timeline.push(t);
|
||||||
|
|
||||||
|
// To save the data... would be better suited for on_finish, but we need async
|
||||||
|
run_timeline.push({
|
||||||
|
type: 'waitfor-function',
|
||||||
|
func: function(done) {
|
||||||
|
var last_trial_node_id = jsPsych.data.getLastTrialData().select('internal_node_id').values[0];
|
||||||
|
var the_node_id_we_want = last_trial_node_id.split('-').slice(0,-2).join("-");
|
||||||
|
|
||||||
|
options.after_the_run(options, condition, jsPsych.data.getDataByTimelineNode(the_node_id_we_want), done);
|
||||||
|
},
|
||||||
|
async: true,
|
||||||
|
min_duration: 0
|
||||||
|
});
|
||||||
|
|
||||||
|
if(options.closing_message != null) {
|
||||||
|
run_timeline.push({
|
||||||
|
type: 'instructions',
|
||||||
|
pages: [
|
||||||
|
options.closing_message
|
||||||
|
],
|
||||||
|
show_clickable_nav: true,
|
||||||
|
button_label_next: 'OK',
|
||||||
|
allow_backward: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
run_timeline.push({
|
||||||
|
type: 'instructions',
|
||||||
|
pages: [
|
||||||
|
"<h1>Thank you!</h1>" +
|
||||||
|
"<p>This is the end of that block.</p>"
|
||||||
|
],
|
||||||
|
show_clickable_nav: true,
|
||||||
|
button_label_next: 'Next'
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
|
||||||
|
return {timeline: run_timeline};
|
||||||
|
|
||||||
|
}
|
||||||
229
plugins/jspsych-audio-keyboard-response-clickable.js
Normal file
229
plugins/jspsych-audio-keyboard-response-clickable.js
Normal file
@@ -0,0 +1,229 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-audio-keyboard-response-clickable
|
||||||
|
* Etienne Gaudrain
|
||||||
|
*
|
||||||
|
* Based on:
|
||||||
|
* jspsych-audio-keyboard-response @6.2.0
|
||||||
|
* Josh de Leeuw
|
||||||
|
*
|
||||||
|
* plugin for playing an audio file and getting a keyboard response or click on
|
||||||
|
* a page element
|
||||||
|
*
|
||||||
|
* documentation: docs.jspsych.org
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
jsPsych.plugins["audio-keyboard-response-clickable"] = (function() {
|
||||||
|
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
jsPsych.pluginAPI.registerPreload('audio-keyboard-response-clickable', 'stimulus', 'audio');
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'audio-keyboard-response-clickable',
|
||||||
|
description: '',
|
||||||
|
parameters: {
|
||||||
|
stimulus: {
|
||||||
|
type: jsPsych.plugins.parameterType.AUDIO,
|
||||||
|
pretty_name: 'Stimulus',
|
||||||
|
default: undefined,
|
||||||
|
description: 'The audio to be played.'
|
||||||
|
},
|
||||||
|
choices: {
|
||||||
|
type: jsPsych.plugins.parameterType.KEYCODE,
|
||||||
|
pretty_name: 'Choices',
|
||||||
|
array: true,
|
||||||
|
default: jsPsych.ALL_KEYS,
|
||||||
|
description: 'The keys the subject is allowed to press to respond to the stimulus.'
|
||||||
|
},
|
||||||
|
prompt: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Prompt',
|
||||||
|
default: null,
|
||||||
|
description: 'Any content here will be displayed below the stimulus.'
|
||||||
|
},
|
||||||
|
clickable: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Clickable',
|
||||||
|
description: 'Clicking clickable elements ends trial.',
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
trial_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Trial duration',
|
||||||
|
default: null,
|
||||||
|
description: 'The maximum duration to wait for a response.'
|
||||||
|
},
|
||||||
|
response_ends_trial: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Response ends trial',
|
||||||
|
default: true,
|
||||||
|
description: 'If true, the trial will end when user makes a response.'
|
||||||
|
},
|
||||||
|
trial_ends_after_audio: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Trial ends after audio',
|
||||||
|
default: false,
|
||||||
|
description: 'If true, then the trial will end as soon as the audio file finishes playing.'
|
||||||
|
},
|
||||||
|
response_allowed_while_playing: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Response allowed while playing',
|
||||||
|
default: true,
|
||||||
|
description: 'If true, then responses are allowed while the audio is playing. ' +
|
||||||
|
'If false, then the audio must finish playing before a response is accepted.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
var startTime;
|
||||||
|
|
||||||
|
// setup stimulus
|
||||||
|
var context = jsPsych.pluginAPI.audioContext();
|
||||||
|
if(context !== null) {
|
||||||
|
var source = context.createBufferSource();
|
||||||
|
source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
|
||||||
|
source.connect(context.destination);
|
||||||
|
} else {
|
||||||
|
var audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
|
||||||
|
audio.currentTime = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// set up end event if trial needs it
|
||||||
|
if(trial.trial_ends_after_audio) {
|
||||||
|
if(context !== null) {
|
||||||
|
source.addEventListener('ended', end_trial);
|
||||||
|
} else {
|
||||||
|
audio.addEventListener('ended', end_trial);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// show prompt if there is one
|
||||||
|
if(trial.prompt !== null) {
|
||||||
|
display_element.innerHTML = trial.prompt;
|
||||||
|
|
||||||
|
if(trial.clickable){
|
||||||
|
display_element.querySelectorAll(".clickable").forEach(function(e){
|
||||||
|
var clickHandler = function(event){
|
||||||
|
event.preventDefault();
|
||||||
|
var info = {'key': 'clicked', 'rt': performance.now()-startTime};
|
||||||
|
after_response(info);
|
||||||
|
e.removeEventListener('click', clickHandler);
|
||||||
|
};
|
||||||
|
e.addEventListener('click', clickHandler);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// store response
|
||||||
|
var response = {
|
||||||
|
rt: null,
|
||||||
|
key: null
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to end trial when it is time
|
||||||
|
function end_trial() {
|
||||||
|
|
||||||
|
// kill any remaining setTimeout handlers
|
||||||
|
jsPsych.pluginAPI.clearAllTimeouts();
|
||||||
|
|
||||||
|
// stop the audio file if it is playing
|
||||||
|
// remove end event listeners if they exist
|
||||||
|
if(context !== null) {
|
||||||
|
source.stop();
|
||||||
|
source.removeEventListener('ended', end_trial);
|
||||||
|
source.removeEventListener('ended', setup_keyboard_listener);
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
audio.removeEventListener('ended', end_trial);
|
||||||
|
audio.removeEventListener('ended', setup_keyboard_listener);
|
||||||
|
}
|
||||||
|
|
||||||
|
// kill keyboard listeners
|
||||||
|
jsPsych.pluginAPI.cancelAllKeyboardResponses();
|
||||||
|
|
||||||
|
// gather the data to store for the trial
|
||||||
|
if(context !== null && response.rt !== null) {
|
||||||
|
response.rt = Math.round(response.rt * 1000);
|
||||||
|
}
|
||||||
|
var trial_data = {
|
||||||
|
"rt": response.rt,
|
||||||
|
"stimulus": trial.stimulus,
|
||||||
|
"key_press": response.key
|
||||||
|
};
|
||||||
|
|
||||||
|
// clear the display
|
||||||
|
display_element.innerHTML = '';
|
||||||
|
|
||||||
|
// move on to the next trial
|
||||||
|
jsPsych.finishTrial(trial_data);
|
||||||
|
}
|
||||||
|
|
||||||
|
// function to handle responses by the subject
|
||||||
|
var after_response = function(info) {
|
||||||
|
|
||||||
|
// only record the first response
|
||||||
|
if(response.key == null) {
|
||||||
|
response = info;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(trial.response_ends_trial) {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function setup_keyboard_listener() {
|
||||||
|
// start the response listener
|
||||||
|
if(context !== null) {
|
||||||
|
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||||
|
callback_function: after_response,
|
||||||
|
valid_responses: trial.choices,
|
||||||
|
rt_method: 'audio',
|
||||||
|
persist: false,
|
||||||
|
allow_held_key: false,
|
||||||
|
audio_context: context,
|
||||||
|
audio_context_start_time: startTime
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||||
|
callback_function: after_response,
|
||||||
|
valid_responses: trial.choices,
|
||||||
|
rt_method: 'performance',
|
||||||
|
persist: false,
|
||||||
|
allow_held_key: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// start audio
|
||||||
|
if(context !== null) {
|
||||||
|
startTime = context.currentTime;
|
||||||
|
source.start(startTime);
|
||||||
|
} else {
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
// start keyboard listener when trial starts or sound ends
|
||||||
|
if(trial.response_allowed_while_playing) {
|
||||||
|
setup_keyboard_listener();
|
||||||
|
} else if(!trial.trial_ends_after_audio) {
|
||||||
|
if(context !== null) {
|
||||||
|
source.addEventListener('ended', setup_keyboard_listener);
|
||||||
|
} else {
|
||||||
|
audio.addEventListener('ended', setup_keyboard_listener);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// end trial if time limit is set
|
||||||
|
if(trial.trial_duration !== null) {
|
||||||
|
jsPsych.pluginAPI.setTimeout(function() {
|
||||||
|
end_trial();
|
||||||
|
}, trial.trial_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
230
plugins/jspsych-audio-keyboard-response-wait.js
Normal file
230
plugins/jspsych-audio-keyboard-response-wait.js
Normal file
@@ -0,0 +1,230 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-audio-keyboard-response-wait
|
||||||
|
* Josh de Leeuw, Etienne Gaudrain
|
||||||
|
*
|
||||||
|
* plugin for playing an audio file and getting a keyboard response.
|
||||||
|
*
|
||||||
|
* Based on jspsych-audio-keyboard-response but offers the possibility to wait for
|
||||||
|
* the audio to finish before moving to next trial.
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
jsPsych.plugins["audio-keyboard-response-wait"] = (function() {
|
||||||
|
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
jsPsych.pluginAPI.registerPreload('audio-keyboard-response-wait', 'stimulus', 'audio');
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'audio-keyboard-response-wait',
|
||||||
|
description: '',
|
||||||
|
parameters: {
|
||||||
|
stimulus: {
|
||||||
|
type: jsPsych.plugins.parameterType.AUDIO,
|
||||||
|
pretty_name: 'Stimulus',
|
||||||
|
default: undefined,
|
||||||
|
description: 'The audio to be played.'
|
||||||
|
},
|
||||||
|
choices: {
|
||||||
|
type: jsPsych.plugins.parameterType.KEYCODE,
|
||||||
|
pretty_name: 'Choices',
|
||||||
|
array: true,
|
||||||
|
default: jsPsych.ALL_KEYS,
|
||||||
|
description: 'The keys the subject is allowed to press to respond to the stimulus.'
|
||||||
|
},
|
||||||
|
prompt: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Prompt',
|
||||||
|
default: null,
|
||||||
|
description: 'This string can contain HTML markup. The intention is that it can be used to provide a reminder about the action the subject is supposed to take.'
|
||||||
|
},
|
||||||
|
trial_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Trial duration',
|
||||||
|
default: null,
|
||||||
|
description: 'The maximum duration to wait for a response.'
|
||||||
|
},
|
||||||
|
response_ends_trial: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Response ends trial',
|
||||||
|
default: true,
|
||||||
|
description: 'If true, the trial will end when user makes a response.'
|
||||||
|
},
|
||||||
|
trial_ends_after_audio: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Trial ends after audio',
|
||||||
|
default: false,
|
||||||
|
description: 'If true, then the trial will end as soon as the audio file finishes playing.'
|
||||||
|
},
|
||||||
|
wait_for_audio: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Wait for audio to finish',
|
||||||
|
default: false,
|
||||||
|
description: 'If `response_ends_trial` is true, this will still wait for the audio to end before ending the trial.'
|
||||||
|
},
|
||||||
|
dim_content_after_response: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Dim content after response',
|
||||||
|
default: false,
|
||||||
|
description: 'Will dim the content once the response has been given.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
// setup stimulus
|
||||||
|
var context = jsPsych.pluginAPI.audioContext();
|
||||||
|
if(context !== null){
|
||||||
|
var source = context.createBufferSource();
|
||||||
|
source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
|
||||||
|
source.connect(context.destination);
|
||||||
|
} else {
|
||||||
|
var audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
|
||||||
|
audio.currentTime = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// set up end event if trial needs it
|
||||||
|
|
||||||
|
var audio_is_finished = false;
|
||||||
|
var mark_audio_as_finished = function(){ audio_is_finished = true; };
|
||||||
|
|
||||||
|
if(trial.trial_ends_after_audio){
|
||||||
|
if(context !== null){
|
||||||
|
source.onended = function() {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
audio.addEventListener('ended', end_trial);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if(context !== null){
|
||||||
|
source.onended = function() {
|
||||||
|
mark_audio_as_finished();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
audio.addEventListener('ended', mark_audio_as_finished);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// show prompt if there is one
|
||||||
|
if (trial.prompt !== null) {
|
||||||
|
display_element.innerHTML = trial.prompt;
|
||||||
|
}
|
||||||
|
|
||||||
|
// store response
|
||||||
|
var response = {
|
||||||
|
rt: null,
|
||||||
|
key: null
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to end trial when it is time
|
||||||
|
function end_trial() {
|
||||||
|
|
||||||
|
// kill any remaining setTimeout handlers
|
||||||
|
jsPsych.pluginAPI.clearAllTimeouts();
|
||||||
|
|
||||||
|
// stop the audio file if it is playing
|
||||||
|
// remove end event listeners if they exist
|
||||||
|
if(context !== null){
|
||||||
|
source.stop();
|
||||||
|
source.onended = function() { }
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
audio.removeEventListener('ended', end_trial);
|
||||||
|
}
|
||||||
|
|
||||||
|
// kill keyboard listeners
|
||||||
|
jsPsych.pluginAPI.cancelAllKeyboardResponses();
|
||||||
|
|
||||||
|
// gather the data to store for the trial
|
||||||
|
if(context !== null && response.rt !== null){
|
||||||
|
response.rt = Math.round(response.rt * 1000);
|
||||||
|
}
|
||||||
|
var trial_data = {
|
||||||
|
"rt": response.rt,
|
||||||
|
"stimulus": trial.stimulus,
|
||||||
|
"key_press": response.key
|
||||||
|
};
|
||||||
|
|
||||||
|
// clear the display
|
||||||
|
display_element.innerHTML = '';
|
||||||
|
display_element.style.removeProperty("opacity");
|
||||||
|
|
||||||
|
// move on to the next trial
|
||||||
|
jsPsych.finishTrial(trial_data);
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to handle responses by the subject
|
||||||
|
var after_response = function(info) {
|
||||||
|
|
||||||
|
// only record the first response
|
||||||
|
if (response.key == null) {
|
||||||
|
response = info;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (trial.dim_content_after_response) {
|
||||||
|
display_element.style.opacity = "50%";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (trial.response_ends_trial) {
|
||||||
|
if (trial.wait_for_audio && !audio_is_finished) {
|
||||||
|
jsPsych.pluginAPI.cancelAllKeyboardResponses();
|
||||||
|
|
||||||
|
if(context !== null){
|
||||||
|
source.onended = function() {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
audio.addEventListener('ended', end_trial);
|
||||||
|
}
|
||||||
|
// Just in case the audio finished in the meantime
|
||||||
|
if(audio_is_finished) {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// start audio
|
||||||
|
if(context !== null){
|
||||||
|
startTime = context.currentTime;
|
||||||
|
source.start(startTime);
|
||||||
|
} else {
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
// start the response listener
|
||||||
|
if(context !== null) {
|
||||||
|
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||||
|
callback_function: after_response,
|
||||||
|
valid_responses: trial.choices,
|
||||||
|
rt_method: 'audio',
|
||||||
|
persist: false,
|
||||||
|
allow_held_key: false,
|
||||||
|
audio_context: context,
|
||||||
|
audio_context_start_time: startTime
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||||
|
callback_function: after_response,
|
||||||
|
valid_responses: trial.choices,
|
||||||
|
rt_method: 'performance',
|
||||||
|
persist: false,
|
||||||
|
allow_held_key: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// end trial if time limit is set
|
||||||
|
if (trial.trial_duration !== null) {
|
||||||
|
jsPsych.pluginAPI.setTimeout(function() {
|
||||||
|
end_trial();
|
||||||
|
}, trial.trial_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
87
plugins/jspsych-audio-safari-init.js
Normal file
87
plugins/jspsych-audio-safari-init.js
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-audio-safari-init
|
||||||
|
* Etienne Gaudrain - 2021-02-01
|
||||||
|
*
|
||||||
|
* Safari is the new Internet Explorer and does everything differently from others
|
||||||
|
* for better, and mostly for worse. Here is a plugin to display a screen for the user to click on
|
||||||
|
* before starting the experiment to unlock the audio context, if we are dealing with Safari.
|
||||||
|
*
|
||||||
|
* See https://github.com/jspsych/jsPsych/issues/1445.
|
||||||
|
*
|
||||||
|
* NOTE: When not using the WebAudio API (jsPsych initialised with `use_webaudio=false`),
|
||||||
|
* jspsych.js needs to be modifed to expose the list of preloaded sounds (or, it seems,
|
||||||
|
* at least the first one). In the code below, this is done within
|
||||||
|
* `jsPsych.pluginAPI.preloaded_audio_IDs()`.
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
jsPsych.plugins["audio-safari-init"] = (function() {
|
||||||
|
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
//jsPsych.pluginAPI.registerPreload('audio-safari-init', 'stimulus', 'audio');
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'audio-safari-init',
|
||||||
|
description: '',
|
||||||
|
parameters: {
|
||||||
|
prompt: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Prompt',
|
||||||
|
default: "Click on the screen to start the experiment",
|
||||||
|
description: 'The prompt asking the user to click on the screen.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
// Ideally, we would want to be able to detect this on feature basis rather than using userAgents,
|
||||||
|
// but Safari just doesn't count clicks not directly aimed at starting sounds, while other browsers do.
|
||||||
|
const is_Safari = /Version\/.*Safari\//.test(navigator.userAgent) && !window.MSStream;
|
||||||
|
if(is_Safari){
|
||||||
|
display_element.innerHTML = trial.prompt;
|
||||||
|
document.addEventListener('touchstart', init_audio);
|
||||||
|
document.addEventListener('click', init_audio);
|
||||||
|
} else {
|
||||||
|
jsPsych.finishTrial();
|
||||||
|
}
|
||||||
|
|
||||||
|
function init_audio(){
|
||||||
|
var context = jsPsych.pluginAPI.audioContext();
|
||||||
|
if(context==null){
|
||||||
|
// This requires the hacked version of jspsych 6.1.0_eg2021-02-21
|
||||||
|
jsPsych.pluginAPI.preloaded_audio_IDs().slice(0,1).forEach(function(a){
|
||||||
|
var b = jsPsych.pluginAPI.getAudioBuffer(a);
|
||||||
|
b.play();
|
||||||
|
b.pause();
|
||||||
|
b.currentTime = 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
|
||||||
|
// function to end trial when it is time
|
||||||
|
function end_trial() {
|
||||||
|
|
||||||
|
document.removeEventListener('touchstart', init_audio);
|
||||||
|
document.removeEventListener('click', init_audio);
|
||||||
|
|
||||||
|
// kill any remaining setTimeout handlers
|
||||||
|
jsPsych.pluginAPI.clearAllTimeouts();
|
||||||
|
|
||||||
|
// kill keyboard listeners
|
||||||
|
jsPsych.pluginAPI.cancelAllKeyboardResponses();
|
||||||
|
|
||||||
|
// clear the display
|
||||||
|
display_element.innerHTML = '';
|
||||||
|
|
||||||
|
// move on to the next trial
|
||||||
|
jsPsych.finishTrial();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
332
plugins/jspsych-audio-sequence-button-response.js
Normal file
332
plugins/jspsych-audio-sequence-button-response.js
Normal file
@@ -0,0 +1,332 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-audio-sequence-button-response
|
||||||
|
* Etienne Gaudrain <etienne.gaudrain@cnrs.fr>
|
||||||
|
*
|
||||||
|
* Plugin for playing a sequence of audio files and getting an HTML button response
|
||||||
|
*
|
||||||
|
* Based on jspsych-audio-button-response.
|
||||||
|
**/
|
||||||
|
|
||||||
|
jsPsych.plugins["audio-sequence-button-response"] = (function() {
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
jsPsych.pluginAPI.registerPreload('audio-sequence-button-response', 'stimuli', 'audio');
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'audio-sequence-button-response',
|
||||||
|
description: '',
|
||||||
|
parameters: {
|
||||||
|
stimuli: {
|
||||||
|
type: jsPsych.plugins.parameterType.AUDIO,
|
||||||
|
pretty_name: 'Stimuli',
|
||||||
|
default: undefined,
|
||||||
|
array: true,
|
||||||
|
description: 'The audio files to be played.'
|
||||||
|
},
|
||||||
|
choices: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Choices',
|
||||||
|
default: undefined,
|
||||||
|
array: true,
|
||||||
|
description: 'The button labels.'
|
||||||
|
},
|
||||||
|
button_html: {
|
||||||
|
type: jsPsych.plugins.parameterType.HTML_STRING,
|
||||||
|
pretty_name: 'Button HTML',
|
||||||
|
default: '<button class="jspsych-btn">%choice%</button>',
|
||||||
|
array: true,
|
||||||
|
description: 'Custom button. Can make your own style.'
|
||||||
|
},
|
||||||
|
prompt: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Prompt',
|
||||||
|
default: null,
|
||||||
|
description: 'Any content here will be displayed below (or above) the buttons.'
|
||||||
|
},
|
||||||
|
prompt_position: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Prompt position',
|
||||||
|
default: 'bottom',
|
||||||
|
description: 'Determines whether the prompt is printed above or below the buttons: "top" or "bottom".'
|
||||||
|
},
|
||||||
|
isi: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Inter-stimulus-interval',
|
||||||
|
default: 0,
|
||||||
|
description: 'The delay in between stimulus presentation (in ms).'
|
||||||
|
},
|
||||||
|
trial_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Trial duration',
|
||||||
|
default: null,
|
||||||
|
description: 'The maximum duration to wait for a response.'
|
||||||
|
},
|
||||||
|
margin_vertical: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Margin vertical',
|
||||||
|
default: '0px',
|
||||||
|
description: 'Vertical margin of button.'
|
||||||
|
},
|
||||||
|
margin_horizontal: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Margin horizontal',
|
||||||
|
default: '8px',
|
||||||
|
description: 'Horizontal margin of button.'
|
||||||
|
},
|
||||||
|
response_ends_trial: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Response ends trial',
|
||||||
|
default: true,
|
||||||
|
description: 'If true, the trial will end when user makes a response.'
|
||||||
|
},
|
||||||
|
trial_ends_after_audio: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Trial ends after audio',
|
||||||
|
default: false,
|
||||||
|
description: 'If true, then the trial will end as soon as all audio files are finished playing.'
|
||||||
|
},
|
||||||
|
visual_feedback: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Visual feedback',
|
||||||
|
default: false,
|
||||||
|
description: 'If true, then visual feedback will be provided after the trial ends.'
|
||||||
|
},
|
||||||
|
i_correct: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Index of the correct button',
|
||||||
|
default: null,
|
||||||
|
description: 'This can be an integer or a function. Only necessary if visual feedback is true.'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
var context = jsPsych.pluginAPI.audioContext();
|
||||||
|
if(context !== null) {
|
||||||
|
var source;
|
||||||
|
} else {
|
||||||
|
var audio;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(trial.visual_feedback===true && trial.i_correct===null)
|
||||||
|
throw "'i_correct' has to be defined if visual feedback is requested.";
|
||||||
|
|
||||||
|
//display buttons
|
||||||
|
var buttons = [];
|
||||||
|
|
||||||
|
function play_next_audio() {
|
||||||
|
//var i = load_next_audio();
|
||||||
|
|
||||||
|
if(typeof play_next_audio.i === 'undefined')
|
||||||
|
{
|
||||||
|
// This is the first pass, we disable the buttons
|
||||||
|
$(display_element).find(".jspsych-audio-sequence-button-response button").addClass("disabled").prop('disabled', true);
|
||||||
|
play_next_audio.i = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
// We un-highlight the previous button
|
||||||
|
if(play_next_audio.i>0)
|
||||||
|
$(display_element).find('#jspsych-audio-sequence-button-response-' + (play_next_audio.i-1) +' button').toggleClass('highlighted');
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Is it the last stimulus, do we need to end trial?
|
||||||
|
if(play_next_audio.i >= trial.stimuli.length) {
|
||||||
|
$(display_element).find(".jspsych-audio-sequence-button-response button").removeClass("disabled").prop('disabled', false);
|
||||||
|
if(trial.trial_ends_after_audio) {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prepare the next sound to play
|
||||||
|
if(context !== null) {
|
||||||
|
source = context.createBufferSource();
|
||||||
|
source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimuli[play_next_audio.i]);
|
||||||
|
source.connect(context.destination);
|
||||||
|
source.onended = function(){
|
||||||
|
$(display_element).find('.jspsych-audio-sequence-button-response button.highlighted').removeClass('highlighted');
|
||||||
|
setTimeout(play_next_audio, trial.isi);
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimuli[play_next_audio.i]);
|
||||||
|
audio.currentTime = 0;
|
||||||
|
audio.addEventListener('ended', function(){
|
||||||
|
$(display_element).find('.jspsych-audio-sequence-button-response button.highlighted').removeClass('highlighted');
|
||||||
|
setTimeout(play_next_audio, trial.isi);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Highlight the current button
|
||||||
|
$(display_element).find('#jspsych-audio-sequence-button-response-' + play_next_audio.i +' button').addClass('highlighted');
|
||||||
|
|
||||||
|
if(context !== null) {
|
||||||
|
startTime = context.currentTime;
|
||||||
|
source.start(startTime);
|
||||||
|
} else {
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
|
||||||
|
play_next_audio.i++;
|
||||||
|
}
|
||||||
|
|
||||||
|
//display buttons
|
||||||
|
if(Array.isArray(trial.button_html)) {
|
||||||
|
if(trial.button_html.length == trial.choices.length) {
|
||||||
|
buttons = trial.button_html;
|
||||||
|
} else {
|
||||||
|
console.error('Error in ' + plugin.info.name + '. The length of the button_html array does not equal the length of the choices array');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for(var i = 0; i < trial.choices.length; i++) {
|
||||||
|
buttons.push(trial.button_html);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
//show prompt if there is one
|
||||||
|
if(trial.prompt_position == 'top' && trial.prompt !== null) {
|
||||||
|
html += "<p class='jspsych-prompt'>"+trial.prompt+"</p>";
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '<div id="jspsych-audio-button-response-btngroup">';
|
||||||
|
for(var i = 0; i < trial.choices.length; i++) {
|
||||||
|
var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
|
||||||
|
html += '<div class="jspsych-audio-sequence-button-response" style="cursor: pointer; display: inline-block; margin:' + trial.margin_vertical + ' ' + trial.margin_horizontal + '" id="jspsych-audio-sequence-button-response-' + i + '" data-choice="' + i + '">' + str + '</div>';
|
||||||
|
}
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
//show prompt if there is one
|
||||||
|
if(trial.prompt_position != 'top' && trial.prompt !== null) {
|
||||||
|
html += "<p class='jspsych-prompt'>"+trial.prompt+"</p>";
|
||||||
|
}
|
||||||
|
|
||||||
|
$(display_element).html( html );
|
||||||
|
|
||||||
|
for(var i = 0; i < trial.choices.length; i++) {
|
||||||
|
$(display_element).find('#jspsych-audio-sequence-button-response-' + i).click( function(e) {
|
||||||
|
var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
|
||||||
|
after_response(choice);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// store response
|
||||||
|
var response = {
|
||||||
|
rt: null,
|
||||||
|
button: null
|
||||||
|
};
|
||||||
|
|
||||||
|
// A custom blink function for feedback in case semantic's transition isn't there
|
||||||
|
function blink(elm, n, cssClass, after_cb) {
|
||||||
|
if(n<=0) {
|
||||||
|
after_cb();
|
||||||
|
} else {
|
||||||
|
$(elm).toggleClass(cssClass);
|
||||||
|
setTimeout(function(){ blink(elm, n-1, cssClass, after_cb); }, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// function to handle responses by the subject
|
||||||
|
function after_response(choice) {
|
||||||
|
|
||||||
|
// measure rt
|
||||||
|
var end_time = performance.now();
|
||||||
|
var rt = end_time - start_time;
|
||||||
|
response.button = choice;
|
||||||
|
response.rt = rt;
|
||||||
|
|
||||||
|
// disable all the buttons after a response
|
||||||
|
$('.jspsych-audio-sequence-button-response button').addClass('disabled').prop('disabled', true);
|
||||||
|
|
||||||
|
if(trial.visual_feedback) {
|
||||||
|
var cssClass, n, animation;
|
||||||
|
var correct_button = $('#jspsych-audio-sequence-button-response-'+trial.i_correct+' button');
|
||||||
|
var correct = parseInt(trial.i_correct) == parseInt(response.button);
|
||||||
|
correct_button.removeClass('disabled').prop('disabled', false).css('pointer-events', 'none');
|
||||||
|
correct_button.addClass('visual-feedback');
|
||||||
|
|
||||||
|
if(correct)
|
||||||
|
{
|
||||||
|
cssClass = 'correct';
|
||||||
|
animation = 'bounce'; //'jiggle';
|
||||||
|
n = 2;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
cssClass = 'incorrect';
|
||||||
|
animation = 'shake'; //'tada';
|
||||||
|
n = 6;
|
||||||
|
}
|
||||||
|
correct_button.addClass(cssClass);
|
||||||
|
|
||||||
|
if($.prototype.transition)
|
||||||
|
{
|
||||||
|
// We have semantic's transitions installed
|
||||||
|
correct_button.transition({
|
||||||
|
animation: animation,
|
||||||
|
onComplete: function() {
|
||||||
|
correct_button.css('pointer-events', '').addClass('disabled').prop('disabled', true);
|
||||||
|
end_trial();
|
||||||
|
},
|
||||||
|
verbose: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
blink(correct_button, n, cssClass, end_trial);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if(trial.response_ends_trial) {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to end trial when it is time
|
||||||
|
function end_trial() {
|
||||||
|
|
||||||
|
// stop the audio file if it is playing
|
||||||
|
// remove end event listeners if they exist
|
||||||
|
if(context !== null) {
|
||||||
|
source.stop();
|
||||||
|
source.onended = function() {}
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
audio.removeEventListener('ended', end_trial);
|
||||||
|
}
|
||||||
|
|
||||||
|
// kill any remaining setTimeout handlers
|
||||||
|
jsPsych.pluginAPI.clearAllTimeouts();
|
||||||
|
|
||||||
|
// gather the data to store for the trial
|
||||||
|
var trial_data = {
|
||||||
|
"rt": response.rt,
|
||||||
|
"stimuli": trial.stimuli,
|
||||||
|
"button_pressed": response.button
|
||||||
|
};
|
||||||
|
|
||||||
|
// clear the display
|
||||||
|
display_element.innerHTML = '';
|
||||||
|
|
||||||
|
// move on to the next trial
|
||||||
|
$(display_element).ready(function(){
|
||||||
|
jsPsych.finishTrial(trial_data);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// start time
|
||||||
|
var start_time = performance.now();
|
||||||
|
|
||||||
|
$(display_element).ready(play_next_audio);
|
||||||
|
|
||||||
|
// end trial if time limit is set
|
||||||
|
if(trial.trial_duration !== null) {
|
||||||
|
jsPsych.pluginAPI.setTimeout(function() {
|
||||||
|
end_trial();
|
||||||
|
}, trial.trial_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
544
plugins/jspsych-crm.js
Normal file
544
plugins/jspsych-crm.js
Normal file
@@ -0,0 +1,544 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-crm
|
||||||
|
* Etienne Gaudrain <etienne.gaudrain@cnrs.fr>
|
||||||
|
*
|
||||||
|
* Plugin for displaying a CRM response grid.
|
||||||
|
**/
|
||||||
|
|
||||||
|
jsPsych.plugins["crm"] = (function() {
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
jsPsych.pluginAPI.registerPreload('crm', 'stimuli', 'audio');
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'crm',
|
||||||
|
description: '',
|
||||||
|
parameters: {
|
||||||
|
stimulus: {
|
||||||
|
type: jsPsych.plugins.parameterType.AUDIO,
|
||||||
|
pretty_name: 'Stimuli',
|
||||||
|
default: undefined,
|
||||||
|
description: 'The audio file to be played.'
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Colors',
|
||||||
|
default: undefined,
|
||||||
|
array: true,
|
||||||
|
description: 'The colors used in the task.'
|
||||||
|
},
|
||||||
|
color_labels: {
|
||||||
|
type: jsPsych.plugins.parameterType.OBJECT,
|
||||||
|
pretty_name: 'Color labels',
|
||||||
|
default: null,
|
||||||
|
description: 'The labels of the colors used in the task (for instance in another language).'
|
||||||
|
},
|
||||||
|
color_values: {
|
||||||
|
type: jsPsych.plugins.parameterType.OBJECT,
|
||||||
|
pretty_name: 'Color values',
|
||||||
|
default: null,
|
||||||
|
description: 'The colors used to display the colors labels and cells. Default values are implemented, but they can be changed here in the form of an object whose keys are the color labels, and values are the colors in any CSS valid format.'
|
||||||
|
},
|
||||||
|
text_color_values: {
|
||||||
|
type: jsPsych.plugins.parameterType.OBJECT,
|
||||||
|
pretty_name: 'Text color values',
|
||||||
|
default: 'auto',
|
||||||
|
description: 'The colors used to display the text in the cells. Use "auto" (default) to let the program decide black or white depending on brightness of the color. Otherwise, an object whose keys are the color names, and values are strings representing CSS colors.'
|
||||||
|
},
|
||||||
|
numbers: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Numbers',
|
||||||
|
default: undefined,
|
||||||
|
array: true,
|
||||||
|
description: 'The numbers used in the task.'
|
||||||
|
},
|
||||||
|
prompt: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Prompt',
|
||||||
|
default: null,
|
||||||
|
description: 'Any content here will be displayed below (or above) the buttons.'
|
||||||
|
},
|
||||||
|
trial_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Trial duration',
|
||||||
|
default: null,
|
||||||
|
description: 'The maximum duration to wait for a response.'
|
||||||
|
},
|
||||||
|
response_ends_trial: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Response ends trial',
|
||||||
|
default: true,
|
||||||
|
description: 'If true, the trial will end when user makes a response.'
|
||||||
|
},
|
||||||
|
visual_feedback: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Visual feedback',
|
||||||
|
default: false,
|
||||||
|
description: 'If true, then visual feedback will be provided after the trial ends.'
|
||||||
|
},
|
||||||
|
correct_response: {
|
||||||
|
type: jsPsych.plugins.parameterType.OBJECT,
|
||||||
|
pretty_name: 'The correct response',
|
||||||
|
default: null,
|
||||||
|
description: 'This is an object containing color and number of the correct response.'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
var context = jsPsych.pluginAPI.audioContext();
|
||||||
|
if(context !== null) {
|
||||||
|
var source;
|
||||||
|
} else {
|
||||||
|
var audio;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(trial.visual_feedback===true && trial.correct_reponse===null)
|
||||||
|
throw "'correct_response' has to be defined if visual feedback is requested.";
|
||||||
|
|
||||||
|
if(trial.color_values===null) {
|
||||||
|
trial.color_values = {
|
||||||
|
red: "#ff3333",
|
||||||
|
blue: "#6b6bff",
|
||||||
|
green: "#1da831",
|
||||||
|
yellow: "#ffe534",
|
||||||
|
pink: "#ff57df",
|
||||||
|
purple: "#a522ff",
|
||||||
|
brown: "#7a5630",
|
||||||
|
black: "#222222",
|
||||||
|
white: "#fcfcfc",
|
||||||
|
grey: "#8c8c8c",
|
||||||
|
gray: "#8c8c8c"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var auto_text_color_values = {};
|
||||||
|
var brightness = {};
|
||||||
|
for(var c in trial.color_values) {
|
||||||
|
var col = parseCSSColor(c);
|
||||||
|
var L = 0.299*col[0] + 0.587*col[1] + 0.114*col[2];
|
||||||
|
if(L<128) {
|
||||||
|
brightness[c] = 'dark';
|
||||||
|
auto_text_color_values[c] = "#ffffff";
|
||||||
|
} else {
|
||||||
|
auto_text_color_values[c] = "#000000";
|
||||||
|
brightness[c] = 'bright';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(trial.text_color_values=="auto") {
|
||||||
|
trial.text_color_values = auto_text_color_values;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function play_audio() {
|
||||||
|
|
||||||
|
// Prepare the next sound to play
|
||||||
|
if(context !== null) {
|
||||||
|
source = context.createBufferSource();
|
||||||
|
source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
|
||||||
|
source.connect(context.destination);
|
||||||
|
source.onended = function(){
|
||||||
|
if(trial.trial_ends_after_audio) {
|
||||||
|
after_response(null);
|
||||||
|
} else {
|
||||||
|
enable_response();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
startTime = context.currentTime;
|
||||||
|
source.start(startTime);
|
||||||
|
} else {
|
||||||
|
audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
|
||||||
|
audio.currentTime = 0;
|
||||||
|
audio.addEventListener('ended', function(){
|
||||||
|
if(trial.trial_ends_after_audio) {
|
||||||
|
after_response(null);
|
||||||
|
} else {
|
||||||
|
enable_response();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(trial.color_labels===null) {
|
||||||
|
trial.color_labels = {};
|
||||||
|
for(var c of trial.colors) {
|
||||||
|
trial.color_labels[c] = c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
//display buttons
|
||||||
|
if(Array.isArray(trial.button_html)) {
|
||||||
|
if(trial.button_html.length == trial.choices.length) {
|
||||||
|
buttons = trial.button_html;
|
||||||
|
} else {
|
||||||
|
console.error('Error in ' + plugin.info.name + '. The length of the button_html array does not equal the length of the choices array');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for(var i = 0; i < trial.choices.length; i++) {
|
||||||
|
buttons.push(trial.button_html);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
//show prompt if there is one
|
||||||
|
if(trial.prompt !== null) {
|
||||||
|
html += "<p class='jspsych-prompt'>"+trial.prompt+"</p>";
|
||||||
|
}
|
||||||
|
|
||||||
|
html += '<div id="jspsych-crm-buttons-container"><table class="jspsych-crm">';
|
||||||
|
for(var c of trial.colors) {
|
||||||
|
html += "<tr>";
|
||||||
|
html += "<th class='crm-"+c+"' style='color: "+trial.color_values[c]+"'>"+trial.color_labels[c]+"</th>";
|
||||||
|
for(var n of trial.numbers) {
|
||||||
|
html += "<td class='crm-"+c+" "+brightness[c]+"' data-value='"+JSON.stringify({color: c, number: n})+"' style='color: "+trial.text_color_values[c]+"; background-color: "+trial.color_values[c]+"'>"+n+"</td>";
|
||||||
|
}
|
||||||
|
html += "<th class='crm-"+c+"' style='color: "+trial.color_values[c]+"'>"+trial.color_labels[c]+"</th>";
|
||||||
|
html += "</tr>";
|
||||||
|
}
|
||||||
|
html += '</div>';
|
||||||
|
|
||||||
|
$(display_element).html( html );
|
||||||
|
|
||||||
|
function enable_response() {
|
||||||
|
$(display_element).find("table.jspsych-crm td").css("cursor", "pointer").click( function(e) {
|
||||||
|
var choice = JSON.parse(e.currentTarget.getAttribute('data-value'));
|
||||||
|
after_response(choice);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function disable_response() {
|
||||||
|
$(display_element).find("table.jspsych-crm td").off("click").css("cursor", "default");
|
||||||
|
}
|
||||||
|
|
||||||
|
// store response
|
||||||
|
var response = {
|
||||||
|
rt: null,
|
||||||
|
color: null,
|
||||||
|
number: null
|
||||||
|
};
|
||||||
|
|
||||||
|
// A custom blink function for feedback in case semantic's transition isn't there
|
||||||
|
function blink(elm, n, cssClass, after_cb) {
|
||||||
|
if(n<=0) {
|
||||||
|
after_cb();
|
||||||
|
} else {
|
||||||
|
$(elm).toggleClass(cssClass);
|
||||||
|
setTimeout(function(){ blink(elm, n-1, cssClass, after_cb); }, 200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// function to handle responses by the subject
|
||||||
|
function after_response(choice) {
|
||||||
|
|
||||||
|
// measure rt
|
||||||
|
var end_time = performance.now();
|
||||||
|
response.rt = end_time - start_time;
|
||||||
|
|
||||||
|
if(choice!==null) {
|
||||||
|
response.color = choice.color;
|
||||||
|
response.number = choice.number;
|
||||||
|
}
|
||||||
|
|
||||||
|
disable_response();
|
||||||
|
|
||||||
|
if(trial.visual_feedback) {
|
||||||
|
var cssClass, n, animation;
|
||||||
|
var correct_button = $(display_element).find("table.jspsych-crm td[data-value='"+JSON.stringify(trial.correct_response)+"']");
|
||||||
|
var correct = (trial.correct_response.color == response.color) && (trial.correct_response.number == response.number);
|
||||||
|
correct_button.addClass('visual-feedback');
|
||||||
|
|
||||||
|
if(correct)
|
||||||
|
{
|
||||||
|
cssClass = 'correct';
|
||||||
|
animation = 'bounce'; //'jiggle';
|
||||||
|
n = 2;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
cssClass = 'incorrect';
|
||||||
|
animation = 'shake'; //'tada';
|
||||||
|
n = 6;
|
||||||
|
}
|
||||||
|
correct_button.addClass(cssClass);
|
||||||
|
|
||||||
|
if($.prototype.transition)
|
||||||
|
{
|
||||||
|
// We have semantic's transitions installed
|
||||||
|
correct_button.transition({
|
||||||
|
animation: animation,
|
||||||
|
onComplete: function() {
|
||||||
|
correct_button.css('pointer-events', '').addClass('disabled').prop('disabled', true);
|
||||||
|
end_trial();
|
||||||
|
},
|
||||||
|
verbose: true
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
blink(correct_button, n, cssClass, end_trial);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if(trial.response_ends_trial) {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to end trial when it is time
|
||||||
|
function end_trial() {
|
||||||
|
|
||||||
|
// stop the audio file if it is playing
|
||||||
|
// remove end event listeners if they exist
|
||||||
|
if(context !== null) {
|
||||||
|
source.stop();
|
||||||
|
source.onended = function() {}
|
||||||
|
} else {
|
||||||
|
audio.pause();
|
||||||
|
audio.removeEventListener('ended', end_trial);
|
||||||
|
}
|
||||||
|
|
||||||
|
// kill any remaining setTimeout handlers
|
||||||
|
jsPsych.pluginAPI.clearAllTimeouts();
|
||||||
|
|
||||||
|
// gather the data to store for the trial
|
||||||
|
var trial_data = {
|
||||||
|
rt: response.rt,
|
||||||
|
stimulus: trial.stimulus,
|
||||||
|
response_color: response.color,
|
||||||
|
response_number: response.number,
|
||||||
|
correct_color: trial.correct_response.color,
|
||||||
|
correct_number: trial.correct_response.number,
|
||||||
|
score: (response.color==trial.correct_response.color) + (response.number==trial.correct_response.number)
|
||||||
|
};
|
||||||
|
|
||||||
|
// clear the display
|
||||||
|
display_element.innerHTML = '';
|
||||||
|
|
||||||
|
// move on to the next trial
|
||||||
|
$(display_element).ready(function(){
|
||||||
|
jsPsych.finishTrial(trial_data);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// start time
|
||||||
|
var start_time = performance.now();
|
||||||
|
|
||||||
|
$(display_element).ready(play_audio);
|
||||||
|
|
||||||
|
// end trial if time limit is set
|
||||||
|
if(trial.trial_duration !== null) {
|
||||||
|
jsPsych.pluginAPI.setTimeout(function() {
|
||||||
|
end_trial();
|
||||||
|
}, trial.trial_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
|
|
||||||
|
|
||||||
|
// (c) Dean McNamee <dean@gmail.com>, 2012.
|
||||||
|
//
|
||||||
|
// https://github.com/deanm/css-color-parser-js
|
||||||
|
//
|
||||||
|
// Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
// of this software and associated documentation files (the "Software"), to
|
||||||
|
// deal in the Software without restriction, including without limitation the
|
||||||
|
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||||
|
// sell copies of the Software, and to permit persons to whom the Software is
|
||||||
|
// furnished to do so, subject to the following conditions:
|
||||||
|
//
|
||||||
|
// The above copyright notice and this permission notice shall be included in
|
||||||
|
// all copies or substantial portions of the Software.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||||
|
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||||
|
// IN THE SOFTWARE.
|
||||||
|
|
||||||
|
// http://www.w3.org/TR/css3-color/
|
||||||
|
var kCSSColorTable = {
|
||||||
|
"transparent": [0,0,0,0], "aliceblue": [240,248,255,1],
|
||||||
|
"antiquewhite": [250,235,215,1], "aqua": [0,255,255,1],
|
||||||
|
"aquamarine": [127,255,212,1], "azure": [240,255,255,1],
|
||||||
|
"beige": [245,245,220,1], "bisque": [255,228,196,1],
|
||||||
|
"black": [0,0,0,1], "blanchedalmond": [255,235,205,1],
|
||||||
|
"blue": [0,0,255,1], "blueviolet": [138,43,226,1],
|
||||||
|
"brown": [165,42,42,1], "burlywood": [222,184,135,1],
|
||||||
|
"cadetblue": [95,158,160,1], "chartreuse": [127,255,0,1],
|
||||||
|
"chocolate": [210,105,30,1], "coral": [255,127,80,1],
|
||||||
|
"cornflowerblue": [100,149,237,1], "cornsilk": [255,248,220,1],
|
||||||
|
"crimson": [220,20,60,1], "cyan": [0,255,255,1],
|
||||||
|
"darkblue": [0,0,139,1], "darkcyan": [0,139,139,1],
|
||||||
|
"darkgoldenrod": [184,134,11,1], "darkgray": [169,169,169,1],
|
||||||
|
"darkgreen": [0,100,0,1], "darkgrey": [169,169,169,1],
|
||||||
|
"darkkhaki": [189,183,107,1], "darkmagenta": [139,0,139,1],
|
||||||
|
"darkolivegreen": [85,107,47,1], "darkorange": [255,140,0,1],
|
||||||
|
"darkorchid": [153,50,204,1], "darkred": [139,0,0,1],
|
||||||
|
"darksalmon": [233,150,122,1], "darkseagreen": [143,188,143,1],
|
||||||
|
"darkslateblue": [72,61,139,1], "darkslategray": [47,79,79,1],
|
||||||
|
"darkslategrey": [47,79,79,1], "darkturquoise": [0,206,209,1],
|
||||||
|
"darkviolet": [148,0,211,1], "deeppink": [255,20,147,1],
|
||||||
|
"deepskyblue": [0,191,255,1], "dimgray": [105,105,105,1],
|
||||||
|
"dimgrey": [105,105,105,1], "dodgerblue": [30,144,255,1],
|
||||||
|
"firebrick": [178,34,34,1], "floralwhite": [255,250,240,1],
|
||||||
|
"forestgreen": [34,139,34,1], "fuchsia": [255,0,255,1],
|
||||||
|
"gainsboro": [220,220,220,1], "ghostwhite": [248,248,255,1],
|
||||||
|
"gold": [255,215,0,1], "goldenrod": [218,165,32,1],
|
||||||
|
"gray": [128,128,128,1], "green": [0,128,0,1],
|
||||||
|
"greenyellow": [173,255,47,1], "grey": [128,128,128,1],
|
||||||
|
"honeydew": [240,255,240,1], "hotpink": [255,105,180,1],
|
||||||
|
"indianred": [205,92,92,1], "indigo": [75,0,130,1],
|
||||||
|
"ivory": [255,255,240,1], "khaki": [240,230,140,1],
|
||||||
|
"lavender": [230,230,250,1], "lavenderblush": [255,240,245,1],
|
||||||
|
"lawngreen": [124,252,0,1], "lemonchiffon": [255,250,205,1],
|
||||||
|
"lightblue": [173,216,230,1], "lightcoral": [240,128,128,1],
|
||||||
|
"lightcyan": [224,255,255,1], "lightgoldenrodyellow": [250,250,210,1],
|
||||||
|
"lightgray": [211,211,211,1], "lightgreen": [144,238,144,1],
|
||||||
|
"lightgrey": [211,211,211,1], "lightpink": [255,182,193,1],
|
||||||
|
"lightsalmon": [255,160,122,1], "lightseagreen": [32,178,170,1],
|
||||||
|
"lightskyblue": [135,206,250,1], "lightslategray": [119,136,153,1],
|
||||||
|
"lightslategrey": [119,136,153,1], "lightsteelblue": [176,196,222,1],
|
||||||
|
"lightyellow": [255,255,224,1], "lime": [0,255,0,1],
|
||||||
|
"limegreen": [50,205,50,1], "linen": [250,240,230,1],
|
||||||
|
"magenta": [255,0,255,1], "maroon": [128,0,0,1],
|
||||||
|
"mediumaquamarine": [102,205,170,1], "mediumblue": [0,0,205,1],
|
||||||
|
"mediumorchid": [186,85,211,1], "mediumpurple": [147,112,219,1],
|
||||||
|
"mediumseagreen": [60,179,113,1], "mediumslateblue": [123,104,238,1],
|
||||||
|
"mediumspringgreen": [0,250,154,1], "mediumturquoise": [72,209,204,1],
|
||||||
|
"mediumvioletred": [199,21,133,1], "midnightblue": [25,25,112,1],
|
||||||
|
"mintcream": [245,255,250,1], "mistyrose": [255,228,225,1],
|
||||||
|
"moccasin": [255,228,181,1], "navajowhite": [255,222,173,1],
|
||||||
|
"navy": [0,0,128,1], "oldlace": [253,245,230,1],
|
||||||
|
"olive": [128,128,0,1], "olivedrab": [107,142,35,1],
|
||||||
|
"orange": [255,165,0,1], "orangered": [255,69,0,1],
|
||||||
|
"orchid": [218,112,214,1], "palegoldenrod": [238,232,170,1],
|
||||||
|
"palegreen": [152,251,152,1], "paleturquoise": [175,238,238,1],
|
||||||
|
"palevioletred": [219,112,147,1], "papayawhip": [255,239,213,1],
|
||||||
|
"peachpuff": [255,218,185,1], "peru": [205,133,63,1],
|
||||||
|
"pink": [255,192,203,1], "plum": [221,160,221,1],
|
||||||
|
"powderblue": [176,224,230,1], "purple": [128,0,128,1],
|
||||||
|
"rebeccapurple": [102,51,153,1],
|
||||||
|
"red": [255,0,0,1], "rosybrown": [188,143,143,1],
|
||||||
|
"royalblue": [65,105,225,1], "saddlebrown": [139,69,19,1],
|
||||||
|
"salmon": [250,128,114,1], "sandybrown": [244,164,96,1],
|
||||||
|
"seagreen": [46,139,87,1], "seashell": [255,245,238,1],
|
||||||
|
"sienna": [160,82,45,1], "silver": [192,192,192,1],
|
||||||
|
"skyblue": [135,206,235,1], "slateblue": [106,90,205,1],
|
||||||
|
"slategray": [112,128,144,1], "slategrey": [112,128,144,1],
|
||||||
|
"snow": [255,250,250,1], "springgreen": [0,255,127,1],
|
||||||
|
"steelblue": [70,130,180,1], "tan": [210,180,140,1],
|
||||||
|
"teal": [0,128,128,1], "thistle": [216,191,216,1],
|
||||||
|
"tomato": [255,99,71,1], "turquoise": [64,224,208,1],
|
||||||
|
"violet": [238,130,238,1], "wheat": [245,222,179,1],
|
||||||
|
"white": [255,255,255,1], "whitesmoke": [245,245,245,1],
|
||||||
|
"yellow": [255,255,0,1], "yellowgreen": [154,205,50,1]}
|
||||||
|
|
||||||
|
function clamp_css_byte(i) { // Clamp to integer 0 .. 255.
|
||||||
|
i = Math.round(i); // Seems to be what Chrome does (vs truncation).
|
||||||
|
return i < 0 ? 0 : i > 255 ? 255 : i;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clamp_css_float(f) { // Clamp to float 0.0 .. 1.0.
|
||||||
|
return f < 0 ? 0 : f > 1 ? 1 : f;
|
||||||
|
}
|
||||||
|
|
||||||
|
function parse_css_int(str) { // int or percentage.
|
||||||
|
if (str[str.length - 1] === '%')
|
||||||
|
return clamp_css_byte(parseFloat(str) / 100 * 255);
|
||||||
|
return clamp_css_byte(parseInt(str));
|
||||||
|
}
|
||||||
|
|
||||||
|
function parse_css_float(str) { // float or percentage.
|
||||||
|
if (str[str.length - 1] === '%')
|
||||||
|
return clamp_css_float(parseFloat(str) / 100);
|
||||||
|
return clamp_css_float(parseFloat(str));
|
||||||
|
}
|
||||||
|
|
||||||
|
function css_hue_to_rgb(m1, m2, h) {
|
||||||
|
if (h < 0) h += 1;
|
||||||
|
else if (h > 1) h -= 1;
|
||||||
|
|
||||||
|
if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
|
||||||
|
if (h * 2 < 1) return m2;
|
||||||
|
if (h * 3 < 2) return m1 + (m2 - m1) * (2/3 - h) * 6;
|
||||||
|
return m1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseCSSColor(css_str) {
|
||||||
|
// Remove all whitespace, not compliant, but should just be more accepting.
|
||||||
|
var str = css_str.replace(/ /g, '').toLowerCase();
|
||||||
|
|
||||||
|
// Color keywords (and transparent) lookup.
|
||||||
|
if (str in kCSSColorTable) return kCSSColorTable[str].slice(); // dup.
|
||||||
|
|
||||||
|
// #abc and #abc123 syntax.
|
||||||
|
if (str[0] === '#') {
|
||||||
|
if (str.length === 4) {
|
||||||
|
var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
|
||||||
|
if (!(iv >= 0 && iv <= 0xfff)) return null; // Covers NaN.
|
||||||
|
return [((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8),
|
||||||
|
(iv & 0xf0) | ((iv & 0xf0) >> 4),
|
||||||
|
(iv & 0xf) | ((iv & 0xf) << 4),
|
||||||
|
1];
|
||||||
|
} else if (str.length === 7) {
|
||||||
|
var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
|
||||||
|
if (!(iv >= 0 && iv <= 0xffffff)) return null; // Covers NaN.
|
||||||
|
return [(iv & 0xff0000) >> 16,
|
||||||
|
(iv & 0xff00) >> 8,
|
||||||
|
iv & 0xff,
|
||||||
|
1];
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var op = str.indexOf('('), ep = str.indexOf(')');
|
||||||
|
if (op !== -1 && ep + 1 === str.length) {
|
||||||
|
var fname = str.substr(0, op);
|
||||||
|
var params = str.substr(op+1, ep-(op+1)).split(',');
|
||||||
|
var alpha = 1; // To allow case fallthrough.
|
||||||
|
switch (fname) {
|
||||||
|
case 'rgba':
|
||||||
|
if (params.length !== 4) return null;
|
||||||
|
alpha = parse_css_float(params.pop());
|
||||||
|
// Fall through.
|
||||||
|
case 'rgb':
|
||||||
|
if (params.length !== 3) return null;
|
||||||
|
return [parse_css_int(params[0]),
|
||||||
|
parse_css_int(params[1]),
|
||||||
|
parse_css_int(params[2]),
|
||||||
|
alpha];
|
||||||
|
case 'hsla':
|
||||||
|
if (params.length !== 4) return null;
|
||||||
|
alpha = parse_css_float(params.pop());
|
||||||
|
// Fall through.
|
||||||
|
case 'hsl':
|
||||||
|
if (params.length !== 3) return null;
|
||||||
|
var h = (((parseFloat(params[0]) % 360) + 360) % 360) / 360; // 0 .. 1
|
||||||
|
// NOTE(deanm): According to the CSS spec s/l should only be
|
||||||
|
// percentages, but we don't bother and let float or percentage.
|
||||||
|
var s = parse_css_float(params[1]);
|
||||||
|
var l = parse_css_float(params[2]);
|
||||||
|
var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
|
||||||
|
var m1 = l * 2 - m2;
|
||||||
|
return [clamp_css_byte(css_hue_to_rgb(m1, m2, h+1/3) * 255),
|
||||||
|
clamp_css_byte(css_hue_to_rgb(m1, m2, h) * 255),
|
||||||
|
clamp_css_byte(css_hue_to_rgb(m1, m2, h-1/3) * 255),
|
||||||
|
alpha];
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
171
plugins/jspsych-html-keyboard-response-clickable.js
Normal file
171
plugins/jspsych-html-keyboard-response-clickable.js
Normal file
@@ -0,0 +1,171 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-html-keyboard-response-clickable
|
||||||
|
* Etienne Gaudrain
|
||||||
|
*
|
||||||
|
* Based on:
|
||||||
|
* jspsych-html-keyboard-response @6.1.0
|
||||||
|
* Josh de Leeuw
|
||||||
|
*
|
||||||
|
* Like html-keyboard-response, but where clicking elements with class "clickable" will end the trial.
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
|
||||||
|
jsPsych.plugins["html-keyboard-response-clickable"] = (function() {
|
||||||
|
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'html-keyboard-response-clickable',
|
||||||
|
description: 'Like html-keyboard-response, but where clicking elements with class "clickable" will end the trial.',
|
||||||
|
parameters: {
|
||||||
|
stimulus: {
|
||||||
|
type: jsPsych.plugins.parameterType.HTML_STRING,
|
||||||
|
pretty_name: 'Stimulus',
|
||||||
|
default: undefined,
|
||||||
|
description: 'The HTML string to be displayed'
|
||||||
|
},
|
||||||
|
choices: {
|
||||||
|
type: jsPsych.plugins.parameterType.KEYCODE,
|
||||||
|
array: true,
|
||||||
|
pretty_name: 'Choices',
|
||||||
|
default: jsPsych.ALL_KEYS,
|
||||||
|
description: 'The keys the subject is allowed to press to respond to the stimulus.'
|
||||||
|
},
|
||||||
|
clickable: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Clickable',
|
||||||
|
description: 'Clicking clickable elements ends trial.',
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
prompt: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Prompt',
|
||||||
|
default: null,
|
||||||
|
description: 'Any content here will be displayed below the stimulus.'
|
||||||
|
},
|
||||||
|
stimulus_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Stimulus duration',
|
||||||
|
default: null,
|
||||||
|
description: 'How long to hide the stimulus.'
|
||||||
|
},
|
||||||
|
trial_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Trial duration',
|
||||||
|
default: null,
|
||||||
|
description: 'How long to show trial before it ends.'
|
||||||
|
},
|
||||||
|
response_ends_trial: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Response ends trial',
|
||||||
|
default: true,
|
||||||
|
description: 'If true, trial will end when subject makes a response.'
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
var start_time;
|
||||||
|
var new_html = '<div id="jspsych-html-keyboard-response-stimulus">' + trial.stimulus + '</div>';
|
||||||
|
|
||||||
|
// add prompt
|
||||||
|
if(trial.prompt !== null) {
|
||||||
|
new_html += trial.prompt;
|
||||||
|
}
|
||||||
|
|
||||||
|
// store response
|
||||||
|
var response = {
|
||||||
|
rt: null,
|
||||||
|
key: null
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to end trial when it is time
|
||||||
|
var end_trial = function() {
|
||||||
|
|
||||||
|
// kill any remaining setTimeout handlers
|
||||||
|
jsPsych.pluginAPI.clearAllTimeouts();
|
||||||
|
|
||||||
|
// kill keyboard listeners
|
||||||
|
if(typeof keyboardListener !== 'undefined') {
|
||||||
|
jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
|
||||||
|
}
|
||||||
|
|
||||||
|
// gather the data to store for the trial
|
||||||
|
var trial_data = {
|
||||||
|
"rt": response.rt,
|
||||||
|
"stimulus": trial.stimulus,
|
||||||
|
"key_press": response.key
|
||||||
|
};
|
||||||
|
|
||||||
|
// clear the display
|
||||||
|
display_element.innerHTML = '';
|
||||||
|
|
||||||
|
// move on to the next trial
|
||||||
|
jsPsych.finishTrial(trial_data);
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to handle responses by the subject
|
||||||
|
var after_response = function(info) {
|
||||||
|
|
||||||
|
// after a valid response, the stimulus will have the CSS class 'responded'
|
||||||
|
// which can be used to provide visual feedback that a response was recorded
|
||||||
|
display_element.querySelector('#jspsych-html-keyboard-response-stimulus').className += ' responded';
|
||||||
|
|
||||||
|
// only record the first response
|
||||||
|
if(response.key == null) {
|
||||||
|
response = info;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(trial.response_ends_trial) {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// draw
|
||||||
|
display_element.innerHTML = new_html;
|
||||||
|
start_time = performance.now();
|
||||||
|
|
||||||
|
if(trial.clickable){
|
||||||
|
display_element.querySelectorAll(".clickable").forEach(function(e){
|
||||||
|
var clickHandler = function(event){
|
||||||
|
event.preventDefault();
|
||||||
|
var info = {'key': 'clicked', 'rt': performance.now()-start_time};
|
||||||
|
after_response(info);
|
||||||
|
e.removeEventListener('click', clickHandler);
|
||||||
|
};
|
||||||
|
e.addEventListener('click', clickHandler);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// start the response listener
|
||||||
|
if(trial.choices != jsPsych.NO_KEYS) {
|
||||||
|
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||||
|
callback_function: after_response,
|
||||||
|
valid_responses: trial.choices,
|
||||||
|
rt_method: 'performance',
|
||||||
|
persist: false,
|
||||||
|
allow_held_key: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// hide stimulus if stimulus_duration is set
|
||||||
|
if(trial.stimulus_duration !== null) {
|
||||||
|
jsPsych.pluginAPI.setTimeout(function() {
|
||||||
|
display_element.querySelector('#jspsych-html-keyboard-response-stimulus').style.visibility = 'hidden';
|
||||||
|
}, trial.stimulus_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
// end trial if trial_duration is set
|
||||||
|
if(trial.trial_duration !== null) {
|
||||||
|
jsPsych.pluginAPI.setTimeout(function() {
|
||||||
|
end_trial();
|
||||||
|
}, trial.trial_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
208
plugins/jspsych-image-keyboard-response-clickable.js
Normal file
208
plugins/jspsych-image-keyboard-response-clickable.js
Normal file
@@ -0,0 +1,208 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-image-keyboard-response-clickable
|
||||||
|
* Etienne Gaudrain
|
||||||
|
*
|
||||||
|
* Based on:
|
||||||
|
* jspsych-image-keyboard-response @6.1.0
|
||||||
|
* Josh de Leeuw
|
||||||
|
*
|
||||||
|
* plugin for displaying a stimulus and getting a keyboard response or click on
|
||||||
|
* a page element
|
||||||
|
*
|
||||||
|
* documentation: docs.jspsych.org
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
|
||||||
|
jsPsych.plugins["image-keyboard-response-clickable"] = (function() {
|
||||||
|
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
jsPsych.pluginAPI.registerPreload('image-keyboard-response-clickable', 'stimulus', 'image');
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'image-keyboard-response',
|
||||||
|
description: '',
|
||||||
|
parameters: {
|
||||||
|
stimulus: {
|
||||||
|
type: jsPsych.plugins.parameterType.IMAGE,
|
||||||
|
pretty_name: 'Stimulus',
|
||||||
|
default: undefined,
|
||||||
|
description: 'The image to be displayed'
|
||||||
|
},
|
||||||
|
stimulus_height: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Image height',
|
||||||
|
default: null,
|
||||||
|
description: 'Set the image height in pixels'
|
||||||
|
},
|
||||||
|
stimulus_width: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Image width',
|
||||||
|
default: null,
|
||||||
|
description: 'Set the image width in pixels'
|
||||||
|
},
|
||||||
|
maintain_aspect_ratio: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Maintain aspect ratio',
|
||||||
|
default: true,
|
||||||
|
description: 'Maintain the aspect ratio after setting width or height'
|
||||||
|
},
|
||||||
|
choices: {
|
||||||
|
type: jsPsych.plugins.parameterType.KEYCODE,
|
||||||
|
array: true,
|
||||||
|
pretty_name: 'Choices',
|
||||||
|
default: jsPsych.ALL_KEYS,
|
||||||
|
description: 'The keys the subject is allowed to press to respond to the stimulus.'
|
||||||
|
},
|
||||||
|
clickable: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Clickable',
|
||||||
|
description: 'Clicking clickable elements ends trial.',
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
prompt: {
|
||||||
|
type: jsPsych.plugins.parameterType.STRING,
|
||||||
|
pretty_name: 'Prompt',
|
||||||
|
default: null,
|
||||||
|
description: 'Any content here will be displayed below the stimulus.'
|
||||||
|
},
|
||||||
|
stimulus_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Stimulus duration',
|
||||||
|
default: null,
|
||||||
|
description: 'How long to hide the stimulus.'
|
||||||
|
},
|
||||||
|
trial_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Trial duration',
|
||||||
|
default: null,
|
||||||
|
description: 'How long to show trial before it ends.'
|
||||||
|
},
|
||||||
|
response_ends_trial: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Response ends trial',
|
||||||
|
default: true,
|
||||||
|
description: 'If true, trial will end when subject makes a response.'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
var start_time;
|
||||||
|
|
||||||
|
// display stimulus
|
||||||
|
var html = '<img src="' + trial.stimulus + '" id="jspsych-image-keyboard-response-stimulus" style="';
|
||||||
|
if(trial.stimulus_height !== null) {
|
||||||
|
html += 'height:' + trial.stimulus_height + 'px; '
|
||||||
|
if(trial.stimulus_width == null && trial.maintain_aspect_ratio) {
|
||||||
|
html += 'width: auto; ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(trial.stimulus_width !== null) {
|
||||||
|
html += 'width:' + trial.stimulus_width + 'px; '
|
||||||
|
if(trial.stimulus_height == null && trial.maintain_aspect_ratio) {
|
||||||
|
html += 'height: auto; ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html += '"></img>';
|
||||||
|
|
||||||
|
// add prompt
|
||||||
|
if(trial.prompt !== null) {
|
||||||
|
html += trial.prompt;
|
||||||
|
}
|
||||||
|
|
||||||
|
// render
|
||||||
|
display_element.innerHTML = html;
|
||||||
|
start_time = performance.now();
|
||||||
|
|
||||||
|
// store response
|
||||||
|
var response = {
|
||||||
|
rt: null,
|
||||||
|
key: null
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to end trial when it is time
|
||||||
|
var end_trial = function() {
|
||||||
|
|
||||||
|
// kill any remaining setTimeout handlers
|
||||||
|
jsPsych.pluginAPI.clearAllTimeouts();
|
||||||
|
|
||||||
|
// kill keyboard listeners
|
||||||
|
if(typeof keyboardListener !== 'undefined') {
|
||||||
|
jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
|
||||||
|
}
|
||||||
|
|
||||||
|
// gather the data to store for the trial
|
||||||
|
var trial_data = {
|
||||||
|
"rt": response.rt,
|
||||||
|
"stimulus": trial.stimulus,
|
||||||
|
"key_press": response.key
|
||||||
|
};
|
||||||
|
|
||||||
|
// clear the display
|
||||||
|
display_element.innerHTML = '';
|
||||||
|
|
||||||
|
// move on to the next trial
|
||||||
|
jsPsych.finishTrial(trial_data);
|
||||||
|
};
|
||||||
|
|
||||||
|
// function to handle responses by the subject
|
||||||
|
var after_response = function(info) {
|
||||||
|
|
||||||
|
// after a valid response, the stimulus will have the CSS class 'responded'
|
||||||
|
// which can be used to provide visual feedback that a response was recorded
|
||||||
|
display_element.querySelector('#jspsych-image-keyboard-response-stimulus').className += ' responded';
|
||||||
|
|
||||||
|
// only record the first response
|
||||||
|
if(response.key == null) {
|
||||||
|
response = info;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(trial.response_ends_trial) {
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// start the response listener
|
||||||
|
if(trial.choices != jsPsych.NO_KEYS) {
|
||||||
|
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
|
||||||
|
callback_function: after_response,
|
||||||
|
valid_responses: trial.choices,
|
||||||
|
rt_method: 'performance',
|
||||||
|
persist: false,
|
||||||
|
allow_held_key: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if(trial.clickable){
|
||||||
|
display_element.querySelectorAll(".clickable").forEach(function(e){
|
||||||
|
var clickHandler = function(event){
|
||||||
|
event.preventDefault();
|
||||||
|
var info = {'key': 'clicked', 'rt': performance.now()-start_time};
|
||||||
|
after_response(info);
|
||||||
|
e.removeEventListener('click', clickHandler);
|
||||||
|
};
|
||||||
|
e.addEventListener('click', clickHandler);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// hide stimulus if stimulus_duration is set
|
||||||
|
if(trial.stimulus_duration !== null) {
|
||||||
|
jsPsych.pluginAPI.setTimeout(function() {
|
||||||
|
display_element.querySelector('#jspsych-image-keyboard-response-stimulus').style.visibility = 'hidden';
|
||||||
|
}, trial.stimulus_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
// end trial if trial_duration is set
|
||||||
|
if(trial.trial_duration !== null) {
|
||||||
|
jsPsych.pluginAPI.setTimeout(function() {
|
||||||
|
end_trial();
|
||||||
|
}, trial.trial_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
81
plugins/jspsych-waitfor-function.js
Normal file
81
plugins/jspsych-waitfor-function.js
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
/**
|
||||||
|
* jspsych-waitfor-function
|
||||||
|
* Plugin for waiting for the execution of an arbitrary function during a jspsych experiment.
|
||||||
|
* It's the same as call-function except that a loading wheel is displayed.
|
||||||
|
*
|
||||||
|
* The loading wheel requires jQuery and Semantic.
|
||||||
|
*
|
||||||
|
* Etienne Gaudrain <etienne.gaudrain@cnrs.fr>
|
||||||
|
*
|
||||||
|
**/
|
||||||
|
|
||||||
|
jsPsych.plugins['waitfor-function'] = (function() {
|
||||||
|
|
||||||
|
var plugin = {};
|
||||||
|
|
||||||
|
plugin.info = {
|
||||||
|
name: 'waitfor-function',
|
||||||
|
description: '',
|
||||||
|
parameters: {
|
||||||
|
func: {
|
||||||
|
type: jsPsych.plugins.parameterType.FUNCTION,
|
||||||
|
pretty_name: 'Function',
|
||||||
|
default: undefined,
|
||||||
|
description: 'Function to call'
|
||||||
|
},
|
||||||
|
async: {
|
||||||
|
type: jsPsych.plugins.parameterType.BOOL,
|
||||||
|
pretty_name: 'Asynchronous',
|
||||||
|
default: false,
|
||||||
|
description: 'Is the function call asynchronous?'
|
||||||
|
},
|
||||||
|
min_duration: {
|
||||||
|
type: jsPsych.plugins.parameterType.INT,
|
||||||
|
pretty_name: 'Minimum duration',
|
||||||
|
default: 0,
|
||||||
|
description: 'The wait will last at least this time (in ms).'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
plugin.trial = function(display_element, trial) {
|
||||||
|
|
||||||
|
var start_time = performance.now();
|
||||||
|
|
||||||
|
trial.post_trial_gap = 0;
|
||||||
|
var return_val;
|
||||||
|
|
||||||
|
$(display_element).html("<div class='ui active loader'></div>");
|
||||||
|
|
||||||
|
if(trial.async) {
|
||||||
|
var done = function(data) {
|
||||||
|
return_val = data;
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
trial.func(done);
|
||||||
|
} else {
|
||||||
|
return_val = trial.func();
|
||||||
|
end_trial();
|
||||||
|
}
|
||||||
|
|
||||||
|
function end_trial() {
|
||||||
|
$(display_element).empty();
|
||||||
|
|
||||||
|
var end_time = performance.now();
|
||||||
|
console.log("We finished in "+(end_time-start_time)+" ms...");
|
||||||
|
if(end_time-start_time < trial.min_duration)
|
||||||
|
{
|
||||||
|
trial.post_trial_gap = trial.min_duration - (end_time-start_time);
|
||||||
|
console.log("We need to wait "+trial.post_trial_gap+" ms.");
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_data = {
|
||||||
|
value: return_val
|
||||||
|
};
|
||||||
|
|
||||||
|
jsPsych.finishTrial(trial_data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return plugin;
|
||||||
|
})();
|
||||||
BIN
tests/res/cat_black_2.mp3
Normal file
BIN
tests/res/cat_black_2.mp3
Normal file
Binary file not shown.
BIN
tests/res/cat_black_2.wav
Normal file
BIN
tests/res/cat_black_2.wav
Normal file
Binary file not shown.
BIN
tests/res/test.png
Normal file
BIN
tests/res/test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
12
tests/test_jspsych-audio-safari-init.html
Normal file
12
tests/test_jspsych-audio-safari-init.html
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="refresh" content="0;url=test_jspsych-audio-safari-init.php" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<a href='test_jspsych-audio-safari-init.php'>Redirecting to test_jspsych-audio-safari-init.php...</a>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
179
tests/test_jspsych-audio-safari-init.php
Normal file
179
tests/test_jspsych-audio-safari-init.php
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
<?php
|
||||||
|
$html_button = FALSE;
|
||||||
|
if(isset($_GET['html-button'])){
|
||||||
|
$html_button = TRUE;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Test for jspsych-html-keyboard-response-clickable</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.2.0/jspsych.js"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.2.0/css/jspsych.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.2.0/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.2.0/plugins/jspsych-html-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.2.0/plugins/jspsych-audio-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.2.0/plugins/jspsych-call-function.js"></script>
|
||||||
|
<!--
|
||||||
|
<script src="/js/vendor/jspsych-6.1.0.js"></script>
|
||||||
|
<link href="/css/jspsych.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-html-keyboard-response.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-html-keyboard-response.js"></script>
|
||||||
|
<script src="/js/vendor/jspsych-plugins/jspsych-audio-keyboard-response.js"></script>
|
||||||
|
-->
|
||||||
|
<script src="/js/vendor/jspsych-plugins-dbsplab/jspsych-audio-safari-init.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php
|
||||||
|
if($html_button){ echo "<h1>With HTML start button</h1>"; }
|
||||||
|
?>
|
||||||
|
<div id='jspsych-wrapper'>
|
||||||
|
<?php
|
||||||
|
if($html_button){
|
||||||
|
?>
|
||||||
|
<button id='expe-start'>START THE EXPERIMENT</button>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
<?php
|
||||||
|
if($html_button){
|
||||||
|
?>
|
||||||
|
document.getElementById('expe-start').addEventListener('click', function(){
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
// Without Safari init plugin
|
||||||
|
var timeline0 = [];
|
||||||
|
timeline0.push({
|
||||||
|
type: 'html-keyboard-response',
|
||||||
|
choices: [32],
|
||||||
|
stimulus: '<h1>Without Safari init plugin</h1><p>Press SPACE when you are ready to listen (or just wait).</p>',
|
||||||
|
trial_duration: 2000
|
||||||
|
});
|
||||||
|
timeline0.push({
|
||||||
|
type: 'audio-keyboard-response',
|
||||||
|
stimulus: 'res/cat_black_2.mp3',
|
||||||
|
prompt: '<p>LISTEN<br>(If it is Safari, there will be no sound)</p>',
|
||||||
|
choices: [32]
|
||||||
|
});
|
||||||
|
|
||||||
|
// With a simple button
|
||||||
|
var timeline1 = [];
|
||||||
|
timeline1.push({
|
||||||
|
type: 'html-button-response',
|
||||||
|
choices: ['START'],
|
||||||
|
stimulus: '<h1>With simple start button</h1><p>(The button has no audio context action attached to it)</p>'
|
||||||
|
});
|
||||||
|
timeline1.push({
|
||||||
|
type: 'html-keyboard-response',
|
||||||
|
choices: [32],
|
||||||
|
trial_duration: 2000,
|
||||||
|
stimulus: '<p>Press SPACE when you are ready to listen (or just wait).</p>'
|
||||||
|
});
|
||||||
|
timeline1.push({
|
||||||
|
type: 'audio-keyboard-response',
|
||||||
|
stimulus: 'res/cat_black_2.mp3',
|
||||||
|
prompt: '<p>LISTEN<br>(If it is Safari, there will be no sound)</p>',
|
||||||
|
choices: [32]
|
||||||
|
});
|
||||||
|
|
||||||
|
// With Safari init plugin
|
||||||
|
var timeline2 = [];
|
||||||
|
timeline2.push({
|
||||||
|
type: 'audio-safari-init'
|
||||||
|
});
|
||||||
|
timeline2.push({
|
||||||
|
type: 'html-keyboard-response',
|
||||||
|
choices: [32],
|
||||||
|
stimulus: '<h1>With Safari init plugin</h1><p>Press SPACE when you are ready to listen (or just wait).</p>',
|
||||||
|
trial_duration: 2000
|
||||||
|
});
|
||||||
|
timeline2.push({
|
||||||
|
type: 'audio-keyboard-response',
|
||||||
|
stimulus: 'res/cat_black_2.mp3',
|
||||||
|
prompt: '<p>LISTEN<br>(there should be a sound, even on Safari)</p>',
|
||||||
|
choices: [32]
|
||||||
|
});
|
||||||
|
|
||||||
|
// With an HTML button
|
||||||
|
var timeline3 = [];
|
||||||
|
timeline3.push({
|
||||||
|
type: 'call-function',
|
||||||
|
func: function(){
|
||||||
|
window.location.replace('?html-button');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var timeline_index;
|
||||||
|
|
||||||
|
var timeline = [];
|
||||||
|
timeline.push({
|
||||||
|
type: 'html-button-response',
|
||||||
|
choices: ['without the <code>audio-safari-init</code> plugin', 'with a simple START button', 'with the <code>audio-safari-init</code> plugin'<?php echo ($html_button)?'':', "with HTML button"'; ?>],
|
||||||
|
stimulus: "<p>Choose how to start</p>",
|
||||||
|
on_finish: function(){
|
||||||
|
var data = jsPsych.data.get().last(1).values()[0];
|
||||||
|
timeline_index = data.button_pressed;
|
||||||
|
console.log("The selected timeline is "+timeline_index);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
timeline.push({
|
||||||
|
timeline: timeline0,
|
||||||
|
conditional_function: function(){
|
||||||
|
console.log('timeline_index='+timeline_index);
|
||||||
|
return timeline_index == 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
timeline.push({
|
||||||
|
timeline: timeline1,
|
||||||
|
conditional_function: function(){
|
||||||
|
return timeline_index == 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
timeline.push({
|
||||||
|
timeline: timeline2,
|
||||||
|
conditional_function: function(){
|
||||||
|
return timeline_index == 2;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
<?php
|
||||||
|
if(!$html_button){
|
||||||
|
?>
|
||||||
|
timeline.push({
|
||||||
|
timeline: timeline3,
|
||||||
|
conditional_function: function(){
|
||||||
|
return timeline_index == 3;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: timeline,
|
||||||
|
display_element: 'jspsych-wrapper',
|
||||||
|
use_webaudio: true
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
<?php
|
||||||
|
if($html_button){
|
||||||
|
?>
|
||||||
|
});
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
39
tests/test_jspsych-html-keyboard-response-clickable.html
Normal file
39
tests/test_jspsych-html-keyboard-response-clickable.html
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Test for jspsych-html-keyboard-response-clickable</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.2.0/jspsych.js"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.2.0/css/jspsych.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="../plugins/jspsych-html-keyboard-response-clickable.js"></script>
|
||||||
|
<style>
|
||||||
|
.clickable {
|
||||||
|
font-size: 90%;
|
||||||
|
color: rgb(103,161,208);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function(event) {
|
||||||
|
|
||||||
|
var test_trial = {
|
||||||
|
type: 'html-keyboard-response-clickable',
|
||||||
|
choices: [32],
|
||||||
|
stimulus: '<p>STIMULUS</p><p class="clickable">(Click here)</p>',
|
||||||
|
on_finish: function(){
|
||||||
|
console.log("Trial is finished.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [test_trial]
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
53
tests/test_jspsych-image-keyboard-response-clickable.html
Normal file
53
tests/test_jspsych-image-keyboard-response-clickable.html
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Test for jspsych-html-keyboard-response-clickable</title>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/plugins/jspsych-image-keyboard-response.js"></script>
|
||||||
|
<link href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.1.0/css/jspsych.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="../plugins/jspsych-image-keyboard-response-clickable.js"></script>
|
||||||
|
<style>
|
||||||
|
.clickable {
|
||||||
|
font-size: 90%;
|
||||||
|
color: rgb(103,161,208);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function(event) {
|
||||||
|
|
||||||
|
var test_trial1 = {
|
||||||
|
type: 'image-keyboard-response',
|
||||||
|
choices: [32],
|
||||||
|
stimulus_height: 500,
|
||||||
|
prompt: '<p>1</p><p class="clickable">(Click here)</p>',
|
||||||
|
stimulus: 'res/test.png',
|
||||||
|
on_finish: function(){
|
||||||
|
console.log("Trial is finished.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var test_trial2 = {
|
||||||
|
type: 'image-keyboard-response-clickable',
|
||||||
|
choices: [32],
|
||||||
|
stimulus_height: 500,
|
||||||
|
prompt: '<p>2</p><p class="clickable">(Click here)</p>',
|
||||||
|
stimulus: 'res/test.png',
|
||||||
|
on_finish: function(){
|
||||||
|
console.log("Trial is finished.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [test_trial1, test_trial2]
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user