diff --git a/plugins/jspsych-image-keyboard-response-clickable.js b/plugins/jspsych-image-keyboard-response-clickable.js
index 4884da5..f725492 100644
--- a/plugins/jspsych-image-keyboard-response-clickable.js
+++ b/plugins/jspsych-image-keyboard-response-clickable.js
@@ -3,7 +3,7 @@
* Etienne Gaudrain
*
* Based on:
- * jspsych-image-keyboard-response @6.1.0
+ * jspsych-image-keyboard-response @6.2.0
* Josh de Leeuw
*
* plugin for displaying a stimulus and getting a keyboard response or click on
@@ -21,7 +21,7 @@ jsPsych.plugins["image-keyboard-response-clickable"] = (function() {
jsPsych.pluginAPI.registerPreload('image-keyboard-response-clickable', 'stimulus', 'image');
plugin.info = {
- name: 'image-keyboard-response',
+ name: 'image-keyboard-response-clickable',
description: '',
parameters: {
stimulus: {
@@ -85,37 +85,102 @@ jsPsych.plugins["image-keyboard-response-clickable"] = (function() {
default: true,
description: 'If true, trial will end when subject makes a response.'
},
+ render_on_canvas: {
+ type: jsPsych.plugins.parameterType.BOOL,
+ pretty_name: 'Render on canvas',
+ default: true,
+ description: 'If true, the image will be drawn onto a canvas element (prevents blank screen between consecutive images in some browsers).' +
+ 'If false, the image will be shown via an img element.'
+ }
}
}
plugin.trial = function(display_element, trial) {
- var start_time;
-
- // display stimulus
- var html = '
';
- // add prompt
- if(trial.prompt !== null) {
- html += trial.prompt;
- }
+ start_time = performance.now();
- // render
- display_element.innerHTML = html;
- start_time = performance.now();
+ } else {
+
+ // display stimulus as an image element
+ var html = '
';
+ // add prompt
+ if(trial.prompt !== null) {
+ html += trial.prompt;
+ }
+ // update the page content
+ display_element.innerHTML = html;
+
+ // set image dimensions after image has loaded (so that we have access to naturalHeight/naturalWidth)
+ var img = display_element.querySelector('#jspsych-image-keyboard-response-stimulus');
+ if(trial.stimulus_height !== null) {
+ height = trial.stimulus_height;
+ if(trial.stimulus_width == null && trial.maintain_aspect_ratio) {
+ width = img.naturalWidth * (trial.stimulus_height / img.naturalHeight);
+ }
+ } else {
+ height = img.naturalHeight;
+ }
+ if(trial.stimulus_width !== null) {
+ width = trial.stimulus_width;
+ if(trial.stimulus_height == null && trial.maintain_aspect_ratio) {
+ height = img.naturalHeight * (trial.stimulus_width / img.naturalWidth);
+ }
+ } else if(!(trial.stimulus_height !== null & trial.maintain_aspect_ratio)) {
+ // if stimulus width is null, only use the image's natural width if the width value wasn't set
+ // in the if statement above, based on a specified height and maintain_aspect_ratio = true
+ width = img.naturalWidth;
+ }
+ img.style.height = height.toString() + "px";
+ img.style.width = width.toString() + "px";
+
+ start_time = performance.now();
+ }
// store response
var response = {
@@ -165,17 +230,6 @@ jsPsych.plugins["image-keyboard-response-clickable"] = (function() {
}
};
- // 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){
@@ -188,6 +242,17 @@ jsPsych.plugins["image-keyboard-response-clickable"] = (function() {
});
}
+ // 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() {
@@ -200,8 +265,9 @@ jsPsych.plugins["image-keyboard-response-clickable"] = (function() {
jsPsych.pluginAPI.setTimeout(function() {
end_trial();
}, trial.trial_duration);
+ } else if(trial.response_ends_trial === false) {
+ console.warn("The experiment may be deadlocked. Try setting a trial duration or set response_ends_trial to true.");
}
-
};
return plugin;