mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 19:20:55 +00:00
moving stimulus creation to a separate public function so that stimuli can be generated for other plugins
This commit is contained in:
Josh de Leeuw
parent
eb60da88e1
commit
03f70efbe2
@ -1,134 +1,151 @@
|
||||
/**
|
||||
* 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($('<table>', {
|
||||
id: 'jspsych-vsl-grid-scene-table',
|
||||
css: {
|
||||
'border-collapse': 'collapse',
|
||||
'margin-left': 'auto',
|
||||
'margin-right': 'auto'
|
||||
}
|
||||
}));
|
||||
|
||||
for (var row = 0; row < nrows; row++) {
|
||||
$("#jspsych-vsl-grid-scene-table").append($('<tr>', {
|
||||
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($('<td>', {
|
||||
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($('<div>', {
|
||||
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($('<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('');
|
||||
|
||||
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;
|
||||
})();
|
||||
/**
|
||||
* 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) {
|
||||
|
||||
display_element.html(plugin.generate_stimulus(trial.stimuli, trial.image_size));
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
plugin.generate_stimulus = function(pattern, image_size) {
|
||||
var nrows = pattern.length;
|
||||
var ncols = pattern[0].length;
|
||||
|
||||
// create blank element to hold code that we generate
|
||||
$('body').append($('<div>', {
|
||||
id: 'jspsych-vsl-grid-scene-dummy',
|
||||
css: {
|
||||
display: 'none'
|
||||
}
|
||||
}));
|
||||
|
||||
// create table
|
||||
$('#jspsych-vsl-grid-scene-dummy').append($('<table>', {
|
||||
id: 'jspsych-vsl-grid-scene-table',
|
||||
css: {
|
||||
'border-collapse': 'collapse',
|
||||
'margin-left': 'auto',
|
||||
'margin-right': 'auto'
|
||||
}
|
||||
}));
|
||||
|
||||
for (var row = 0; row < nrows; row++) {
|
||||
$("#jspsych-vsl-grid-scene-table").append($('<tr>', {
|
||||
id: 'jspsych-vsl-grid-scene-table-row-' + row,
|
||||
css: {
|
||||
height: image_size[1] + "px"
|
||||
}
|
||||
}));
|
||||
for (var col = 0; col < ncols; col++) {
|
||||
$("#jspsych-vsl-grid-scene-table-row-" + row).append($('<td>', {
|
||||
id: 'jspsych-vsl-grid-scene-table-' + row + '-' + col,
|
||||
css: {
|
||||
padding: image_size[1] / 10 + "px " + image_size[0] / 10 + "px",
|
||||
border: '1px solid #555'
|
||||
}
|
||||
}));
|
||||
$('#jspsych-vsl-grid-scene-table-' + row + '-' + col).append($('<div>', {
|
||||
id: 'jspsych-vsl-grid-scene-table-cell-' + row + '-' + col,
|
||||
css: {
|
||||
width: image_size[0] + "px",
|
||||
height: 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-cell-' + row + '-' + col).append($('<img>', {
|
||||
src: pattern[row][col],
|
||||
css: {
|
||||
width: image_size[0] + "px",
|
||||
height: image_size[1] + "px",
|
||||
}
|
||||
}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var html_out = $('#jspsych-vsl-grid-scene-dummy').html();
|
||||
$('#jspsych-vsl-grid-scene-dummy').remove();
|
||||
|
||||
return html_out;
|
||||
|
||||
};
|
||||
|
||||
return plugin;
|
||||
})();
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue
Block a user