The Smart Sparrow platform has a progress bar component that can be added from the components menu into any of your tutorials. Giving your students an indication as to how far into a lesson they are helps them decide whether to stop and finish the tutorial later, or to stay and complete the lesson.

Watch the set up of the Progress Bar widget in our short video or follow the the steps below:


How to add a progress bar to your tutorial

  1. Create a layer by clicking NEW then Layer and an untitled layer will appear with an untitled screen underneath.
  2. From the components menu add the progress bar to the layer (by adding the progress bar to the layer it will automatically appear on all subsequent screens).
  3. When your tutorial is complete, or you have an idea of how many screens your tutorial will ultimately have, click Preview and open the Screens menu on the left hand side. This will give you an indication as to how many screens you have and which screen is which number. Note, if you have optional pathways that students do not have to complete you may need to make your own judgement as to how to number the screens and calculate the total number of screens.
  4. On the layer click the progress bar component and Configure, then Option and input the Total Questions Number
  5. For each screen click Initial State in the Adaptivity Panel
  6. Click Initial State +
  7. Click “Click to change”
  8. Select ProgressBar, then current question number is
  9. Click the blank box next to ‘is’ and in the array values box type the screen number
  10. Click OK.
  11. Repeat steps 5 to 10 for all screens increasing the number as you progress through the tutorial.
  12. Click preview to see the progress bar change for each screen.


Changing the colour of the progress bar

The standard colour of the progress bar is blue. You may wish to consider changing the colour of the progress bar to suit a colour scheme you are using in your lessons.

You can do this at the same time as set up of the progress bar to save time and you may only need to do this step on the first screen the students encounter the progress bar.

  1. In the initial state, click on the Initial State + button
  2. Click “Click to change”
  3. Select the ProgressBar, then choose Css
  4. Type or paste the text: .progress{background-color: (insert what colour you want here);}
    e.g. .progress{background-color:red;}
    Alternatively, to use a more specific colour use the html hex colour code. For example, #FF0000 is the hex colour for red.
    e.g. .progress{background-color:#FF0000;}
    Both will achieve the same result.

You’re welcome to contact me at with any questions you have regarding setting up a progress bar in your lesson.