jspsych 6.2.0 → 7.1.0

package/plugins/jspsych-canvas-button-response.js

@@ -1,199 +0,0 @@
-/**
- * jspsych-canvas-button-response
- * Chris Jungerius (modified from Josh de Leeuw)
- *
- * a jsPsych plugin for displaying a canvas stimulus and getting a button response
- *
- * documentation: docs.jspsych.org
- *
- **/
-
-jsPsych.plugins["canvas-button-response"] = (function () {
-
-    var plugin = {};
-
-    plugin.info = {
-        name: 'canvas-button-response',
-        description: '',
-        parameters: {
-            stimulus: {
-                type: jsPsych.plugins.parameterType.FUNCTION,
-                pretty_name: 'Stimulus',
-                default: undefined,
-                description: 'The drawing function to apply to the canvas. Should take the canvas object as argument.'
-            },
-            choices: {
-                type: jsPsych.plugins.parameterType.STRING,
-                pretty_name: 'Choices',
-                default: undefined,
-                array: true,
-                description: 'The labels for the buttons.'
-            },
-            button_html: {
-                type: jsPsych.plugins.parameterType.STRING,
-                pretty_name: 'Button HTML',
-                default: '<button class="jspsych-btn">%choice%</button>',
-                array: true,
-                description: 'The html of the button. Can create own style.'
-            },
-            prompt: {
-                type: jsPsych.plugins.parameterType.STRING,
-                pretty_name: 'Prompt',
-                default: null,
-                description: 'Any content here will be displayed under the button.'
-            },
-            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 the trial.'
-            },
-            margin_vertical: {
-                type: jsPsych.plugins.parameterType.STRING,
-                pretty_name: 'Margin vertical',
-                default: '0px',
-                description: 'The vertical margin of the button.'
-            },
-            margin_horizontal: {
-                type: jsPsych.plugins.parameterType.STRING,
-                pretty_name: 'Margin horizontal',
-                default: '8px',
-                description: 'The horizontal margin of the button.'
-            },
-            response_ends_trial: {
-                type: jsPsych.plugins.parameterType.BOOL,
-                pretty_name: 'Response ends trial',
-                default: true,
-                description: 'If true, then trial will end when user responds.'
-            },
-            canvas_size: {
-                type: jsPsych.plugins.parameterType.INT,
-                array: true,
-                pretty_name: 'Canvas size',
-                default: [500, 500],
-                description: 'Array containing the height (first value) and width (second value) of the canvas element.'
-            }
-
-        }
-    }
-
-    plugin.trial = function (display_element, trial) {
-
-        // create canvas
-        var html = '<div id="jspsych-canvas-button-response-stimulus">' + '<canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas>' + '</div>';
-
-        //display buttons
-        var buttons = [];
-        if (Array.isArray(trial.button_html)) {
-            if (trial.button_html.length == trial.choices.length) {
-                buttons = trial.button_html;
-            } else {
-                console.error('Error in canvas-button-response plugin. 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);
-            }
-        }
-        html += '<div id="jspsych-canvas-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-canvas-button-response-button" style="display: inline-block; margin:' + trial.margin_vertical + ' ' + trial.margin_horizontal + '" id="jspsych-canvas-button-response-button-' + i + '" data-choice="' + i + '">' + str + '</div>';
-        }
-        html += '</div>';
-
-        //show prompt if there is one
-        if (trial.prompt !== null) {
-            html += trial.prompt;
-        }
-        display_element.innerHTML = html;
-
-        //draw
-        let c = document.getElementById("jspsych-canvas-stimulus")
-        trial.stimulus(c)
-
-        // start time
-        var start_time = performance.now();
-
-        // add event listeners to buttons
-        for (var i = 0; i < trial.choices.length; i++) {
-            display_element.querySelector('#jspsych-canvas-button-response-button-' + i).addEventListener('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
-        };
-
-        // 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 = parseInt(choice);
-            response.rt = rt;
-
-            // 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-canvas-button-response-stimulus').className += ' responded';
-
-            // disable all the buttons after a response
-            var btns = document.querySelectorAll('.jspsych-canvas-button-response-button button');
-            for (var i = 0; i < btns.length; i++) {
-                //btns[i].removeEventListener('click');
-                btns[i].setAttribute('disabled', 'disabled');
-            }
-
-            if (trial.response_ends_trial) {
-                end_trial();
-            }
-        };
-
-        // function to end trial when it is time
-        function end_trial() {
-
-            // kill any remaining setTimeout handlers
-            jsPsych.pluginAPI.clearAllTimeouts();
-
-            // gather the data to store for the trial
-            var trial_data = {
-                "rt": response.rt,
-                "button_pressed": response.button
-            };
-
-            // clear the display
-            display_element.innerHTML = '';
-
-            // move on to the next trial
-            jsPsych.finishTrial(trial_data);
-        };
-
-        // hide image if timing is set
-        if (trial.stimulus_duration !== null) {
-            jsPsych.pluginAPI.setTimeout(function () {
-                display_element.querySelector('#jspsych-canvas-button-response-stimulus').style.visibility = 'hidden';
-            }, trial.stimulus_duration);
-        }
-
-        // end trial if time limit is set
-        if (trial.trial_duration !== null) {
-            jsPsych.pluginAPI.setTimeout(function () {
-                end_trial();
-            }, trial.trial_duration);
-        }
-
-    };
-
-    return plugin;
-})();

