Creating a short delay before prompt appears under a stimulus #2274
-
|
I am programming a task where each stimulus needs to appear on the screen for a few seconds, and then after that delay, keyboard response is enabled and a little line of text with the choice options (I've been doing this with a prompt) appears underneath the stimulus. I know about the minimum valid RT setting that jsPsych has, which is great, but that doesn't seem to let me control when the prompt appears. I've come up with a way to do this (see code below), but it is clunky -- it requires two separate timeline events (one for the stimulus, and one for the stimulus + prompt). Even worse, when the prompt appears, the stimulus moves up a little to make room for it. Obviously that's not ideal. Is there a simpler way to delay showing a prompt, or at least a way to do it without the movement issue I described above? Thanks. Here's a small example: <!DOCTYPE html>
<html>
<head>
<title>My experiment</title>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
<script>
/* initialize jsPsych */
var jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
});
/* create timeline */
var timeline = [];
/* define trial stimuli array for timeline variables */
var test_stimuli = [
{ stimulus: "Stimulus A"},
{ stimulus: "Stimulus B"}
];
/* define fixation and test trials */
var fixation = {
type: jsPsychHtmlKeyboardResponse,
stimulus: '<div style="font-size:60px;">+</div>',
choices: "NO_KEYS",
trial_duration: 250,
data: {
task: 'fixation'
}
};
/* display stimulus alone for a few seconds */
var displayStimulus = {
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: "NO_KEYS",
trial_duration: 3000,
data: {
task: 'fixation'
}
};
/* display stimulus with choices and wait for keyboard response */
var displayStimulusAndChoices = {
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
trial_duration: null,
data: {
task: 'response',
},
prompt: "<p> NO (F) YES (J)</p>"
};
/* define test procedure */
var test_procedure = {
timeline: [fixation, displayStimulus, displayStimulusAndChoices],
timeline_variables: test_stimuli,
repetitions: 4,
randomize_order: true
};
timeline.push(test_procedure);
/* start the experiment */
jsPsych.run(timeline);
</script>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Hi @davidlevari! One way to do this might be to use the minimum valid RT setting and present a single trial with the prompt, but set it's visibility to hidden using the HTML in-line style attribute. Then in the trial's /* display stimulus with choices and wait for keyboard response */
var displayStimulusAndChoices = {
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
trial_duration: null,
data: {
task: 'response',
},
prompt: '<p id="prompt" style="visibility:hidden;"> NO (F) YES (J)</p>',
on_load: function() {
// wait for 3 seconds, then show the prompt
setTimeout(function() {
document.getElementById('prompt').style.visibility = "visible";
}, 3000);
}
};(Note that this solution works if the trial can only end after 3 seconds. If it's possible for the trial to end earlier, then you'd need to store the timer as a variable so that you can clear it when the trial ends via the And here's another little trick if you want to do this as two separate trials, which might be nice because it lets you use "NO_KEYS" for the first part of the trial rather than setting a minimum valid RT of 3 seconds. You could include the prompt in the first part of the trial but set its visibility to hidden, which should mean that the hidden prompt still takes up space on the page, so you shouldn't see the stimulus move on the second part: /* display stimulus alone for a few seconds */
var displayStimulus = {
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: "NO_KEYS",
trial_duration: 3000,
data: {
task: 'stimulus'
},
prompt: '<p style="visibility:hidden;"> NO (F) YES (J)</p>',
};
/* display stimulus with choices and wait for keyboard response */
var displayStimulusAndChoices = {
type: jsPsychHtmlKeyboardResponse,
stimulus: jsPsych.timelineVariable('stimulus'),
choices: ['f', 'j'],
trial_duration: null,
data: {
task: 'response',
},
prompt: '<p> NO (F) YES (J)</p>'
};Do either of those solutions work for you? |
Beta Was this translation helpful? Give feedback.
-
|
Both options seem perfect, and the second one (toggling visibility) worked perfectly. Thank you! |
Beta Was this translation helpful? Give feedback.
-
|
Yay, great! |
Beta Was this translation helpful? Give feedback.
Hi @davidlevari! One way to do this might be to use the minimum valid RT setting and present a single trial with the prompt, but set it's visibility to hidden using the HTML in-line style attribute. Then in the trial's
on_loadfunction, you can set up a timer that changes the prompt's visibility after a delay.