diff --git a/README.md b/README.md index fae61f9..bc32eed 100644 --- a/README.md +++ b/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 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. diff --git a/docs/jspsych-audio-keyboard-response-wait.md b/docs/jspsych-audio-keyboard-response-wait.md new file mode 100644 index 0000000..6230304 --- /dev/null +++ b/docs/jspsych-audio-keyboard-response-wait.md @@ -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: "

Is the pitch high or low? Press 'e' for low and 'i' for high.

", + response_ends_trial: true. + wait_for_audio: true +}; +``` diff --git a/docs/jspsych-audio-sequence-button-response.md b/docs/jspsych-audio-sequence-button-response.md new file mode 100644 index 0000000..7690171 --- /dev/null +++ b/docs/jspsych-audio-sequence-button-response.md @@ -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 | `''` | 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 `
` wrapping the button group. +jspsych-audio-sequence-button-response | This class is applied to the `
`s wrapping the buttons. +jspsych-prompt | The `

` that contains the prompt. +highlighted | The button inside the `

`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: "

Which one is different from the two others?

" +}; +``` diff --git a/docs/jspsych-crm.md b/docs/jspsych-crm.md new file mode 100644 index 0000000..2b63f26 --- /dev/null +++ b/docs/jspsych-crm.md @@ -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 `
` 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. diff --git a/docs/jspsych-nafc-adaptive.md b/docs/jspsych-nafc-adaptive.md new file mode 100644 index 0000000..58ef28f --- /dev/null +++ b/docs/jspsych-nafc-adaptive.md @@ -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 + + + + + + +``` + +* `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 ` + + + + + + + + + + + + + + + +
+ + + +``` diff --git a/docs/jspsych-waitfor-function.md b/docs/jspsych-waitfor-function.md new file mode 100644 index 0000000..01f3b1c --- /dev/null +++ b/docs/jspsych-waitfor-function.md @@ -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(); + } +} +``` diff --git a/js/tools.js b/js/tools.js new file mode 100644 index 0000000..05cd79c --- /dev/null +++ b/js/tools.js @@ -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) + $("
"+msg+"
").appendTo(to); + else + $("
"+msg+"
").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 environnement calme, et de préférence en utilisant un casque de bonne qualité. 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 calm environment, and preferably using good quality headphones. 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 stille omgeving uit te voeren en bij voorkeur een koptelefoon van goede kwaliteit 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 = $( + "").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 (vm)?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 + * 2020-05-19: Fixed some typos + * 2020-12-08: Fixed threshold calculation + *----------------------------------------------------------------------------*/ + +/* To use, you need to include the following in your webpage: + + + + +*/ + +/* 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: "

Test

You will hear three sounds. Choose the one that is different from the two others.

", + closing_message: "

Thank you!

This is the end of this block. Thank you for your help!

" +}; +*/ + +// 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: "", + 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: [ + "

Thank you!

" + + "

This is the end of that block.

" + ], + show_clickable_nav: true, + button_label_next: 'Next' + }); + */ + + return {timeline: run_timeline}; + +} diff --git a/plugins/jspsych-audio-keyboard-response-clickable.js b/plugins/jspsych-audio-keyboard-response-clickable.js new file mode 100644 index 0000000..81bb533 --- /dev/null +++ b/plugins/jspsych-audio-keyboard-response-clickable.js @@ -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; +})(); diff --git a/plugins/jspsych-audio-keyboard-response-wait.js b/plugins/jspsych-audio-keyboard-response-wait.js new file mode 100644 index 0000000..375e824 --- /dev/null +++ b/plugins/jspsych-audio-keyboard-response-wait.js @@ -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; +})(); diff --git a/plugins/jspsych-audio-safari-init.js b/plugins/jspsych-audio-safari-init.js new file mode 100644 index 0000000..dd7816f --- /dev/null +++ b/plugins/jspsych-audio-safari-init.js @@ -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; +})(); diff --git a/plugins/jspsych-audio-sequence-button-response.js b/plugins/jspsych-audio-sequence-button-response.js new file mode 100644 index 0000000..15b5b40 --- /dev/null +++ b/plugins/jspsych-audio-sequence-button-response.js @@ -0,0 +1,332 @@ +/** + * jspsych-audio-sequence-button-response + * Etienne Gaudrain + * + * 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: '', + 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 += "

"+trial.prompt+"

"; + } + + html += '
'; + for(var i = 0; i < trial.choices.length; i++) { + var str = buttons[i].replace(/%choice%/g, trial.choices[i]); + html += '
' + str + '
'; + } + html += '
'; + + //show prompt if there is one + if(trial.prompt_position != 'top' && trial.prompt !== null) { + html += "

"+trial.prompt+"

"; + } + + $(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; +})(); diff --git a/plugins/jspsych-crm.js b/plugins/jspsych-crm.js new file mode 100644 index 0000000..6eed056 --- /dev/null +++ b/plugins/jspsych-crm.js @@ -0,0 +1,544 @@ +/** + * jspsych-crm + * Etienne Gaudrain + * + * 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 += "

"+trial.prompt+"

"; + } + + html += '
'; + for(var c of trial.colors) { + html += ""; + html += ""; + for(var n of trial.numbers) { + html += ""; + } + html += ""; + html += ""; + } + html += ''; + + $(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 , 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; +} diff --git a/plugins/jspsych-html-keyboard-response-clickable.js b/plugins/jspsych-html-keyboard-response-clickable.js new file mode 100644 index 0000000..43a8baf --- /dev/null +++ b/plugins/jspsych-html-keyboard-response-clickable.js @@ -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 = '
' + trial.stimulus + '
'; + + // 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; +})(); diff --git a/plugins/jspsych-image-keyboard-response-clickable.js b/plugins/jspsych-image-keyboard-response-clickable.js new file mode 100644 index 0000000..4884da5 --- /dev/null +++ b/plugins/jspsych-image-keyboard-response-clickable.js @@ -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 = ''; + + // 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; +})(); diff --git a/plugins/jspsych-waitfor-function.js b/plugins/jspsych-waitfor-function.js new file mode 100644 index 0000000..1e04f49 --- /dev/null +++ b/plugins/jspsych-waitfor-function.js @@ -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 + * + **/ + +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("
"); + + 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; +})(); diff --git a/tests/res/cat_black_2.mp3 b/tests/res/cat_black_2.mp3 new file mode 100644 index 0000000..f100adc Binary files /dev/null and b/tests/res/cat_black_2.mp3 differ diff --git a/tests/res/cat_black_2.wav b/tests/res/cat_black_2.wav new file mode 100644 index 0000000..31af9d9 Binary files /dev/null and b/tests/res/cat_black_2.wav differ diff --git a/tests/res/test.png b/tests/res/test.png new file mode 100644 index 0000000..3654637 Binary files /dev/null and b/tests/res/test.png differ diff --git a/tests/test_jspsych-audio-safari-init.html b/tests/test_jspsych-audio-safari-init.html new file mode 100644 index 0000000..ced6cb4 --- /dev/null +++ b/tests/test_jspsych-audio-safari-init.html @@ -0,0 +1,12 @@ + + + + + + + + + Redirecting to test_jspsych-audio-safari-init.php... + + + diff --git a/tests/test_jspsych-audio-safari-init.php b/tests/test_jspsych-audio-safari-init.php new file mode 100644 index 0000000..60d5cf9 --- /dev/null +++ b/tests/test_jspsych-audio-safari-init.php @@ -0,0 +1,179 @@ + + + + + + Test for jspsych-html-keyboard-response-clickable + + + + + + + + + + + +With HTML start button"; } +?> +
+ + + +
+ + + + diff --git a/tests/test_jspsych-html-keyboard-response-clickable.html b/tests/test_jspsych-html-keyboard-response-clickable.html new file mode 100644 index 0000000..09db69f --- /dev/null +++ b/tests/test_jspsych-html-keyboard-response-clickable.html @@ -0,0 +1,39 @@ + + + + + Test for jspsych-html-keyboard-response-clickable + + + + + + + + + + + diff --git a/tests/test_jspsych-image-keyboard-response-clickable.html b/tests/test_jspsych-image-keyboard-response-clickable.html new file mode 100644 index 0000000..2c63852 --- /dev/null +++ b/tests/test_jspsych-image-keyboard-response-clickable.html @@ -0,0 +1,53 @@ + + + + + Test for jspsych-html-keyboard-response-clickable + + + + + + + + + + + +
"+trial.color_labels[c]+""+n+""+trial.color_labels[c]+"