dBSPL/jspsych-plugins
14
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Plugins for jspsych@6.1

Browse Source
This commit is contained in:
Etienne Gaudrain
2026-04-22 10:43:26 +02:00
parent cb99050d99
commit d97628cc61
23 changed files with 3600 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
plugins/jspsych-audio-keyboard-response-clickable.js Normal file
View File

@@ -0,0 +1,229 @@
/**
* jspsych-audio-keyboard-response-clickable
* Etienne Gaudrain
*
* Based on:
* jspsych-audio-keyboard-response @6.2.0
* Josh de Leeuw
*
* plugin for playing an audio file and getting a keyboard response or click on
* a page element
*
* documentation: docs.jspsych.org
*
**/
jsPsych.plugins["audio-keyboard-response-clickable"] = (function() {
var plugin = {};
jsPsych.pluginAPI.registerPreload('audio-keyboard-response-clickable', 'stimulus', 'audio');
plugin.info = {
name: 'audio-keyboard-response-clickable',
description: '',
parameters: {
stimulus: {
type: jsPsych.plugins.parameterType.AUDIO,
pretty_name: 'Stimulus',
default: undefined,
description: 'The audio to be played.'
},
choices: {
type: jsPsych.plugins.parameterType.KEYCODE,
pretty_name: 'Choices',
array: true,
default: jsPsych.ALL_KEYS,
description: 'The keys the subject is allowed to press to respond to the stimulus.'
},
prompt: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt',
default: null,
description: 'Any content here will be displayed below the stimulus.'
},
clickable: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Clickable',
description: 'Clicking clickable elements ends trial.',
default: true
},
trial_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Trial duration',
default: null,
description: 'The maximum duration to wait for a response.'
},
response_ends_trial: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Response ends trial',
default: true,
description: 'If true, the trial will end when user makes a response.'
},
trial_ends_after_audio: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Trial ends after audio',
default: false,
description: 'If true, then the trial will end as soon as the audio file finishes playing.'
},
response_allowed_while_playing: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Response allowed while playing',
default: true,
description: 'If true, then responses are allowed while the audio is playing. ' +
'If false, then the audio must finish playing before a response is accepted.'
}
}
}
plugin.trial = function(display_element, trial) {
var startTime;
// setup stimulus
var context = jsPsych.pluginAPI.audioContext();
if(context !== null) {
var source = context.createBufferSource();
source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
source.connect(context.destination);
} else {
var audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
audio.currentTime = 0;
}
// set up end event if trial needs it
if(trial.trial_ends_after_audio) {
if(context !== null) {
source.addEventListener('ended', end_trial);
} else {
audio.addEventListener('ended', end_trial);
}
}
// show prompt if there is one
if(trial.prompt !== null) {
display_element.innerHTML = trial.prompt;
if(trial.clickable){
display_element.querySelectorAll(".clickable").forEach(function(e){
var clickHandler = function(event){
event.preventDefault();
var info = {'key': 'clicked', 'rt': performance.now()-startTime};
after_response(info);
e.removeEventListener('click', clickHandler);
};
e.addEventListener('click', clickHandler);
});
}
}
// store response
var response = {
rt: null,
key: null
};
// function to end trial when it is time
function end_trial() {
// kill any remaining setTimeout handlers
jsPsych.pluginAPI.clearAllTimeouts();
// stop the audio file if it is playing
// remove end event listeners if they exist
if(context !== null) {
source.stop();
source.removeEventListener('ended', end_trial);
source.removeEventListener('ended', setup_keyboard_listener);
} else {
audio.pause();
audio.removeEventListener('ended', end_trial);
audio.removeEventListener('ended', setup_keyboard_listener);
}
// kill keyboard listeners
jsPsych.pluginAPI.cancelAllKeyboardResponses();
// gather the data to store for the trial
if(context !== null && response.rt !== null) {
response.rt = Math.round(response.rt * 1000);
}
var trial_data = {
"rt": response.rt,
"stimulus": trial.stimulus,
"key_press": response.key
};
// clear the display
display_element.innerHTML = '';
// move on to the next trial
jsPsych.finishTrial(trial_data);
}
// function to handle responses by the subject
var after_response = function(info) {
// only record the first response
if(response.key == null) {
response = info;
}
if(trial.response_ends_trial) {
end_trial();
}
};
function setup_keyboard_listener() {
// start the response listener
if(context !== null) {
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: after_response,
valid_responses: trial.choices,
rt_method: 'audio',
persist: false,
allow_held_key: false,
audio_context: context,
audio_context_start_time: startTime
});
} else {
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: after_response,
valid_responses: trial.choices,
rt_method: 'performance',
persist: false,
allow_held_key: false
});
}
}
// start audio
if(context !== null) {
startTime = context.currentTime;
source.start(startTime);
} else {
audio.play();
}
// start keyboard listener when trial starts or sound ends
if(trial.response_allowed_while_playing) {
setup_keyboard_listener();
} else if(!trial.trial_ends_after_audio) {
if(context !== null) {
source.addEventListener('ended', setup_keyboard_listener);
} else {
audio.addEventListener('ended', setup_keyboard_listener);
}
}
// end trial if time limit is set
if(trial.trial_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {
end_trial();
}, trial.trial_duration);
}
};
return plugin;
})();

230
plugins/jspsych-audio-keyboard-response-wait.js Normal file
View File

