Sequential Display of Multiple Stimuli on Same Page with Auto-Hide After Answering

Question

Hi everyone,

I have a question regarding displaying multiple stimuli on a single page along with their corresponding questions in a random way. I would like these stimuli to be shown one at a time, where participants can answer the questions related to each stimulus before moving on to the next one. Ideally, there would be a button to proceed to the next stimulus while hiding the previous one.

I believe I need to implement this functionality using JavaScript, but I'm not very familiar with the language.

The reason I need to keep all the stimuli and questions on the same page is that there will be background music playing.

Any help or guidance on how to achieve this would be greatly appreciated.

Thank you!

Answer 1

Ideally, there would be a button to proceed to the next stimulus while hiding the previous one.

The easiest way to archieve this is to use a single page for each stimulus.

If there are just a few stimuli, you can actually create a page for each stimulus and rotate the pages. If there are more simuli, using loopPage() is much more efficient, see Rotate Questions Together with Other Content.

there will be background music playing.

You can either take care of the music via frameset, see Musik über mehrere Seiten hinweg abspielen (use the code from the German manual, as the English manual is not up to date, and won't work). Or you can learn JavaScript can actually take care for showing the question one after another on the same page. Here's the basics, i.e., event handlers and how to show(hide HTML blocks: Immediately Show Questions when a Certain Option is Selected