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
|
* 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;
|
display_element.html(plugin.generate_stimulus(trial.stimuli, trial.image_size));
|
||||||
var ncols = trial.stimuli[0].length;
|
|
||||||
|
setTimeout(function() {
|
||||||
// create table
|
endTrial();
|
||||||
display_element.append($('<table>', {
|
}, trial.timing_duration);
|
||||||
id: 'jspsych-vsl-grid-scene-table',
|
|
||||||
css: {
|
function endTrial() {
|
||||||
'border-collapse': 'collapse',
|
|
||||||
'margin-left': 'auto',
|
display_element.html('');
|
||||||
'margin-right': 'auto'
|
|
||||||
}
|
block.writeData($.extend({}, {
|
||||||
}));
|
"trial_type": "vsl-grid-scene",
|
||||||
|
"trial_index": block.trial_idx,
|
||||||
for (var row = 0; row < nrows; row++) {
|
"stimuli": JSON.stringify(trial.stimuli)
|
||||||
$("#jspsych-vsl-grid-scene-table").append($('<tr>', {
|
}, trial.data));
|
||||||
id: 'jspsych-vsl-grid-scene-table-row-' + row,
|
|
||||||
css: {
|
if (trial.timing_post_trial > 0) {
|
||||||
height: trial.image_size[1] + "px"
|
setTimeout(function() {
|
||||||
}
|
block.next();
|
||||||
}));
|
}, trial.timing_post_trial);
|
||||||
for (var col = 0; col < ncols; col++) {
|
}
|
||||||
$("#jspsych-vsl-grid-scene-table-row-" + row).append($('<td>', {
|
else {
|
||||||
id: 'jspsych-vsl-grid-scene-table-' + row + '-' + col,
|
block.next();
|
||||||
css: {
|
}
|
||||||
padding: trial.image_size[1] / 10 + "px " + trial.image_size[0] / 10 + "px",
|
}
|
||||||
border: '1px solid #555'
|
};
|
||||||
}
|
|
||||||
}));
|
plugin.generate_stimulus = function(pattern, image_size) {
|
||||||
$('#jspsych-vsl-grid-scene-table-' + row + '-' + col).append($('<div>', {
|
var nrows = pattern.length;
|
||||||
id: 'jspsych-vsl-grid-scene-table-cell-' + row + '-' + col,
|
var ncols = pattern[0].length;
|
||||||
css: {
|
|
||||||
width: trial.image_size[0] + "px",
|
// create blank element to hold code that we generate
|
||||||
height: trial.image_size[1] + "px"
|
$('body').append($('<div>', {
|
||||||
}
|
id: 'jspsych-vsl-grid-scene-dummy',
|
||||||
}));
|
css: {
|
||||||
}
|
display: 'none'
|
||||||
}
|
}
|
||||||
|
}));
|
||||||
function fill_table(pattern) {
|
|
||||||
for (var row = 0; row < nrows; row++) {
|
// create table
|
||||||
for (var col = 0; col < ncols; col++) {
|
$('#jspsych-vsl-grid-scene-dummy').append($('<table>', {
|
||||||
if (pattern[row][col] !== 0) {
|
id: 'jspsych-vsl-grid-scene-table',
|
||||||
$('#jspsych-vsl-grid-scene-table-cell-' + row + '-' + col).append($('<img>', {
|
css: {
|
||||||
src: pattern[row][col],
|
'border-collapse': 'collapse',
|
||||||
css: {
|
'margin-left': 'auto',
|
||||||
width: trial.image_size[0] + "px",
|
'margin-right': 'auto'
|
||||||
height: trial.image_size[1] + "px",
|
}
|
||||||
}
|
}));
|
||||||
}));
|
|
||||||
}
|
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"
|
||||||
fill_table(trial.stimuli);
|
}
|
||||||
|
}));
|
||||||
setTimeout(function(){ endTrial(); }, trial.timing_duration);
|
for (var col = 0; col < ncols; col++) {
|
||||||
|
$("#jspsych-vsl-grid-scene-table-row-" + row).append($('<td>', {
|
||||||
function endTrial() {
|
id: 'jspsych-vsl-grid-scene-table-' + row + '-' + col,
|
||||||
|
css: {
|
||||||
display_element.html('');
|
padding: image_size[1] / 10 + "px " + image_size[0] / 10 + "px",
|
||||||
|
border: '1px solid #555'
|
||||||
block.writeData($.extend({}, {
|
}
|
||||||
"trial_type": "vsl-grid-scene",
|
}));
|
||||||
"trial_index": block.trial_idx,
|
$('#jspsych-vsl-grid-scene-table-' + row + '-' + col).append($('<div>', {
|
||||||
"stimuli": JSON.stringify(trial.stimuli)
|
id: 'jspsych-vsl-grid-scene-table-cell-' + row + '-' + col,
|
||||||
}, trial.data));
|
css: {
|
||||||
|
width: image_size[0] + "px",
|
||||||
if (trial.timing_post_trial > 0) {
|
height: image_size[1] + "px"
|
||||||
setTimeout(function() {
|
}
|
||||||
block.next();
|
}));
|
||||||
}, trial.timing_post_trial);
|
}
|
||||||
}
|
}
|
||||||
else {
|
|
||||||
block.next();
|
|
||||||
}
|
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>', {
|
||||||
return plugin;
|
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);
|
})(jQuery);
|
||||||
Loading…
Reference in New Issue
Block a user