@@ -0,0 +1,230 @@
/**
* jspsych-audio-keyboard-response-wait
* Josh de Leeuw, Etienne Gaudrain
*
* plugin for playing an audio file and getting a keyboard response.
*
* Based on jspsych-audio-keyboard-response but offers the possibility to wait for
* the audio to finish before moving to next trial.
*
**/
jsPsych.plugins["audio-keyboard-response-wait"] = (function() {
var plugin = {};
jsPsych.pluginAPI.registerPreload('audio-keyboard-response-wait', 'stimulus', 'audio');
plugin.info = {
name: 'audio-keyboard-response-wait',
description: '',
parameters: {
stimulus: {
type: jsPsych.plugins.parameterType.AUDIO,
pretty_name: 'Stimulus',
default: undefined,
description: 'The audio to be played.'
},
choices: {
type: jsPsych.plugins.parameterType.KEYCODE,
pretty_name: 'Choices',
array: true,
default: jsPsych.ALL_KEYS,
description: 'The keys the subject is allowed to press to respond to the stimulus.'
},
prompt: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt',
default: null,
description: 'This string can contain HTML markup. The intention is that it can be used to provide a reminder about the action the subject is supposed to take.'
},
trial_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Trial duration',
default: null,
description: 'The maximum duration to wait for a response.'
},
response_ends_trial: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Response ends trial',
default: true,
description: 'If true, the trial will end when user makes a response.'
},
trial_ends_after_audio: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Trial ends after audio',
default: false,
description: 'If true, then the trial will end as soon as the audio file finishes playing.'
},
wait_for_audio: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Wait for audio to finish',
default: false,
description: 'If `response_ends_trial` is true, this will still wait for the audio to end before ending the trial.'
},
dim_content_after_response: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Dim content after response',
default: false,
description: 'Will dim the content once the response has been given.'
}
}
}
plugin.trial = function(display_element, trial) {
// setup stimulus
var context = jsPsych.pluginAPI.audioContext();
if(context !== null){
var source = context.createBufferSource();
source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
source.connect(context.destination);
} else {
var audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
audio.currentTime = 0;
}
// set up end event if trial needs it
var audio_is_finished = false;
var mark_audio_as_finished = function(){ audio_is_finished = true; };
if(trial.trial_ends_after_audio){
if(context !== null){
source.onended = function() {
end_trial();
}
} else {
audio.addEventListener('ended', end_trial);
}
} else {
if(context !== null){
source.onended = function() {
mark_audio_as_finished();
}
} else {
audio.addEventListener('ended', mark_audio_as_finished);
}
}
// show prompt if there is one
if (trial.prompt !== null) {
display_element.innerHTML = trial.prompt;
}
// store response
var response = {
rt: null,
key: null
};
// function to end trial when it is time
function end_trial() {
// kill any remaining setTimeout handlers
jsPsych.pluginAPI.clearAllTimeouts();
// stop the audio file if it is playing
// remove end event listeners if they exist
if(context !== null){
source.stop();
source.onended = function() { }
} else {
audio.pause();
audio.removeEventListener('ended', end_trial);
}
// kill keyboard listeners
jsPsych.pluginAPI.cancelAllKeyboardResponses();
// gather the data to store for the trial
if(context !== null && response.rt !== null){
response.rt = Math.round(response.rt * 1000);
}
var trial_data = {
"rt": response.rt,
"stimulus": trial.stimulus,
"key_press": response.key
};
// clear the display
display_element.innerHTML = '';
display_element.style.removeProperty("opacity");
// move on to the next trial
jsPsych.finishTrial(trial_data);
};
// function to handle responses by the subject
var after_response = function(info) {
// only record the first response
if (response.key == null) {
response = info;
}
if (trial.dim_content_after_response) {
display_element.style.opacity = "50%";
}
if (trial.response_ends_trial) {
if (trial.wait_for_audio && !audio_is_finished) {
jsPsych.pluginAPI.cancelAllKeyboardResponses();
if(context !== null){
source.onended = function() {
end_trial();
}
} else {
audio.addEventListener('ended', end_trial);
}
// Just in case the audio finished in the meantime
if(audio_is_finished) {
end_trial();
}
} else {
end_trial();
}
}
};
// start audio
if(context !== null){
startTime = context.currentTime;
source.start(startTime);
} else {
audio.play();
}
// start the response listener
if(context !== null) {
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: after_response,
valid_responses: trial.choices,
rt_method: 'audio',
persist: false,
allow_held_key: false,
audio_context: context,
audio_context_start_time: startTime
});
} else {
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: after_response,
valid_responses: trial.choices,
rt_method: 'performance',
persist: false,
allow_held_key: false
});
}
// end trial if time limit is set
if (trial.trial_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {
end_trial();
}, trial.trial_duration);
}
};
return plugin;
})();

87
plugins/jspsych-audio-safari-init.js Normal file
View File

@@ -0,0 +1,87 @@
/**
* jspsych-audio-safari-init
* Etienne Gaudrain - 2021-02-01
*
* Safari is the new Internet Explorer and does everything differently from others
* for better, and mostly for worse. Here is a plugin to display a screen for the user to click on
* before starting the experiment to unlock the audio context, if we are dealing with Safari.
*
* See https://github.com/jspsych/jsPsych/issues/1445.
*
* NOTE: When not using the WebAudio API (jsPsych initialised with `use_webaudio=false`),
* jspsych.js needs to be modifed to expose the list of preloaded sounds (or, it seems,
* at least the first one). In the code below, this is done within
* `jsPsych.pluginAPI.preloaded_audio_IDs()`.
*
**/
jsPsych.plugins["audio-safari-init"] = (function() {
var plugin = {};
//jsPsych.pluginAPI.registerPreload('audio-safari-init', 'stimulus', 'audio');
plugin.info = {
name: 'audio-safari-init',
description: '',
parameters: {
prompt: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt',
default: "Click on the screen to start the experiment",
description: 'The prompt asking the user to click on the screen.'
}
}
}
plugin.trial = function(display_element, trial) {
// Ideally, we would want to be able to detect this on feature basis rather than using userAgents,
// but Safari just doesn't count clicks not directly aimed at starting sounds, while other browsers do.
const is_Safari = /Version\/.*Safari\//.test(navigator.userAgent) && !window.MSStream;
if(is_Safari){
display_element.innerHTML = trial.prompt;
document.addEventListener('touchstart', init_audio);
document.addEventListener('click', init_audio);
} else {
jsPsych.finishTrial();
}
function init_audio(){
var context = jsPsych.pluginAPI.audioContext();
if(context==null){
// This requires the hacked version of jspsych 6.1.0_eg2021-02-21
jsPsych.pluginAPI.preloaded_audio_IDs().slice(0,1).forEach(function(a){
var b = jsPsych.pluginAPI.getAudioBuffer(a);
b.play();
b.pause();
b.currentTime = 0;
});
}
end_trial();
}
// function to end trial when it is time
function end_trial() {
document.removeEventListener('touchstart', init_audio);
document.removeEventListener('click', init_audio);
// kill any remaining setTimeout handlers
jsPsych.pluginAPI.clearAllTimeouts();
// kill keyboard listeners
jsPsych.pluginAPI.cancelAllKeyboardResponses();
// clear the display
display_element.innerHTML = '';
// move on to the next trial
jsPsych.finishTrial();
}
};
return plugin;
})();

