Documentation
Pie Chart
Description
The Pie Chart module enables you to present a pie chart. This can be used both as a presentation/simulation and as an activity, where the user can change percentage values.
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 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Items | This section allows entering all the details about every item.
|
||||||||||
| Step | This property defines the step (in percent) by which a user can change the items. It is equal to 1 if left empty. | ||||||||||
| Show values | If this property is selected, the items' percentage values are shown. | ||||||||||
| Show names | If this property is selected, the legend is displayed. | ||||||||||
| Is Activity | This property allows defining whether the module is an activity or not. When it is not defined as an activity, the answers given are not considered in the overall result. It is helpful when, e.g., creating simulations. | ||||||||||
| Is Disabled | Allows disabling the module so that the user is not able to interact with it. | ||||||||||
| Radius size | This property enables changing the graph radius in the module (a number between 0 and 1). | ||||||||||
| Percent positions | This property enables changing the position where the values are displayed (a number between 0 and 1). |
Scoring
The Pie Chart module allows the creation of exercises. To set the module in an exercise mode, choose the 'Is Activity' property. If the module is not in an exercise mode, all the below methods return 0!
| Property | Description |
|---|---|
| maxScore | 1 |
| score | 1 if all answers are correct, otherwise 0. |
| errorCount | 1 if all answers are correct, otherwise 1. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| disable | --- | Disables the module. |
| enable | --- | Enables the module. |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| reset | --- | Resets the module. |
| isAttempted | --- | Returns true if a user tries to solve the module. |
| isAllOK | --- | Returns true if all items have correct values, otherwise false. |
| isOK | index | Returns true if the chosen item has the correct value, otherwise false. |
| getPercent | --- | Returns the value of the chosen item. |
Events
OnValueChanged Event
This event contains the following fields:
| Field name | Description |
|---|---|
| Source | module ID |
| Item | N/A |
| Value | N/A |
| Score | 1 when the module has a correct answer, otherwise 0. |
CSS classes
| Class name | Description |
|---|---|
| .piechart | DIV containing the pie chart |
| .disabled | Additional class for a disabled module. |
| .correct | Additional class for the module solved correctly. |
| .wrong | Additional class for the module solved incorrectly. |
| .graph | Indicates the look of the graph. |
| .line | Indicates the look of the line. |
| .item, .itemX | Indicates the color of an Item (X is the number of the item) and its color in the legend. |
| .legend | Describes the style for the legend. |
| .legendItem | Indicates the look of the items in the legend. |
| .legendSquare | Indicates the look of the colored square in the legend. |
| .legendText | Indicates the look of the items' names in the legend. |
| .percentsValues | Indicates the look of the percentage values on the pie chart. |
Demo presentation
Demo presentation contains examples on how to use the Pie Chart module.