Update for jspsych@6.2

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 = '<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; ';
+        var height, width, start_time;
+        if(trial.render_on_canvas) {
+            // first clear the display element (because the render_on_canvas method appends to display_element instead of overwriting it with .innerHTML)
+            if(display_element.hasChildNodes()) {
+                // can't loop through child list because the list will be modified by .removeChild()
+                while(display_element.firstChild) {
+                    display_element.removeChild(display_element.firstChild);
                 }
             }
+            // create canvas element and image
+            var canvas = document.createElement("canvas");
+            canvas.id = "jspsych-image-keyboard-response-stimulus";
+            canvas.style.margin = 0;
+            canvas.style.padding = 0;
+            var img = new Image();
+            img.src = trial.stimulus;
+            // determine image height and width
+            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) {
-            html += 'width:' + trial.stimulus_width + 'px; '
+                width = trial.stimulus_width;
                 if(trial.stimulus_height == null && trial.maintain_aspect_ratio) {
-                html += 'height: auto; ';
+                    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;
+            }
+            canvas.height = height;
+            canvas.width = width;
+            // add canvas and draw image
+            display_element.insertBefore(canvas, null);
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage(img, 0, 0, width, height);
+            // add prompt if there is one
+            if(trial.prompt !== null) {
+                display_element.insertAdjacentHTML('beforeend', trial.prompt);
             }
-        html += '"></img>';
 
+            start_time = performance.now();
+
+        } else {
+
+            // display stimulus as an image element
+            var html = '<img src="' + trial.stimulus + '" id="jspsych-image-keyboard-response-stimulus">';
             // add prompt
             if(trial.prompt !== null) {
                 html += trial.prompt;
             }
-
-        // render
+            // 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;