332
plugins/jspsych-audio-sequence-button-response.js Normal file
View File

@@ -0,0 +1,332 @@
/**
* jspsych-audio-sequence-button-response
* Etienne Gaudrain <etienne.gaudrain@cnrs.fr>
*
* Plugin for playing a sequence of audio files and getting an HTML button response
*
* Based on jspsych-audio-button-response.
**/
jsPsych.plugins["audio-sequence-button-response"] = (function() {
var plugin = {};
jsPsych.pluginAPI.registerPreload('audio-sequence-button-response', 'stimuli', 'audio');
plugin.info = {
name: 'audio-sequence-button-response',
description: '',
parameters: {
stimuli: {
type: jsPsych.plugins.parameterType.AUDIO,
pretty_name: 'Stimuli',
default: undefined,
array: true,
description: 'The audio files to be played.'
},
choices: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Choices',
default: undefined,
array: true,
description: 'The button labels.'
},
button_html: {
type: jsPsych.plugins.parameterType.HTML_STRING,
pretty_name: 'Button HTML',
default: '<button class="jspsych-btn">%choice%</button>',
array: true,
description: 'Custom button. Can make your own style.'
},
prompt: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt',
default: null,
description: 'Any content here will be displayed below (or above) the buttons.'
},
prompt_position: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt position',
default: 'bottom',
description: 'Determines whether the prompt is printed above or below the buttons: "top" or "bottom".'
},
isi: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Inter-stimulus-interval',
default: 0,
description: 'The delay in between stimulus presentation (in ms).'
},
trial_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Trial duration',
default: null,
description: 'The maximum duration to wait for a response.'
},
margin_vertical: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Margin vertical',
default: '0px',
description: 'Vertical margin of button.'
},
margin_horizontal: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Margin horizontal',
default: '8px',
description: 'Horizontal margin of button.'
},
response_ends_trial: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Response ends trial',
default: true,
description: 'If true, the trial will end when user makes a response.'
},
trial_ends_after_audio: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Trial ends after audio',
default: false,
description: 'If true, then the trial will end as soon as all audio files are finished playing.'
},
visual_feedback: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Visual feedback',
default: false,
description: 'If true, then visual feedback will be provided after the trial ends.'
},
i_correct: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Index of the correct button',
default: null,
description: 'This can be an integer or a function. Only necessary if visual feedback is true.'
},
}
}
plugin.trial = function(display_element, trial) {
var context = jsPsych.pluginAPI.audioContext();
if(context !== null) {
var source;
} else {
var audio;
}
if(trial.visual_feedback===true && trial.i_correct===null)
throw "'i_correct' has to be defined if visual feedback is requested.";
//display buttons
var buttons = [];
function play_next_audio() {
//var i = load_next_audio();
if(typeof play_next_audio.i === 'undefined')
{
// This is the first pass, we disable the buttons
$(display_element).find(".jspsych-audio-sequence-button-response button").addClass("disabled").prop('disabled', true);
play_next_audio.i = 0;
}
/*
// We un-highlight the previous button
if(play_next_audio.i>0)
$(display_element).find('#jspsych-audio-sequence-button-response-' + (play_next_audio.i-1) +' button').toggleClass('highlighted');
*/
// Is it the last stimulus, do we need to end trial?
if(play_next_audio.i >= trial.stimuli.length) {
$(display_element).find(".jspsych-audio-sequence-button-response button").removeClass("disabled").prop('disabled', false);
if(trial.trial_ends_after_audio) {
end_trial();
}
return false;
}
// Prepare the next sound to play
if(context !== null) {
source = context.createBufferSource();
source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimuli[play_next_audio.i]);
source.connect(context.destination);
source.onended = function(){
$(display_element).find('.jspsych-audio-sequence-button-response button.highlighted').removeClass('highlighted');
setTimeout(play_next_audio, trial.isi);
};
} else {
audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimuli[play_next_audio.i]);
audio.currentTime = 0;
audio.addEventListener('ended', function(){
$(display_element).find('.jspsych-audio-sequence-button-response button.highlighted').removeClass('highlighted');
setTimeout(play_next_audio, trial.isi);
});
}
// Highlight the current button
$(display_element).find('#jspsych-audio-sequence-button-response-' + play_next_audio.i +' button').addClass('highlighted');
if(context !== null) {
startTime = context.currentTime;
source.start(startTime);
} else {
audio.play();
}
play_next_audio.i++;
}
//display buttons
if(Array.isArray(trial.button_html)) {
if(trial.button_html.length == trial.choices.length) {
buttons = trial.button_html;
} else {
console.error('Error in ' + plugin.info.name + '. The length of the button_html array does not equal the length of the choices array');
}
} else {
for(var i = 0; i < trial.choices.length; i++) {
buttons.push(trial.button_html);
}
}
var html = '';
//show prompt if there is one
if(trial.prompt_position == 'top' && trial.prompt !== null) {
html += "<p class='jspsych-prompt'>"+trial.prompt+"</p>";
}
html += '<div id="jspsych-audio-button-response-btngroup">';
for(var i = 0; i < trial.choices.length; i++) {
var str = buttons[i].replace(/%choice%/g, trial.choices[i]);
html += '<div class="jspsych-audio-sequence-button-response" style="cursor: pointer; display: inline-block; margin:' + trial.margin_vertical + ' ' + trial.margin_horizontal + '" id="jspsych-audio-sequence-button-response-' + i + '" data-choice="' + i + '">' + str + '</div>';
}
html += '</div>';
//show prompt if there is one
if(trial.prompt_position != 'top' && trial.prompt !== null) {
html += "<p class='jspsych-prompt'>"+trial.prompt+"</p>";
}
$(display_element).html( html );
for(var i = 0; i < trial.choices.length; i++) {
$(display_element).find('#jspsych-audio-sequence-button-response-' + i).click( function(e) {
var choice = e.currentTarget.getAttribute('data-choice'); // don't use dataset for jsdom compatibility
after_response(choice);
});
}
// store response
var response = {
rt: null,
button: null
};
// A custom blink function for feedback in case semantic's transition isn't there
function blink(elm, n, cssClass, after_cb) {
if(n<=0) {
after_cb();
} else {
$(elm).toggleClass(cssClass);
setTimeout(function(){ blink(elm, n-1, cssClass, after_cb); }, 200);
}
}
// function to handle responses by the subject
function after_response(choice) {
// measure rt
var end_time = performance.now();
var rt = end_time - start_time;
response.button = choice;
response.rt = rt;
// disable all the buttons after a response
$('.jspsych-audio-sequence-button-response button').addClass('disabled').prop('disabled', true);
if(trial.visual_feedback) {
var cssClass, n, animation;
var correct_button = $('#jspsych-audio-sequence-button-response-'+trial.i_correct+' button');
var correct = parseInt(trial.i_correct) == parseInt(response.button);
correct_button.removeClass('disabled').prop('disabled', false).css('pointer-events', 'none');
correct_button.addClass('visual-feedback');
if(correct)
{
cssClass = 'correct';
animation = 'bounce'; //'jiggle';
n = 2;
}
else
{
cssClass = 'incorrect';
animation = 'shake'; //'tada';
n = 6;
}
correct_button.addClass(cssClass);
if($.prototype.transition)
{
// We have semantic's transitions installed
correct_button.transition({
animation: animation,
onComplete: function() {
correct_button.css('pointer-events', '').addClass('disabled').prop('disabled', true);
end_trial();
},
verbose: true
});
} else {
blink(correct_button, n, cssClass, end_trial);
}
} else {
if(trial.response_ends_trial) {
end_trial();
}
}
};
// function to end trial when it is time
function end_trial() {
// stop the audio file if it is playing
// remove end event listeners if they exist
if(context !== null) {
source.stop();
source.onended = function() {}
} else {
audio.pause();
audio.removeEventListener('ended', end_trial);
}
// kill any remaining setTimeout handlers
jsPsych.pluginAPI.clearAllTimeouts();
// gather the data to store for the trial
var trial_data = {
"rt": response.rt,
"stimuli": trial.stimuli,
"button_pressed": response.button
};
// clear the display
display_element.innerHTML = '';
// move on to the next trial
$(display_element).ready(function(){
jsPsych.finishTrial(trial_data);
});
};
// start time
var start_time = performance.now();
$(display_element).ready(play_next_audio);
// end trial if time limit is set
if(trial.trial_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {
end_trial();
}, trial.trial_duration);
}
};
return plugin;
})();

