Forum Discussion
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 the 25% mark, and so on. Is this achievable? If yes, could you guide me on how to implement this?
Thanks in advance.
Hi Paktolus,
Design a progress bar in any color of your choice. Create multiple states for the progress bar to represent different levels of progress (e.g., 25, 50, 75, and 100). Insert another progress bar within each state of the original progress bar. Align this inner bar to the top-left corner of the outer bar. Determine the percentage based on the number of quiz questions. For example, if there are 4 questions, create states representing progress at 25%, 50%, 75%, and 100%. Name the states according to the percentage of completion, such as 25%, 50%, 75%, and 100% for a 4-question quiz. On the Result Slide, create triggers that adjust the state of the progress bar based on the Quiz1.ScorePercent. Set each trigger to change the progress bar's state to the corresponding percentage based on the score. I am attaching a storyline file for your refrence. Hope that helps you.
To ensure a smooth and seamless transition for a dynamic progress bar or score display, JavaScript can be used. An example is provided below:
What javascript code would I need to use to achieve this?
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.
