CC Creator - Progress Bar

Last modified:


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. 

Image 47823

Image 47824

Image 47825

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.

Image 47827

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. 

Image 47832

- 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.

    Image 47089

    Image 47833


    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).

    Image 47094


    - 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:

    Image 47093


    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.

    Image 47834

    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.

    Image 47835


    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.

    Image 47027

    Image 47028




    Is this article helpful for you?
    © 2023 Netex Knowledge Factory. All Rights Reserved. Disclaimer | Privacy policy | Cookie Policy.
    -