Unique ways to use this widget
The progress bar can also be used to display the student’s score by feeding it values from the lesson. This creates what the instructor has called a “Well-being Meter” to give the students a visual indication of how they’re doing.
See how the “Well-being Meter” works here: https://aelp.smartsparrow.com/learn/open/zvc1pqle
Have a play
Basic setup instructions
- First, create a Layer and place all the screens in your lesson underneath this Layer.
- On the layer, insert the Progress Bar widget from the Components tab and resize it to your liking. By adding the widget to the layer, you won’t have to copy and paste the same component over and over again.
- Once you have added the component to the layer, click on Configure and select Options to set it up.
- Start by setting the Total Question Numbers. This tells the widget how many screens there are in the lesson.
- Then, use the Initial State condition of each screens to set the Current Screen Number.
E.g. if there are 10 total screens in your lesson and you are on the third screen: the Total Question Numbers should be set to 10 and Current Question Number should be set to 3. This will mean the progress bar will show 30% complete.
- Q: When I change the percentages it affects every screen. Why? This might be because you have the component on a Layer and then you’re configuring the percentages of the component on the layer which affects all screens instead of the Initial State condition for each screen.
- You can customise the way it looks using css.
- You could also use “Question percentage” to set the percentage of where individual screens are fitting in the overall lesson.
Advanced widget setup
Contact our team for help setting up the widget and trap states in your lessons.