Cannot use style='transition-delay:...' within timelineVariable #1576
Replies: 1 comment 2 replies
-
|
Hi @angoodkind! I haven't used this property before, but based on the transition docs, it looks like the transition-delay property has to be used in conjunction with a transition property. I don't see a value for the CSS transition in your stimulus HTML. Is it set somewhere else? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @becky-gilbert , thanks so much for getting back to me. I do not have a transition property set anywhere else (that I know of). What would that look like? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @angoodkind, I'm wondering if the CSS transition property is the right way to go here. Admittedly I don't know much about it, but all the examples I see are related to transitioning a CSS style property when the element's class changes. In your case, I don't think the stimulus class is changing after 3 seconds, which makes it hard to set up a transition. Another option would be to use CSS animations/keyframes instead, which allows you to change the element's appearance over time, without having to change classes. If you do it this way, then I think you'll want to change the element's opacity. If it were me, I would do this by initially setting the prompt's visibility to "hidden" in the stimulus HTML, and using the var test_stimuli = [
{
"stimulus": "<img src='green-blue-bus.png' width='300' height='300'><p id='prompt' style='visibility:hidden;'>How would you describe the highlighted bus?</p>",
"data": {
"stim_type": "congruent"
}
}
]
var test = {
timeline: [{
type: 'html-keyboard-multiple-response',
response_ends_trial: false,
stimulus: jsPsych.timelineVariable('stimulus'),
data: jsPsych.timelineVariable('data'),
on_load: function() {
jsPsych.pluginAPI.setTimeout(function() {
document.getElementById('prompt').style.visibility = 'visible';
}, 3000);
}
}],
timeline_variables: test_stimuli,
sample: {type: 'fixed-repetitions', size: reps_per_trial_type}
};A third option is to modify the plugin file. You could add new trial parameters for the I hope this helps. Let us know if you need further guidance. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I am using a modified jsPsych plugin called jspsych-html-keyboard-multiple-response, which is based on the
html-keyboard-responseplugin.In my example below, there should be:
(1) and (3) work fine, but I cannot get the 3 second delay in (2) to work. Since the stimulus html is originally entered as a string, is there something different I should do? I've already tried adding a
<style>block to the html file, and modifying jspsych.css with a new selector. Any idea where I'm going wrong?Beta Was this translation helpful? Give feedback.
All reactions