Documentation

Completion Progress

Description

The Completion Progress module enables the insertion of a ready-made progress bar indicating the percentage of attempted activity modules on a current page.

Properties

The list starts with the common properties. Learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Turn off automatic counting When this property is selected, the Completion Progress doesn't react to changes in activity modules.

Supported commands

Command name Params Description
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
getProgress --- Returns current completion progress as integer in <0;100> range.
setProgress progress Sets current completion progress. The argument should be an integer in <0;100> range.

Advanced Connector integration

Each command supported by the Completion Progress module can be used in the Advanced Connector module's scripts. The below example demonstrates how to show or hide the module accordingly to the state of the Double State Button module.

EVENTSTART
Source:DoubleStateButton1
Value:1
SCRIPTSTART

var module = presenter.playerController.getModule('Completion_Progress1');
module.show();

SCRIPTEND
EVENTEND

EVENTSTART
Source:DoubleStateButton1
Value:0
SCRIPTSTART

var module = presenter.playerController.getModule('Completion_Progress1');
module.hide();

SCRIPTEND
EVENTEND

CSS classes

Class name Description
progress-bar DIV element that indicates the look of the internal bar, which increases proportionally to the user's progress.
progress-text DIV element that indicates the look of the inner text (current progress).

Example

.addon_Completion_Progress {
    padding: 2px;
    width: 130px;
    height: 25px;
    border-radius: 5px;
    border: 2px solid black;
}

.addon_Completion_Progress .progress-bar {
    background-color: #FA8805;
    border-radius: 5px;
    height: 100%;
}

.addon_Completion_Progress .progress-text {
    color: #000000;
    font-size: 18px;
    position: absolute;
    width: 10%;
    left: 45%;
    height: 50%;
    top: 25%;
    text-align: center;
}

The above example shows the default styling of the module.

Demo presentation

Demo presentation contains examples on how to use the Completion Progress module.