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.