Forum Discussion

Paktolus's avatar
Paktolus
Community Member
5 months ago

Results slide - Score progress bar

For the Results slide, I’d like to design a feature where the user’s score dynamically fills a progress bar based on their performance. For instance, if the user scores 25%, the bar should fill up to...
storyline 360
Nedim's avatar
Nedim
Community Member
5 months ago

To ensure a smooth and seamless transition for a dynamic progress bar or score display, JavaScript can be used. An example is provided below:

Paktolus's avatar
Paktolus
Community Member
5 months ago

What javascript code would I need to use to achieve this?

  • Nedim's avatar
    Nedim
    Community Member
    5 months ago

    Just a few things need to be done for this to work.

    1. Create a custom number variable called "score", set its default value to 0, and make it equal to the "QuizX.ScorePercent" variable when the timeline starts on this slide.

     

     

    2. Insert two identical rectangle shapes: one for the score bar and one for the score bar fill. Assign them different colors (similar to what you already have based on your screenshot).

    3. Right-click on the score bar fill shape and select Accessibility. In the Alt Text field, enter "score-bar-fill".

    3. Add an Execute JavaScript trigger to run when the timeline starts on this slide.

    You can find the entire code in the attached reference Story file.

Related Content