Forum Discussion
How to add Voiceover to Quiz questions?
I initially thought this might not be possible, but I managed to achieve it with a single JavaScript solution. The script detects the shuffled answer elements in the DOM, reads their final visual positions, sorts them into the order shown on screen, and stores that sequence in Storyline variables. It then maps each answer to its corresponding audio file and creates a playback queue that follows the same shuffled order.
As a result, the audio always plays in the exact sequence in which the answers appear, regardless of how Storyline randomizes them. To make the setup easier to manage, I imported the prerecorded audio files into Storyline Resources instead of placing every audio file on the slide timeline or creating additional layers to hold them. With four answers, there are 24 possible shuffled combinations, such as: 1-2-3-4 1-2-4-3 4-2-3-1 etc.
Trying to manage all those combinations manually with layers, states, and triggers would be difficult, time-consuming, and unnecessary. It would also require additional logic to prevent audio files from overlapping and to ensure that each audio finishes before the next one begins.
Instead, the JavaScript handles the entire process dynamically. Each answer is permanently mapped to its matching audio file. After Storyline shuffles the answers, the script determines their new visual order, creates the corresponding audio sequence, and plays the files one at a time. The playback engine waits for the current audio to finish before starting the next one, so there is no overlap. I also added a global stop function that can be called before reloading the slide, ensuring that any audio currently playing is stopped. The answer-to-audio mapping is hard-coded, which gives me full control over which recording belongs to each answer. The order itself is not hard-coded. It is detected dynamically every time the slide loads.
In simple terms, the process is: Storyline shuffles the answers → JavaScript detects the new order → each answer is matched with its audio → the audio queue is created → the recordings play sequentially without overlap. This avoids the need for 24 separate scenarios, multiple audio layers, and a large number of conditional triggers.
VickyAttridge
I have attached a Storyline file for reference. It includes both my working test slide and another slide that more closely resembles your setup and answer choices.
This was a successful experiment that you are welcome to reuse or adapt for future projects with a similar setup. It may also be useful to other community members who are interested in more advanced JavaScript solutions, whether to build upon the code, optimize it, or simplify it further.
That said, I would not recommend this approach if you are not comfortable with JavaScript or at least familiar with editing and troubleshooting code. Hopefully, other members of the community can suggest a more approachable solution, or perhaps even a built-in Storyline feature that I may have overlooked.
In the meantime, feel free to use the attached example as a starting point. If you decide to go this route and run into any issues, don't hesitate to ask questions here or reach out for assistance. I'll be happy to help where I can.
- AndrewBlemings-16 days agoCommunity Member
This would be an excellent solution, well done! The file didn't attach though.
- Nedim16 days agoCommunity Member
AndrewBlemings- Attached.
Related Content
- 1 year ago