Forum Discussion

VickyAttridge's avatar
VickyAttridge
Community Member
16 days ago

How to add Voiceover to Quiz questions?

How would you add a voice over to a quiz question when the answers shuffle each time? Obviously the voice over needs to read the answers in the order they are presented in.

For example, if it is a multiple answer question with one correct answer, but the answers shuffle each time, how can the voice over be setup to read the answers in the order presenting?

Alternatively, if it is an ordering question (with drop-down menus) where the answers shuffle each time, how can the voice over be setup to read the answers in the order presenting?

See attachment of quiz questions.

6 Replies

  • VickyAttridge's avatar
    VickyAttridge
    Community Member

    Thank all for the help, especially the java script part. Really appreciate it!

  • Nedim's avatar
    Nedim
    Community Member

    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.

  • Nedim's avatar
    Nedim
    Community Member

    This is technically possible with JavaScript, and in theory the answer order can be detected or inferred at runtime when the question is loaded and answers shuffled.

    With 4 shuffled answers, there are: 4!=4×3×2×1=24 possible permutations (scenarios) of answer order each time the question loads.

    The only part that would need to be handled is the audio trigger logic, where each displayed answer position must be mapped at runtime to its corresponding audio file. Without JavaScript, there is no viable workaround. The only alternative would be building static trigger conditions covering all 24 permutations, specifically just for audio playback, which quickly becomes unmanageable and difficult to maintain.

    Because of this, while JavaScript is the only real solution, the effort required to correctly manage audio triggering in a shuffled environment is disproportionate to the benefit especially given the complexity.

    I would like to see if anyone has an alternative logic or idea on how to do this, as I may have over-calculated something or misunderstood the concept.

  • I don't think there's a particularly easy answer, in part because the course doesn't read the page like an accessibility reader does. When we create TTS audio files, it's just a normal sound file. I can delete or change a textbox and the audio will still play when the course is run, so the playing of the audio is separate from whatever's on the slide.

    The easy part though is playing sound files. If each question's answer has a TTS audio file generated for it, and each audio file gets its own layer, then in theory a series of triggers could play the layers in a certain order, whether it's 1-3-4-2 or 1-2-4-3 or whatever.

    The challenge would be figuring out how to find that order when the slide is dynamically arranging the answers. I'm sure there's an answer in JavaScript.

    From a quick mockup slide, I can see that three multiple-choice answers are in a div with the class "slide-object-shufflegroup." JavaScript would be able to loop through that object and find each of the answer choices from top-to-bottom, and then the accessibility text of each could be used to determine which answer is which, and then the order set to a Storyline variable that cascades the audio layers like mentioned prior.

    Do you have any JavaScript experience?