Documentation
Completion Progress
Description
Completion Progress is a module that enables to insert 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, module doesn't react on changes in activity modules |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hides the module |
| show | --- | Shows the module |
| getProgress | --- | Returns current completion progress as integer in <0;100> range |
| setProgress | progress | Sets current completion progress. 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 addon's scripts. The below example shows how to show or hide the addon accordingly to the Double State Button module's state.
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 default module styling.
Demo presentation
Demo presentation contains examples on how to use the Completion Progress module.