HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 19:20:55 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing padding bug

Browse Source
This commit is contained in:
Josh de Leeuw 2014-02-20 18:20:22 -05:00
parent f0e4e0f4aa
commit c36c46ef25
1 changed files with 132 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

258
plugins/jspsych-vsl-grid-scene.js
View File

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