544
plugins/jspsych-crm.js Normal file
View File

@@ -0,0 +1,544 @@
/**
* jspsych-crm
* Etienne Gaudrain <etienne.gaudrain@cnrs.fr>
*
* Plugin for displaying a CRM response grid.
**/
jsPsych.plugins["crm"] = (function() {
var plugin = {};
jsPsych.pluginAPI.registerPreload('crm', 'stimuli', 'audio');
plugin.info = {
name: 'crm',
description: '',
parameters: {
stimulus: {
type: jsPsych.plugins.parameterType.AUDIO,
pretty_name: 'Stimuli',
default: undefined,
description: 'The audio file to be played.'
},
colors: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Colors',
default: undefined,
array: true,
description: 'The colors used in the task.'
},
color_labels: {
type: jsPsych.plugins.parameterType.OBJECT,
pretty_name: 'Color labels',
default: null,
description: 'The labels of the colors used in the task (for instance in another language).'
},
color_values: {
type: jsPsych.plugins.parameterType.OBJECT,
pretty_name: 'Color values',
default: null,
description: 'The colors used to display the colors labels and cells. Default values are implemented, but they can be changed here in the form of an object whose keys are the color labels, and values are the colors in any CSS valid format.'
},
text_color_values: {
type: jsPsych.plugins.parameterType.OBJECT,
pretty_name: 'Text color values',
default: 'auto',
description: 'The colors used to display the text in the cells. Use "auto" (default) to let the program decide black or white depending on brightness of the color. Otherwise, an object whose keys are the color names, and values are strings representing CSS colors.'
},
numbers: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Numbers',
default: undefined,
array: true,
description: 'The numbers used in the task.'
},
prompt: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt',
default: null,
description: 'Any content here will be displayed below (or above) the buttons.'
},
trial_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Trial duration',
default: null,
description: 'The maximum duration to wait for a response.'
},
response_ends_trial: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Response ends trial',
default: true,
description: 'If true, the trial will end when user makes a response.'
},
visual_feedback: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Visual feedback',
default: false,
description: 'If true, then visual feedback will be provided after the trial ends.'
},
correct_response: {
type: jsPsych.plugins.parameterType.OBJECT,
pretty_name: 'The correct response',
default: null,
description: 'This is an object containing color and number of the correct response.'
},
}
}
plugin.trial = function(display_element, trial) {
var context = jsPsych.pluginAPI.audioContext();
if(context !== null) {
var source;
} else {
var audio;
}
if(trial.visual_feedback===true && trial.correct_reponse===null)
throw "'correct_response' has to be defined if visual feedback is requested.";
if(trial.color_values===null) {
trial.color_values = {
red: "#ff3333",
blue: "#6b6bff",
green: "#1da831",
yellow: "#ffe534",
pink: "#ff57df",
purple: "#a522ff",
brown: "#7a5630",
black: "#222222",
white: "#fcfcfc",
grey: "#8c8c8c",
gray: "#8c8c8c"
};
}
var auto_text_color_values = {};
var brightness = {};
for(var c in trial.color_values) {
var col = parseCSSColor(c);
var L = 0.299*col[0] + 0.587*col[1] + 0.114*col[2];
if(L<128) {
brightness[c] = 'dark';
auto_text_color_values[c] = "#ffffff";
} else {
auto_text_color_values[c] = "#000000";
brightness[c] = 'bright';
}
}
if(trial.text_color_values=="auto") {
trial.text_color_values = auto_text_color_values;
}
function play_audio() {
// Prepare the next sound to play
if(context !== null) {
source = context.createBufferSource();
source.buffer = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
source.connect(context.destination);
source.onended = function(){
if(trial.trial_ends_after_audio) {
after_response(null);
} else {
enable_response();
}
};
startTime = context.currentTime;
source.start(startTime);
} else {
audio = jsPsych.pluginAPI.getAudioBuffer(trial.stimulus);
audio.currentTime = 0;
audio.addEventListener('ended', function(){
if(trial.trial_ends_after_audio) {
after_response(null);
} else {
enable_response();
}
});
audio.play();
}
}
if(trial.color_labels===null) {
trial.color_labels = {};
for(var c of trial.colors) {
trial.color_labels[c] = c;
}
}
/*
//display buttons
if(Array.isArray(trial.button_html)) {
if(trial.button_html.length == trial.choices.length) {
buttons = trial.button_html;
} else {
console.error('Error in ' + plugin.info.name + '. The length of the button_html array does not equal the length of the choices array');
}
} else {
for(var i = 0; i < trial.choices.length; i++) {
buttons.push(trial.button_html);
}
}
*/
var html = '';
//show prompt if there is one
if(trial.prompt !== null) {
html += "<p class='jspsych-prompt'>"+trial.prompt+"</p>";
}
html += '<div id="jspsych-crm-buttons-container"><table class="jspsych-crm">';
for(var c of trial.colors) {
html += "<tr>";
html += "<th class='crm-"+c+"' style='color: "+trial.color_values[c]+"'>"+trial.color_labels[c]+"</th>";
for(var n of trial.numbers) {
html += "<td class='crm-"+c+" "+brightness[c]+"' data-value='"+JSON.stringify({color: c, number: n})+"' style='color: "+trial.text_color_values[c]+"; background-color: "+trial.color_values[c]+"'>"+n+"</td>";
}
html += "<th class='crm-"+c+"' style='color: "+trial.color_values[c]+"'>"+trial.color_labels[c]+"</th>";
html += "</tr>";
}
html += '</div>';
$(display_element).html( html );
function enable_response() {
$(display_element).find("table.jspsych-crm td").css("cursor", "pointer").click( function(e) {
var choice = JSON.parse(e.currentTarget.getAttribute('data-value'));
after_response(choice);
});
}
function disable_response() {
$(display_element).find("table.jspsych-crm td").off("click").css("cursor", "default");
}
// store response
var response = {
rt: null,
color: null,
number: null
};
// A custom blink function for feedback in case semantic's transition isn't there
function blink(elm, n, cssClass, after_cb) {
if(n<=0) {
after_cb();
} else {
$(elm).toggleClass(cssClass);
setTimeout(function(){ blink(elm, n-1, cssClass, after_cb); }, 200);
}
}
// function to handle responses by the subject
function after_response(choice) {
// measure rt
var end_time = performance.now();
response.rt = end_time - start_time;
if(choice!==null) {
response.color = choice.color;
response.number = choice.number;
}
disable_response();
if(trial.visual_feedback) {
var cssClass, n, animation;
var correct_button = $(display_element).find("table.jspsych-crm td[data-value='"+JSON.stringify(trial.correct_response)+"']");
var correct = (trial.correct_response.color == response.color) && (trial.correct_response.number == response.number);
correct_button.addClass('visual-feedback');
if(correct)
{
cssClass = 'correct';
animation = 'bounce'; //'jiggle';
n = 2;
}
else
{
cssClass = 'incorrect';
animation = 'shake'; //'tada';
n = 6;
}
correct_button.addClass(cssClass);
if($.prototype.transition)
{
// We have semantic's transitions installed
correct_button.transition({
animation: animation,
onComplete: function() {
correct_button.css('pointer-events', '').addClass('disabled').prop('disabled', true);
end_trial();
},
verbose: true
});
} else {
blink(correct_button, n, cssClass, end_trial);
}
} else {
if(trial.response_ends_trial) {
end_trial();
}
}
};
// function to end trial when it is time
function end_trial() {
// stop the audio file if it is playing
// remove end event listeners if they exist
if(context !== null) {
source.stop();
source.onended = function() {}
} else {
audio.pause();
audio.removeEventListener('ended', end_trial);
}
// kill any remaining setTimeout handlers
jsPsych.pluginAPI.clearAllTimeouts();
// gather the data to store for the trial
var trial_data = {
rt: response.rt,
stimulus: trial.stimulus,
response_color: response.color,
response_number: response.number,
correct_color: trial.correct_response.color,
correct_number: trial.correct_response.number,
score: (response.color==trial.correct_response.color) + (response.number==trial.correct_response.number)
};
// clear the display
display_element.innerHTML = '';
// move on to the next trial
$(display_element).ready(function(){
jsPsych.finishTrial(trial_data);
});
};
// start time
var start_time = performance.now();
$(display_element).ready(play_audio);
// end trial if time limit is set
if(trial.trial_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {
end_trial();
}, trial.trial_duration);
}
};
return plugin;
})();
// (c) Dean McNamee <dean@gmail.com>, 2012.
//
// https://github.com/deanm/css-color-parser-js
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
// IN THE SOFTWARE.
// http://www.w3.org/TR/css3-color/
var kCSSColorTable = {
"transparent": [0,0,0,0], "aliceblue": [240,248,255,1],
"antiquewhite": [250,235,215,1], "aqua": [0,255,255,1],
"aquamarine": [127,255,212,1], "azure": [240,255,255,1],
"beige": [245,245,220,1], "bisque": [255,228,196,1],
"black": [0,0,0,1], "blanchedalmond": [255,235,205,1],
"blue": [0,0,255,1], "blueviolet": [138,43,226,1],
"brown": [165,42,42,1], "burlywood": [222,184,135,1],
"cadetblue": [95,158,160,1], "chartreuse": [127,255,0,1],
"chocolate": [210,105,30,1], "coral": [255,127,80,1],
"cornflowerblue": [100,149,237,1], "cornsilk": [255,248,220,1],
"crimson": [220,20,60,1], "cyan": [0,255,255,1],
"darkblue": [0,0,139,1], "darkcyan": [0,139,139,1],
"darkgoldenrod": [184,134,11,1], "darkgray": [169,169,169,1],
"darkgreen": [0,100,0,1], "darkgrey": [169,169,169,1],
"darkkhaki": [189,183,107,1], "darkmagenta": [139,0,139,1],
"darkolivegreen": [85,107,47,1], "darkorange": [255,140,0,1],
"darkorchid": [153,50,204,1], "darkred": [139,0,0,1],
"darksalmon": [233,150,122,1], "darkseagreen": [143,188,143,1],
"darkslateblue": [72,61,139,1], "darkslategray": [47,79,79,1],
"darkslategrey": [47,79,79,1], "darkturquoise": [0,206,209,1],
"darkviolet": [148,0,211,1], "deeppink": [255,20,147,1],
"deepskyblue": [0,191,255,1], "dimgray": [105,105,105,1],
"dimgrey": [105,105,105,1], "dodgerblue": [30,144,255,1],
"firebrick": [178,34,34,1], "floralwhite": [255,250,240,1],
"forestgreen": [34,139,34,1], "fuchsia": [255,0,255,1],
"gainsboro": [220,220,220,1], "ghostwhite": [248,248,255,1],
"gold": [255,215,0,1], "goldenrod": [218,165,32,1],
"gray": [128,128,128,1], "green": [0,128,0,1],
"greenyellow": [173,255,47,1], "grey": [128,128,128,1],
"honeydew": [240,255,240,1], "hotpink": [255,105,180,1],
"indianred": [205,92,92,1], "indigo": [75,0,130,1],
"ivory": [255,255,240,1], "khaki": [240,230,140,1],
"lavender": [230,230,250,1], "lavenderblush": [255,240,245,1],
"lawngreen": [124,252,0,1], "lemonchiffon": [255,250,205,1],
"lightblue": [173,216,230,1], "lightcoral": [240,128,128,1],
"lightcyan": [224,255,255,1], "lightgoldenrodyellow": [250,250,210,1],
"lightgray": [211,211,211,1], "lightgreen": [144,238,144,1],
"lightgrey": [211,211,211,1], "lightpink": [255,182,193,1],
"lightsalmon": [255,160,122,1], "lightseagreen": [32,178,170,1],
"lightskyblue": [135,206,250,1], "lightslategray": [119,136,153,1],
"lightslategrey": [119,136,153,1], "lightsteelblue": [176,196,222,1],
"lightyellow": [255,255,224,1], "lime": [0,255,0,1],
"limegreen": [50,205,50,1], "linen": [250,240,230,1],
"magenta": [255,0,255,1], "maroon": [128,0,0,1],
"mediumaquamarine": [102,205,170,1], "mediumblue": [0,0,205,1],
"mediumorchid": [186,85,211,1], "mediumpurple": [147,112,219,1],
"mediumseagreen": [60,179,113,1], "mediumslateblue": [123,104,238,1],
"mediumspringgreen": [0,250,154,1], "mediumturquoise": [72,209,204,1],
"mediumvioletred": [199,21,133,1], "midnightblue": [25,25,112,1],
"mintcream": [245,255,250,1], "mistyrose": [255,228,225,1],
"moccasin": [255,228,181,1], "navajowhite": [255,222,173,1],
"navy": [0,0,128,1], "oldlace": [253,245,230,1],
"olive": [128,128,0,1], "olivedrab": [107,142,35,1],
"orange": [255,165,0,1], "orangered": [255,69,0,1],
"orchid": [218,112,214,1], "palegoldenrod": [238,232,170,1],
"palegreen": [152,251,152,1], "paleturquoise": [175,238,238,1],
"palevioletred": [219,112,147,1], "papayawhip": [255,239,213,1],
"peachpuff": [255,218,185,1], "peru": [205,133,63,1],
"pink": [255,192,203,1], "plum": [221,160,221,1],
"powderblue": [176,224,230,1], "purple": [128,0,128,1],
"rebeccapurple": [102,51,153,1],
"red": [255,0,0,1], "rosybrown": [188,143,143,1],
"royalblue": [65,105,225,1], "saddlebrown": [139,69,19,1],
"salmon": [250,128,114,1], "sandybrown": [244,164,96,1],
"seagreen": [46,139,87,1], "seashell": [255,245,238,1],
"sienna": [160,82,45,1], "silver": [192,192,192,1],
"skyblue": [135,206,235,1], "slateblue": [106,90,205,1],
"slategray": [112,128,144,1], "slategrey": [112,128,144,1],
"snow": [255,250,250,1], "springgreen": [0,255,127,1],
"steelblue": [70,130,180,1], "tan": [210,180,140,1],
"teal": [0,128,128,1], "thistle": [216,191,216,1],
"tomato": [255,99,71,1], "turquoise": [64,224,208,1],
"violet": [238,130,238,1], "wheat": [245,222,179,1],
"white": [255,255,255,1], "whitesmoke": [245,245,245,1],
"yellow": [255,255,0,1], "yellowgreen": [154,205,50,1]}
function clamp_css_byte(i) { // Clamp to integer 0 .. 255.
i = Math.round(i); // Seems to be what Chrome does (vs truncation).
return i < 0 ? 0 : i > 255 ? 255 : i;
}
function clamp_css_float(f) { // Clamp to float 0.0 .. 1.0.
return f < 0 ? 0 : f > 1 ? 1 : f;
}
function parse_css_int(str) { // int or percentage.
if (str[str.length - 1] === '%')
return clamp_css_byte(parseFloat(str) / 100 * 255);
return clamp_css_byte(parseInt(str));
}
function parse_css_float(str) { // float or percentage.
if (str[str.length - 1] === '%')
return clamp_css_float(parseFloat(str) / 100);
return clamp_css_float(parseFloat(str));
}
function css_hue_to_rgb(m1, m2, h) {
if (h < 0) h += 1;
else if (h > 1) h -= 1;
if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
if (h * 2 < 1) return m2;
if (h * 3 < 2) return m1 + (m2 - m1) * (2/3 - h) * 6;
return m1;
}
function parseCSSColor(css_str) {
// Remove all whitespace, not compliant, but should just be more accepting.
var str = css_str.replace(/ /g, '').toLowerCase();
// Color keywords (and transparent) lookup.
if (str in kCSSColorTable) return kCSSColorTable[str].slice(); // dup.
// #abc and #abc123 syntax.
if (str[0] === '#') {
if (str.length === 4) {
var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
if (!(iv >= 0 && iv <= 0xfff)) return null; // Covers NaN.
return [((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8),
(iv & 0xf0) | ((iv & 0xf0) >> 4),
(iv & 0xf) | ((iv & 0xf) << 4),
1];
} else if (str.length === 7) {
var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
if (!(iv >= 0 && iv <= 0xffffff)) return null; // Covers NaN.
return [(iv & 0xff0000) >> 16,
(iv & 0xff00) >> 8,
iv & 0xff,
1];
}
return null;
}
var op = str.indexOf('('), ep = str.indexOf(')');
if (op !== -1 && ep + 1 === str.length) {
var fname = str.substr(0, op);
var params = str.substr(op+1, ep-(op+1)).split(',');
var alpha = 1; // To allow case fallthrough.
switch (fname) {
case 'rgba':
if (params.length !== 4) return null;
alpha = parse_css_float(params.pop());
// Fall through.
case 'rgb':
if (params.length !== 3) return null;
return [parse_css_int(params[0]),
parse_css_int(params[1]),
parse_css_int(params[2]),
alpha];
case 'hsla':
if (params.length !== 4) return null;
alpha = parse_css_float(params.pop());
// Fall through.
case 'hsl':
if (params.length !== 3) return null;
var h = (((parseFloat(params[0]) % 360) + 360) % 360) / 360; // 0 .. 1
// NOTE(deanm): According to the CSS spec s/l should only be
// percentages, but we don't bother and let float or percentage.
var s = parse_css_float(params[1]);
var l = parse_css_float(params[2]);
var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
var m1 = l * 2 - m2;
return [clamp_css_byte(css_hue_to_rgb(m1, m2, h+1/3) * 255),
clamp_css_byte(css_hue_to_rgb(m1, m2, h) * 255),
clamp_css_byte(css_hue_to_rgb(m1, m2, h-1/3) * 255),
alpha];
default:
return null;
}
}
return null;
}

171
plugins/jspsych-html-keyboard-response-clickable.js Normal file
View File

@@ -0,0 +1,171 @@
/**
* jspsych-html-keyboard-response-clickable
* Etienne Gaudrain
*
* Based on:
* jspsych-html-keyboard-response @6.1.0
* Josh de Leeuw
*
* Like html-keyboard-response, but where clicking elements with class "clickable" will end the trial.
*
**/
jsPsych.plugins["html-keyboard-response-clickable"] = (function() {
var plugin = {};
plugin.info = {
name: 'html-keyboard-response-clickable',
description: 'Like html-keyboard-response, but where clicking elements with class "clickable" will end the trial.',
parameters: {
stimulus: {
type: jsPsych.plugins.parameterType.HTML_STRING,
pretty_name: 'Stimulus',
default: undefined,
description: 'The HTML string to be displayed'
},
choices: {
type: jsPsych.plugins.parameterType.KEYCODE,
array: true,
pretty_name: 'Choices',
default: jsPsych.ALL_KEYS,
description: 'The keys the subject is allowed to press to respond to the stimulus.'
},
clickable: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Clickable',
description: 'Clicking clickable elements ends trial.',
default: true
},
prompt: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt',
default: null,
description: 'Any content here will be displayed below the stimulus.'
},
stimulus_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Stimulus duration',
default: null,
description: 'How long to hide the stimulus.'
},
trial_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Trial duration',
default: null,
description: 'How long to show trial before it ends.'
},
response_ends_trial: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Response ends trial',
default: true,
description: 'If true, trial will end when subject makes a response.'
},
}
}
plugin.trial = function(display_element, trial) {
var start_time;
var new_html = '<div id="jspsych-html-keyboard-response-stimulus">' + trial.stimulus + '</div>';
// add prompt
if(trial.prompt !== null) {
new_html += trial.prompt;
}
// store response
var response = {
rt: null,
key: null
};
// function to end trial when it is time
var end_trial = function() {
// kill any remaining setTimeout handlers
jsPsych.pluginAPI.clearAllTimeouts();
// kill keyboard listeners
if(typeof keyboardListener !== 'undefined') {
jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
}
// gather the data to store for the trial
var trial_data = {
"rt": response.rt,
"stimulus": trial.stimulus,
"key_press": response.key
};
// clear the display
display_element.innerHTML = '';
// move on to the next trial
jsPsych.finishTrial(trial_data);
};
// function to handle responses by the subject
var after_response = function(info) {
// after a valid response, the stimulus will have the CSS class 'responded'
// which can be used to provide visual feedback that a response was recorded
display_element.querySelector('#jspsych-html-keyboard-response-stimulus').className += ' responded';
// only record the first response
if(response.key == null) {
response = info;
}
if(trial.response_ends_trial) {
end_trial();
}
};
// draw
display_element.innerHTML = new_html;
start_time = performance.now();
if(trial.clickable){
display_element.querySelectorAll(".clickable").forEach(function(e){
var clickHandler = function(event){
event.preventDefault();
var info = {'key': 'clicked', 'rt': performance.now()-start_time};
after_response(info);
e.removeEventListener('click', clickHandler);
};
e.addEventListener('click', clickHandler);
});
}
// start the response listener
if(trial.choices != jsPsych.NO_KEYS) {
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: after_response,
valid_responses: trial.choices,
rt_method: 'performance',
persist: false,
allow_held_key: false
});
}
// hide stimulus if stimulus_duration is set
if(trial.stimulus_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {
display_element.querySelector('#jspsych-html-keyboard-response-stimulus').style.visibility = 'hidden';
}, trial.stimulus_duration);
}
// end trial if trial_duration is set
if(trial.trial_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {
end_trial();
}, trial.trial_duration);
}
};
return plugin;
})();

