diff --git a/plugins/jspsych-vsl-grid-scene.js b/plugins/jspsych-vsl-grid-scene.js index dbb750cb..2002daf3 100644 --- a/plugins/jspsych-vsl-grid-scene.js +++ b/plugins/jspsych-vsl-grid-scene.js @@ -1,126 +1,132 @@ -/** - * jsPsych plugin for showing scenes that mimic the experiments described in - * - * Fiser, J., & Aslin, R. N. (2001). Unsupervised statistical learning of - * higher-order spatial structures from visual scenes. Psychological science, - * 12(6), 499-504. - * - * Josh de Leeuw - * February 2014 - * - * - * parameters: - * stimuli: array of arrays describing scenes. each interior array should have dimensions - * equal to the size of the desired grid. for example, a 3 x 3 grid with stimuli along - * the top-left to bottom-right diagonal would be declared like this: - * - * var s = [ - * [ "img_path", 0, 0 ], - * [ 0, "img_path", 0 ], - * [ 0, 0, "img_path" ] - * ] - * - * for blank spaces in the grid, you need to put a 0 in the corresponding location. - * image_size: array [width, height] - how big to draw the stimuli - * timing_duration: how long to show the scene - * timing_post_trial: how long to show blank screen after trial - * data: the optional data object - * - */ - -(function($) { - jsPsych['vsl-grid-scene'] = (function() { - - var plugin = {}; - - plugin.create = function(params) { - var trials = new Array(params.stimuli.length); - for (var i = 0; i < trials.length; i++) { - trials[i] = {}; - trials[i].type = "vsl-grid-scene"; - trials[i].stimuli = params.stimuli[i]; - trials[i].image_size = params.image_size || [100, 100]; - trials[i].timing_post_trial = (typeof params.timing_post_trial === 'undefined') ? 1000 : params.timing_post_trial; - trials[i].timing_duration = (typeof params.timing_duration === 'undefined') ? 2000 : params.timing_duration; - //trials[i].prompt = (typeof params.prompt === 'undefined') ? "" : params.prompt; - trials[i].data = (typeof params.data === 'undefined') ? {} : params.data; - } - return trials; - }; - - plugin.trial = function(display_element, block, trial, part) { - - var nrows = trial.stimuli.length; - var ncols = trial.stimuli[0].length; - - // create table - display_element.append($('', { - id: 'jspsych-vsl-grid-scene-table', - css: { - 'border-collapse': 'collapse' - } - })); - - for (var row = 0; row < nrows; row++) { - $("#jspsych-vsl-grid-scene-table").append($('', { - id: 'jspsych-vsl-grid-scene-table-row-' + row, - css: { - height: trial.image_size[1] + "px" - } - })); - for (var col = 0; col < ncols; col++) { - $("#jspsych-vsl-grid-scene-table-row-" + row).append($('
', { - id: 'jspsych-vsl-grid-scene-table-' + row + '-' + col, - css: { - width: trial.image_size[0] + "px", - border: '1px solid #555', - padding: trial.image_size[1] / 10 + "px " + trial.image_size[0] / 10 + "px" - } - })); - } - } - - function fill_table(pattern) { - for (var row = 0; row < nrows; row++) { - for (var col = 0; col < ncols; col++) { - if (pattern[row][col] !== 0) { - $('#jspsych-vsl-grid-scene-table-' + row + '-' + col).append($('', { - src: pattern[row][col], - css: { - width: trial.image_size[0] + "px", - height: trial.image_size[1] + "px", - } - })); - } - } - } - } - - fill_table(trial.stimuli); - - setTimeout(function(){ endTrial(); }, trial.timing_duration); - - function endTrial() { - - display_element.html(''); - - block.writeData($.extend({}, { - "trial_type": "vsl-grid-scene", - "trial_index": block.trial_idx, - "stimuli": JSON.stringify(trial.stimuli) - }, trial.data)); - - if (trial.timing_post_trial > 0) { - setTimeout(function() { - block.next(); - }, trial.timing_post_trial); - } - else { - block.next(); - } - } - }; - - return plugin; - })(); -})(jQuery); +/** + * jsPsych plugin for showing scenes that mimic the experiments described in + * + * Fiser, J., & Aslin, R. N. (2001). Unsupervised statistical learning of + * higher-order spatial structures from visual scenes. Psychological science, + * 12(6), 499-504. + * + * Josh de Leeuw + * February 2014 + * + * + * parameters: + * stimuli: array of arrays describing scenes. each interior array should have dimensions + * equal to the size of the desired grid. for example, a 3 x 3 grid with stimuli along + * the top-left to bottom-right diagonal would be declared like this: + * + * var s = [ + * [ "img_path", 0, 0 ], + * [ 0, "img_path", 0 ], + * [ 0, 0, "img_path" ] + * ] + * + * for blank spaces in the grid, you need to put a 0 in the corresponding location. + * image_size: array [width, height] - how big to draw the stimuli + * timing_duration: how long to show the scene + * timing_post_trial: how long to show blank screen after trial + * data: the optional data object + * + */ + +(function($) { + jsPsych['vsl-grid-scene'] = (function() { + + var plugin = {}; + + plugin.create = function(params) { + var trials = new Array(params.stimuli.length); + for (var i = 0; i < trials.length; i++) { + trials[i] = {}; + trials[i].type = "vsl-grid-scene"; + trials[i].stimuli = params.stimuli[i]; + trials[i].image_size = params.image_size || [100, 100]; + trials[i].timing_post_trial = (typeof params.timing_post_trial === 'undefined') ? 1000 : params.timing_post_trial; + trials[i].timing_duration = (typeof params.timing_duration === 'undefined') ? 2000 : params.timing_duration; + //trials[i].prompt = (typeof params.prompt === 'undefined') ? "" : params.prompt; + trials[i].data = (typeof params.data === 'undefined') ? {} : params.data; + } + return trials; + }; + + plugin.trial = function(display_element, block, trial, part) { + + var nrows = trial.stimuli.length; + var ncols = trial.stimuli[0].length; + + // create table + display_element.append($('', { + id: 'jspsych-vsl-grid-scene-table', + css: { + 'border-collapse': 'collapse' + } + })); + + for (var row = 0; row < nrows; row++) { + $("#jspsych-vsl-grid-scene-table").append($('', { + id: 'jspsych-vsl-grid-scene-table-row-' + row, + css: { + height: trial.image_size[1] + "px" + } + })); + for (var col = 0; col < ncols; col++) { + $("#jspsych-vsl-grid-scene-table-row-" + row).append($('
', { + id: 'jspsych-vsl-grid-scene-table-' + row + '-' + col, + css: { + padding: trial.image_size[1] / 10 + "px " + trial.image_size[0] / 10 + "px", + border: '1px solid #555' + } + })); + $('#jspsych-vsl-grid-scene-table-' + row + '-' + col).append($('
', { + id: 'jspsych-vsl-grid-scene-table-cell-' + row + '-' + col, + css: { + width: trial.image_size[0] + "px", + height: trial.image_size[1] + "px" + } + })); + } + } + + function fill_table(pattern) { + for (var row = 0; row < nrows; row++) { + for (var col = 0; col < ncols; col++) { + if (pattern[row][col] !== 0) { + $('#jspsych-vsl-grid-scene-table-cell-' + row + '-' + col).append($('', { + src: pattern[row][col], + css: { + width: trial.image_size[0] + "px", + height: trial.image_size[1] + "px", + } + })); + } + } + } + } + + fill_table(trial.stimuli); + + setTimeout(function(){ endTrial(); }, trial.timing_duration); + + function endTrial() { + + display_element.html(''); + + block.writeData($.extend({}, { + "trial_type": "vsl-grid-scene", + "trial_index": block.trial_idx, + "stimuli": JSON.stringify(trial.stimuli) + }, trial.data)); + + if (trial.timing_post_trial > 0) { + setTimeout(function() { + block.next(); + }, trial.timing_post_trial); + } + else { + block.next(); + } + } + }; + + return plugin; + })(); +})(jQuery); \ No newline at end of file