Presenting a Sequence of Images #812
-
|
I am attempted to program a simple study where an image is first presented, followed by another image 1/4 its size is presented in the middle of the previous image (i.e., First present image A, then Image B superimposed on the center of Image A). I used the following code based on the Lexical Decision task tutorial, where I altered it to present images instead of words. I can get it to present the first image, but then it crashes on me. <!DOCTYPE html>
<html>
<head>
<title>Objects_Scenes</title>
<script src="jspsych/jspsych.js"></script>
<script src="jspsych/plugins/jspsych-html-keyboard-response.js"></script>
<script src="jspsych/plugins/jspsych-image-keyboard-response.js"></script>
<script src="jspsych/plugins/jspsych-instructions.js"></script>
<link href="jspsych/css/jspsych.css" rel="stylesheet">
</head>
<body></body>
<script>
var timeline = [];
var instructions = {
type: 'instructions',
pages: ['Welcome!','<p>You will be presented scenes, followed by obbjects superimposed on those scenes.</p><p>When you see each object, think of how well it goes with the scene.</p><p>Your memory for objects will be tested later</p><p>Click the next button to start.</p>'],
show_clickable_nav: true
};
timeline.push(instructions);
var fixation = {
type: 'html-keyboard-response',
stimulus: '<span style="font-size:40px;">+</span>',
choices: jsPsych.NO_KEYS,
trial_duration: 1000
}
var scene = {
type: 'image-keyboard-response',
stimulus: jsPsych.timelineVariable('scene'),
stimulus_duration: 2000,
choices: jsPsych.NO_KEYS,
post_trial_gap: 0000
};
var object_scene = {
type: 'image-keyboard-response',
stimulus: jsPsych.timelineVariable('object'),
stimulus_duration: 2000,
choices: jsPsych.NO_KEYS,
post_trial_gap: 1000
};
var trial_info = [
{scene: 's001.jpg'},
{scene: 's002.jpg'},
{object: 'os001.jpg'},
{object: 'os002.jpg'}
];
var object_scene_procedure = {
timeline: [fixation,scene,object_scene],
timeline_variables: trial_info,
randomize_order: false
}
timeline.push(object_scene_procedure);
jsPsych.init({
timeline: timeline,
on_finish: function() {
jsPsych.data.displayData();
}
})
</script>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 12 replies
-
|
Because there are no keys being used to continue the trial, you additionally will have to add a "trial_duration" property in addition to the stimulus_duration. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for this. I see that this is for presenting two images simultaneously. Is there a way to present one image directly on top of another, but have one image be 1/4 the size of the other? As in Image A would be the background scene, and Image B would be superimposed on the center of Image A, but a 1/4 the size of Image A. I also need a way to present two images in a row with no ISI. Is there a way to present one image followed immediately by another with no ISI? That is, I want to present Image A, followed immediately by Image B. I thought it would be sufficient to simply code two variables for one trial, with one presenting one image and the next variable presenting another image. However, the program always breaks it up into two separate trials. |
Beta Was this translation helpful? Give feedback.
-
Yes, you can do this with HTML and CSS. It'll take a little bit of positioning with CSS. This might be a reasonable starting point: var trial = {
type: 'html-keyboard-response',
stimulus: '<div style="width:600px; height: 600px; position: relative;">'+
'<img src="a.png" style="width:600px; height:600px; position: absolute; top: 0px; left: 0px;"></img>'+
'<img src="b.png" style="width:150px; height: 150px; position: absolute: top: 225px; left: 225px;"></img>'+
'</div>'
} |
Beta Was this translation helpful? Give feedback.
-
By default there is no ISI between trials, so simply having two consecutive trials should result in an ISI of 0, as long as the images are preloaded. Here's documentation on preloading. |
Beta Was this translation helpful? Give feedback.
-
|
I was able to successfully implement the code that you provided, thank you so much Josh! The preloading resource looks helpful as well. Ideally, I would be able to implement the code that you provided to reference a table of stimuli, so that I can put a loop for it to run through an entire stimuli set. I assume this could be coordinated with preloading my stimuli as well. |
Beta Was this translation helpful? Give feedback.
-
You can do this with timeline variables. See the second example under that section for a pretty close analog. |
Beta Was this translation helpful? Give feedback.
Because there are no keys being used to continue the trial, you additionally will have to add a "trial_duration" property in addition to the stimulus_duration.