208
plugins/jspsych-image-keyboard-response-clickable.js Normal file
View File

@@ -0,0 +1,208 @@
/**
* jspsych-image-keyboard-response-clickable
* Etienne Gaudrain
*
* Based on:
* jspsych-image-keyboard-response @6.1.0
* Josh de Leeuw
*
* plugin for displaying a stimulus and getting a keyboard response or click on
* a page element
*
* documentation: docs.jspsych.org
*
**/
jsPsych.plugins["image-keyboard-response-clickable"] = (function() {
var plugin = {};
jsPsych.pluginAPI.registerPreload('image-keyboard-response-clickable', 'stimulus', 'image');
plugin.info = {
name: 'image-keyboard-response',
description: '',
parameters: {
stimulus: {
type: jsPsych.plugins.parameterType.IMAGE,
pretty_name: 'Stimulus',
default: undefined,
description: 'The image to be displayed'
},
stimulus_height: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Image height',
default: null,
description: 'Set the image height in pixels'
},
stimulus_width: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Image width',
default: null,
description: 'Set the image width in pixels'
},
maintain_aspect_ratio: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Maintain aspect ratio',
default: true,
description: 'Maintain the aspect ratio after setting width or height'
},
choices: {
type: jsPsych.plugins.parameterType.KEYCODE,
array: true,
pretty_name: 'Choices',
default: jsPsych.ALL_KEYS,
description: 'The keys the subject is allowed to press to respond to the stimulus.'
},
clickable: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Clickable',
description: 'Clicking clickable elements ends trial.',
default: true
},
prompt: {
type: jsPsych.plugins.parameterType.STRING,
pretty_name: 'Prompt',
default: null,
description: 'Any content here will be displayed below the stimulus.'
},
stimulus_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Stimulus duration',
default: null,
description: 'How long to hide the stimulus.'
},
trial_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Trial duration',
default: null,
description: 'How long to show trial before it ends.'
},
response_ends_trial: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Response ends trial',
default: true,
description: 'If true, trial will end when subject makes a response.'
},
}
}
plugin.trial = function(display_element, trial) {
var start_time;
// display stimulus
var html = '<img src="' + trial.stimulus + '" id="jspsych-image-keyboard-response-stimulus" style="';
if(trial.stimulus_height !== null) {
html += 'height:' + trial.stimulus_height + 'px; '
if(trial.stimulus_width == null && trial.maintain_aspect_ratio) {
html += 'width: auto; ';
}
}
if(trial.stimulus_width !== null) {
html += 'width:' + trial.stimulus_width + 'px; '
if(trial.stimulus_height == null && trial.maintain_aspect_ratio) {
html += 'height: auto; ';
}
}
html += '"></img>';
// add prompt
if(trial.prompt !== null) {
html += trial.prompt;
}
// render
display_element.innerHTML = html;
start_time = performance.now();
// store response
var response = {
rt: null,
key: null
};
// function to end trial when it is time
var end_trial = function() {
// kill any remaining setTimeout handlers
jsPsych.pluginAPI.clearAllTimeouts();
// kill keyboard listeners
if(typeof keyboardListener !== 'undefined') {
jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener);
}
// gather the data to store for the trial
var trial_data = {
"rt": response.rt,
"stimulus": trial.stimulus,
"key_press": response.key
};
// clear the display
display_element.innerHTML = '';
// move on to the next trial
jsPsych.finishTrial(trial_data);
};
// function to handle responses by the subject
var after_response = function(info) {
// after a valid response, the stimulus will have the CSS class 'responded'
// which can be used to provide visual feedback that a response was recorded
display_element.querySelector('#jspsych-image-keyboard-response-stimulus').className += ' responded';
// only record the first response
if(response.key == null) {
response = info;
}
if(trial.response_ends_trial) {
end_trial();
}
};
// start the response listener
if(trial.choices != jsPsych.NO_KEYS) {
var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({
callback_function: after_response,
valid_responses: trial.choices,
rt_method: 'performance',
persist: false,
allow_held_key: false
});
}
if(trial.clickable){
display_element.querySelectorAll(".clickable").forEach(function(e){
var clickHandler = function(event){
event.preventDefault();
var info = {'key': 'clicked', 'rt': performance.now()-start_time};
after_response(info);
e.removeEventListener('click', clickHandler);
};
e.addEventListener('click', clickHandler);
});
}
// hide stimulus if stimulus_duration is set
if(trial.stimulus_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {
display_element.querySelector('#jspsych-image-keyboard-response-stimulus').style.visibility = 'hidden';
}, trial.stimulus_duration);
}
// end trial if trial_duration is set
if(trial.trial_duration !== null) {
jsPsych.pluginAPI.setTimeout(function() {
end_trial();
}, trial.trial_duration);
}
};
return plugin;
})();

