Documentation
Animated Page Progress
Description
Animated Page Progress is a module that allows users to display images assigned to the percentage score of a 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 |
|---|---|
| Ranges | List of Ranges. Each range consists of 'Image' and 'Score' which is the maximum percentage score for the image.
This property allows online resources. Find out more ยป |
| Initial image | Image to be displayed before there is any interaction with activity modules on a page. If not set, the first rate is displayed. |
| Work in Check Mode | When this option is selected, the module will be updated after clicking the Check button. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hide the Addon |
| show | --- | Show the Addon |
Advanced Connector integration
Each command supported by the Animated Page Progress module can be used in the Advanced Connector addon scripts. The below example shows how to show or hide addon accordingly to the Double State Button module's state.
EVENTSTART
Source:DoubleStateButton1
Value:1
SCRIPTSTART
var module = presenter.playerController.getModule('Animated_Progress1');
module.show();
SCRIPTEND
EVENTEND
EVENTSTART
Source:DoubleStateButton1
Value:0
SCRIPTSTART
var module = presenter.playerController.getModule('Animated_Progress1');
module.hide();
SCRIPTEND
EVENTEND
CSS classes
| Class name | Description |
|---|---|
| animated-page-progress-wrapper | DIV wrapping the Addon's elements |
| animated-page-progress-rate | DIV containing additional image for the percentage score |
| rate-<rate_number> | Additional class for animated-page-progress-rate elements specifying for which range it's displayed. Rate numbers are counted from 1 |
| rate-initial | Additional class for animated-page-progress-rate element displaying initial image |
Example
.animated-page-progress-rate {
background-color: black;
}
The above example shows how to change the background color in DIVs.
Demo presentation
Demo presentation contains examples on how to use the Animated Page Progress addon.