Documentation
Page progress
Description
The Page progress module enables to insert a ready-made Page progress bar indicating the percentage of correct answers given on a current page. It is possible to modify the appearance of each part of the Page progress module individually — its frame, text and progress bar.
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 |
|---|---|
| Works with | List of Limited Check modules connected with Page progress. Each line should consist of separate modules ID |
| Lang attribute | This property allows to define the language for this addon (different than the language of the lesson). |
Supported commands
| Command name | Params | Description |
|---|---|---|
| show | – | Shows the addon |
| hide | – | Hides the addon |
CSS classes
| Class name | Description |
|---|---|
| .ic_pageprogress | indicates the module's look excluding the parameter defining the look of the internal bar, which increases proportionally to the user's progress |
| .ic_progress-shell | indicates the progress of solving the tasks correctly on a current page |
| .ic_pageprogress-bar | indicates the look of the internal bar, which increases proportionally to the user's progress |
| .ic_pageprogress-text | indicates the look of the Page progress text |
Examples
1.1. Page Progress
.ic_pageprogress{
background-color: #0070b0;
border-radius: 4px;
border: 1px solid #ffffff;
box-shadow: 1px 2px 2px #406d93;
padding: 3px;
}
1.2 Page Progress — progress-text
.ic_pageprogress .ic_progress-text{
color: #ffffff;
font-size: 18px;
font-family: Verdana;
text-shadow: 1px 2px 2px #043651;
}
1.3.Page Progress — progress-bar
.ic_pageprogress .ic_progress-bar{
background-color: #3cc5cc;
border-radius: 4px;
}