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. "Name" is only needed if the property “Show names” is selected. "Color" defines the color of the item; if left empty, the color is taken from the CSS style. "Starting percent" defines the percentage values at the beginning. "Answer" is only needed if the property "Is Activity" is selected. |
| 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 | Enables defining whether the module is an activity or not. |
| 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. |
| show | --- | Shows the module. |
| hide | --- | Hides the module. |
| 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.