Unique ways to use this widget
The labelled progress bar can be used to display a lesson with unequal sections. For example the first section might occupy the first half of a lesson whilst sections 2 and 3 each occupy one quarter of the lesson each.
Have a play
Basic setup instructions
- This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
- With the component selected, Click on Configure and select Options to set it up.
- You must change the Mode to Config mode to set up the widget.
- Create a Layer and place all the screens in your lesson underneath this Layer to add the component to every screen. Now you won’t have to copy and paste the same component over and over again.
- First set the total number of screens in the lesson by typing it in the grey box to the right.
- Add additional sections by clicking on the blue button on the left. As new sections are added the total number of screens will be allocated across the sections. You can adjust the number of screens in each section by clicking and dragging the divider between two sections.
- Next use the Initial State condition for the screen and set the Current Screen. E.g. if there are 10 total screens in your lesson and you are on the third screen: the total screens should be set to 10 inside the widget and Current Screen should be set to 3. This will mean the progress bar will show 30% complete.
- Make sure to change the mode to Student when done.
- 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.
- Customise the colors of the Section text labels (Section Text Color), the background color of the progress bar (Section Background Color) and the foreground color (Section Background Color). Pick the color by writing a rgb value, hex code or even a common name of a color e.g. purple.
- You can also determine the width (in pixels) and color of the separators between each section using Gap Width and Gap Color respectively.
Properties available for creating trap states or configuring your questions.
Advanced widget setup
Contact our team for help setting up the widget and trap states in your lessons.