variable images inside prompt HTML

[rosemintz]

Hello,

I'm new to jsPsych so apologies for a very simple question.

I am trying to create a task where participants see a single image while listening several audio clips. I've structured this as a series of audio-button-response trials, and would like to embed the image in their prompts, so that it continues to display while the audio is playing. This is an example of one trial right now:

{
   type: "audio-button-response",
   stimulus: jsPsych.timelineVariable('affixedfile1'),
   choices: ['Play option 2'],
   prompt: '<img src = "'+jsPsych.timelineVariable('picture')+'" >'
}

Each stimulus has a picture attribute specified, including file path (e.g. picture: "img/door.jpg")

The audio works fine but no image displays. When I replace the timelineVariable with a specific file path, they do display, so it seems I'm not specifying the variable correctly or maybe it cannot be accessed inside a prompt.

Thanks for your help!

[vijaymarupudi]

You can't use timelineVariables like they're strings because they return a placeholder, not a string, that is later replaced by jsPsych. To do what you'd like, try this.

{
   type: "audio-button-response",
   stimulus: jsPsych.timelineVariable('affixedfile1'),
   choices: ['Play option 2'],
   prompt: function() { return '<img src = "' + jsPsych.timelineVariable('picture', true) + '" >' }
}

[rosemintz]

Got it, thank you so much!