CC Creator - Progress Bar

The progress bar allows us to add a graphical counter that can be circular or linear. 

It is very common to use it to count the number of activities passed in a quiz, but it could be used to show the percentage of success, the page number of the unit, etc. 

Each editing mode allows different actions to be performed with the progress bars

Easy mode:

• Configure the properties of a progress bar

Professional mode:

• Add a progress bar within rows
• Move position
  
• Duplicate or delete
• Modify the visibility of a progress bar
  

Configuring the properties of a progress bar

Clicking on the bar activates the side menu with its properties.

The properties that you can configure in the rows and columns are:

• Its title. It will be useful to customize it to recognize the table of contents from the breadcrumb trail.
• Its identifier. This is an auto-generated data by the system, but you can customize it. If you customize it, you will help to make the trace sent by the unit to the platform clearer. Remember that the Identifiers must be different, you cannot repeat any identifier of any element within the unit, so you must be careful when modifying them and not repeat them.
• Minimum value. Value of the starting point of the progress bar. It can be a numeric value (for example, it would be unusual to use 0 as the minimum value) or any of the available variables(*). 
• Maximum value. Value of the starting point of the progress bar. It can be a numeric value (e.g. 100) or one of the available variables(*).
• Fill value. Value to be used to fill the progress bar. Although a fixed numeric value can be used, it is normal to use one of the available variables(*).
• Animation start value. Value to be used to start the progress bar fill animation. You can use a numeric value (usually 0) or any of the available variables(*).

(*) ^Click inside the field the key combination SHIFT +ALT + 1 and you will see the available variables. 

- PAGE_NUMBER: Number of the current page

- PAGES_COUNT: Total number of pages

- VISITED_PAGES: Number of pages visited

- QUIZ_TOT_ACTIVITIES: Total number of quiz activities..

- QUIZ_CORRECT_ACTIVITIES: Number of correct questions after the current attempt.

- QUIZ_SCORE_PERCENT:Percentage of successful completion of the quiz achieved by the student in the current attempt.

- QUIZ_LIMIT_TIME: Time limit to finish the quiz.

- QUIZ_ELAPSED_TIME: Second elapsed since the student has started the current attempt to answer the quiz.

- QUIZ_REMAINING_TIME: Time left to exhaust the time limit.

Add a new progress bar

With the Professional editing mode you can add new bars

To do so, you have the + button located in the lower left area.

Remember that any component you add will always be inside a row, so you have two ways to add a new iframe.

- Select an existing element on the screen (a row, a text, an image...). Then, just add the desired component by clicking on it. It will be added below the chosen element (or as the last element of the row).

- Drag the component to the screen. By moving the mouse over the elements on the screen you can decide where to place the component. To help you, a color-coded bar will be displayed:

Move a progress bar of position

With the Professional editing mode you can move a component by position

All you have to do is select it by clicking on its label and use the initial icon to drag the element.

Remember that to help you choose the desired position, color-coded bars will be displayed:

- Blue: will move creating a new section.

- Orange: will move creating a new row.

- Green: will move creating a new column.

- Gray: it will move under another existing element.

Duplicate or delete a progress bar

Select the component and, from its label, you can duplicate or delete it.

Modify the visibility of a progress bar

You can decide whether the progress bar is visible or not according to the condition you decide. Click on "Add condition". Here you can decide which object/component will be used as a referent and then you can decide which trigger will make the text visible. Depending on the object you choose, you will have different triggers. >For example, you could make the bar visible when the learner passes an activity or quiz.