Documentation
Count and Graph
Description
Count and Graph addon enables users to insert a ready-made bar graph into a presentation. To make the activity work, it is enough to predefine a few specific properties in the addon’s side menu.
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 |
|---|---|
| X axis description | Your description of X axis |
| X axis data | You can define here the number of columns, numeric answers for every column, color of every column and description, which can be a string or an image.
This property allows online resources. Find out more » |
| Y axis description | Your description of Y axis |
| Y axis maximum value | Defines maximum value on scale on Y axis |
| Y axis values | You can specify values on y axis separated by semi-colons, e.g. "2;3;4;7" or increase the value, e.g. "2*" (remember to include a star), then values on y axis will be: (0, 2, 4, ... , [Y axis maximum value]) |
| Bars width | Width of every column in graph in pixels |
| Background color | Background color specified in '#RRGGBB' (hex) notation or by name, e.g. 'pink' |
| Grid line color | Color of lines in background grid specified in '#RRGGBB' (hex) notation or by name, e.g. 'pink' |
| Border | Border size. A number between 0 (no border) and 5 (5px black border) |
Scoring
| Property | Description |
|---|---|
| maxScore | maximum score is equal to the number of columns on correct position |
| score | score is equal to the number of columns on correct position |
| errorCount | errorCount is equal to the number of columns on wrong position |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hide the addon. |
| show | --- | Show the addon. |
| showAnswers | --- | Shows the addon answers. |
| hideAnswers | --- | Hides the addon answers. |
Events
The Count and Graph addon sends ValueChanged type events to Event Bus when a user fills in the graph levels..
| Field name | Description |
|---|---|
| Item | Information on which column has been filled (i.e. "2 increase" means that the second column has been filled in) |
| Value | |
| Score | 1 if level is correct, 0 if incorrect |
When a user fills in all columns without any error, the addon sends the 'ALL OK' event. This event is different from a normal Count and Graph event so its structure is shown below.
| Field name | Description |
|---|---|
| Item | all |
| Value | N/A |
| Score | N/A |
CSS classes
| Class name | Description |
|---|---|
| jqplot-yaxis | Class for the y axis box. |
| jqplot-xaxis | Class for the x axis box. |
| jqplot-yaxis-label | Class for the y axis descriptions. |
| jqplot-xaxis-label | Class for the x axis descriptions. |
| jqplot-yaxis-tick | Class for every value description on the Y axis. |
| jqplot-xaxis-tick | Class for every value description on the X axis. |
.jqplot-point-label .jqplot-series-<column level> .jqplot-point-<column number> up |
Class for div that shows the up arrow. jqplot-series and jqplot-point are counted from 0. |
.jqplot-point-label .jqplot-series-<column level> .jqplot-point-<column number> down |
Class for div that shows the down arrow. jqplot-series and jqplot-point are counted from 0. |
.jqplot-point-label .jqplot-series-<column level> .jqplot-point-<column number> ok |
Class for div that shows the ok sign. jqplot-series and jqplot-point are counted from 0. |
Demo presentation
Demo presentation contain examples of how to use and configure the addon.