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.