package/plugins/jspsych-canvas-keyboard-response.js

@@ -1,155 +0,0 @@
-/**
- * jspsych-canvas-keyboard-response
- * Chris Jungerius (modified from Josh de Leeuw)
- *
- * a jsPsych plugin for displaying a canvas stimulus and getting a keyboard response
- *
- * documentation: docs.jspsych.org
- *
- **/
-
-
-jsPsych.plugins["canvas-keyboard-response"] = (function () {
-
-  var plugin = {};
-
-  plugin.info = {
-    name: 'canvas-keyboard-response',
-    description: '',
-    parameters: {
-      stimulus: {
-        type: jsPsych.plugins.parameterType.FUNCTION,
-        pretty_name: 'Stimulus',
-        default: undefined,
-        description: 'The drawing function to apply to the canvas. Should take the canvas object as argument.'
-      },
-      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.'
-      },
-      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.'
-      },
-      canvas_size: {
-        type: jsPsych.plugins.parameterType.INT,
-        array: true,
-        pretty_name: 'Canvas size',
-        default: [500, 500],
-        description: 'Array containing the height (first value) and width (second value) of the canvas element.'
-      }
-
-    }
-  }
-
-  plugin.trial = function (display_element, trial) {
-
-    var new_html = '<div id="jspsych-canvas-keyboard-response-stimulus">' + '<canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas>' + '</div>';
-    // add prompt
-    if (trial.prompt !== null) {
-      new_html += trial.prompt;
-    }
-
-    // draw
-    display_element.innerHTML = new_html;
-    let c = document.getElementById("jspsych-canvas-stimulus")
-    trial.stimulus(c)
-    // 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,
-        "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-canvas-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
-      });
-    }
-
-    // hide stimulus if stimulus_duration is set
-    if (trial.stimulus_duration !== null) {
-      jsPsych.pluginAPI.setTimeout(function () {
-        display_element.querySelector('#jspsych-canvas-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;
-})();

package/plugins/jspsych-canvas-slider-response.js

@@ -1,207 +0,0 @@
-/**
- * jspsych-canvas-slider-response
- * Chris Jungerius (modified from Josh de Leeuw)
- *
- * a jsPsych plugin for displaying a canvas stimulus and getting a slider response
- *
- * documentation: docs.jspsych.org
- *
- */
-
-
-jsPsych.plugins['canvas-slider-response'] = (function () {
-
-    var plugin = {};
-
-    plugin.info = {
-        name: 'canvas-slider-response',
-        description: '',
-        parameters: {
-            stimulus: {
-                type: jsPsych.plugins.parameterType.FUNCTION,
-                pretty_name: 'Stimulus',
-                default: undefined,
-                description: 'The drawing function to apply to the canvas. Should take the canvas object as argument.'
-            },
-            min: {
-                type: jsPsych.plugins.parameterType.INT,
-                pretty_name: 'Min slider',
-                default: 0,
-                description: 'Sets the minimum value of the slider.'
-            },
-            max: {
-                type: jsPsych.plugins.parameterType.INT,
-                pretty_name: 'Max slider',
-                default: 100,
-                description: 'Sets the maximum value of the slider',
-            },
-            slider_start: {
-                type: jsPsych.plugins.parameterType.INT,
-                pretty_name: 'Slider starting value',
-                default: 50,
-                description: 'Sets the starting value of the slider',
-            },
-            step: {
-                type: jsPsych.plugins.parameterType.INT,
-                pretty_name: 'Step',
-                default: 1,
-                description: 'Sets the step of the slider'
-            },
-            labels: {
-                type: jsPsych.plugins.parameterType.HTML_STRING,
-                pretty_name: 'Labels',
-                default: [],
-                array: true,
-                description: 'Labels of the slider.',
-            },
-            slider_width: {
-                type: jsPsych.plugins.parameterType.INT,
-                pretty_name: 'Slider width',
-                default: null,
-                description: 'Width of the slider in pixels.'
-            },
-            button_label: {
-                type: jsPsych.plugins.parameterType.STRING,
-                pretty_name: 'Button label',
-                default: 'Continue',
-                array: false,
-                description: 'Label of the button to advance.'
-            },
-            require_movement: {
-                type: jsPsych.plugins.parameterType.BOOL,
-                pretty_name: 'Require movement',
-                default: false,
-                description: 'If true, the participant will have to move the slider before continuing.'
-            },
-            prompt: {
-                type: jsPsych.plugins.parameterType.STRING,
-                pretty_name: 'Prompt',
-                default: null,
-                description: 'Any content here will be displayed below the slider.'
-            },
-            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 the trial.'
-            },
-            response_ends_trial: {
-                type: jsPsych.plugins.parameterType.BOOL,
-                pretty_name: 'Response ends trial',
-                default: true,
-                description: 'If true, trial will end when user makes a response.'
-            },
-            canvas_size: {
-                type: jsPsych.plugins.parameterType.INT,
-                array: true,
-                pretty_name: 'Canvas size',
-                default: [500, 500],
-                description: 'Array containing the height (first value) and width (second value) of the canvas element.'
-            }
-
-        }
-    }
-
-    plugin.trial = function (display_element, trial) {
-
-        var html = '<div id="jspsych-canvas-slider-response-wrapper" style="margin: 100px 0px;">';
-        html += '<div id="jspsych-canvas-slider-response-stimulus">' + '<canvas id="jspsych-canvas-stimulus" height="' + trial.canvas_size[0] + '" width="' + trial.canvas_size[1] + '"></canvas>' + '</div>';
-        html += '<div class="jspsych-canvas-slider-response-container" style="position:relative; margin: 0 auto 3em auto; width:';
-        if (trial.slider_width !== null) {
-            html += trial.slider_width + 'px;';
-        } else {
-            html += trial.canvas_size[1] + 'px;';
-        }
-        html += '">';
-        html += '<input type="range" value="' + trial.slider_start + '" min="' + trial.min + '" max="' + trial.max + '" step="' + trial.step + '" style="width: 100%;" id="jspsych-canvas-slider-response-response"></input>';
-        html += '<div>'
-        for (var j = 0; j < trial.labels.length; j++) {
-            var width = 100 / (trial.labels.length - 1);
-            var left_offset = (j * (100 / (trial.labels.length - 1))) - (width / 2);
-            html += '<div style="display: inline-block; position: absolute; left:' + left_offset + '%; text-align: center; width: ' + width + '%;">';
-            html += '<span style="text-align: center; font-size: 80%;">' + trial.labels[j] + '</span>';
-            html += '</div>'
-        }
-        html += '</div>';
-        html += '</div>';
-        html += '</div>';
-
-        if (trial.prompt !== null) {
-            html += trial.prompt;
-        }
-
-        // add submit button
-        html += '<button id="jspsych-canvas-slider-response-next" class="jspsych-btn" ' + (trial.require_movement ? "disabled" : "") + '>' + trial.button_label + '</button>';
-
-        display_element.innerHTML = html;
-
-        // draw
-        let c = document.getElementById("jspsych-canvas-stimulus")
-        trial.stimulus(c)
-
-        var response = {
-            rt: null,
-            response: null
-        };
-
-        if (trial.require_movement) {
-            display_element.querySelector('#jspsych-canvas-slider-response-response').addEventListener('click', function () {
-                display_element.querySelector('#jspsych-canvas-slider-response-next').disabled = false;
-            })
-        }
-
-        display_element.querySelector('#jspsych-canvas-slider-response-next').addEventListener('click', function () {
-            // measure response time
-            var endTime = performance.now();
-            response.rt = endTime - startTime;
-            response.response = display_element.querySelector('#jspsych-canvas-slider-response-response').valueAsNumber;
-
-            if (trial.response_ends_trial) {
-                end_trial();
-            } else {
-                display_element.querySelector('#jspsych-canvas-slider-response-next').disabled = true;
-            }
-
-        });
-
-        function end_trial() {
-
-            jsPsych.pluginAPI.clearAllTimeouts();
-
-            // save data
-            var trialdata = {
-                "rt": response.rt,
-                "response": response.response,
-                "slider_start": trial.slider_start
-            };
-
-            display_element.innerHTML = '';
-
-            // next trial
-            jsPsych.finishTrial(trialdata);
-        }
-
-        if (trial.stimulus_duration !== null) {
-            jsPsych.pluginAPI.setTimeout(function () {
-                display_element.querySelector('#jspsych-canvas-slider-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);
-        }
-
-        var startTime = performance.now();
-    };
-
-    return plugin;
-})();