Documentation
Pie Chart
Description
A Pie Chart addon enables you to present a pie chart. This can be used both as a presentatoin/simulation or as an activity, where a student can change percentage values.
Properties
| Property name | Description |
|---|---|
| Is visible | Enables to hide or show the module. |
| Items | This section allows to enter 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 to define whether the module is an activity or not. |
| Is disabled | Allows to disable the module so that it won't be possible to change any item. |
| Radius size | This property enables to change the graph radius in the module (a number between 0 and 1). |
| Percent positions | This property enables to change the position where the values are displayed (a number between 0 and 1). |
Scoring
Pie Chart addon allows to create exercises. To set the module in an excercise mode, choose the 'Is Activity' property. If the addon is not in an excercise 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 addon. |
| enable | --- | Enables the addon. |
| show | --- | Shows the addon. |
| hide | --- | Hides the addon. |
| reset | --- | Resets the addon. |
| 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 addon has a correct answer, otherwise 0 |
CSS classes
| Class name | Description |
|---|---|
| .piechart | DIV containing the pie chart |
| .disabled | additional class for a disabled addon |
| .correct | additional class for the addon solved correctly |
| .wrong | additional class for the addon 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 addon.