81
plugins/jspsych-waitfor-function.js Normal file
View File

@@ -0,0 +1,81 @@
/**
* jspsych-waitfor-function
* Plugin for waiting for the execution of an arbitrary function during a jspsych experiment.
* It's the same as call-function except that a loading wheel is displayed.
*
* The loading wheel requires jQuery and Semantic.
*
* Etienne Gaudrain <etienne.gaudrain@cnrs.fr>
*
**/
jsPsych.plugins['waitfor-function'] = (function() {
var plugin = {};
plugin.info = {
name: 'waitfor-function',
description: '',
parameters: {
func: {
type: jsPsych.plugins.parameterType.FUNCTION,
pretty_name: 'Function',
default: undefined,
description: 'Function to call'
},
async: {
type: jsPsych.plugins.parameterType.BOOL,
pretty_name: 'Asynchronous',
default: false,
description: 'Is the function call asynchronous?'
},
min_duration: {
type: jsPsych.plugins.parameterType.INT,
pretty_name: 'Minimum duration',
default: 0,
description: 'The wait will last at least this time (in ms).'
}
}
}
plugin.trial = function(display_element, trial) {
var start_time = performance.now();
trial.post_trial_gap = 0;
var return_val;
$(display_element).html("<div class='ui active loader'></div>");
if(trial.async) {
var done = function(data) {
return_val = data;
end_trial();
}
trial.func(done);
} else {
return_val = trial.func();
end_trial();
}
function end_trial() {
$(display_element).empty();
var end_time = performance.now();
console.log("We finished in "+(end_time-start_time)+" ms...");
if(end_time-start_time < trial.min_duration)
{
trial.post_trial_gap = trial.min_duration - (end_time-start_time);
console.log("We need to wait "+trial.post_trial_gap+" ms.");
}
var trial_data = {
value: return_val
};
jsPsych.finishTrial(trial_data);
}
};
return plugin;
})();