Documentation
Count and Graph
Description
The Count and Graph module 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 module’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 |
|---|---|
| Is not an activity | With this option marked, the score and errors will not be returned by the module. |
| X axis description | Your description of the 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. You can also designate a column as an example. Example columns display their numeric answer and cannot be interacted with.
This property allows online resources. Find out more » |
| Y axis description | Your description of the y-axis. |
| Y axis maximum value | Defines the maximum value of the scale for the y-axis. |
| Y axis values | You can specify values on the 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 the y-axis will be: (0, 2, 4, ... , [Y axis maximum value]) |
| Bars width | Width of every column in the graph in pixels. |
| Background color | Background color specified in '#RRGGBB' (hex) notation or by name, e.g., 'pink'. |
| Grid line color | Color of the lines in the 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 | The maximum score is equal to the number of columns set to the correct position. |
| score | The score is equal to the number of columns set to the correct position. |
| errorCount | The errorCount is equal to the number of columns set to the wrong position. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| showAnswers | --- | Shows the module's answers. |
| hideAnswers | --- | Hides the module's answers. |
Events
The Count and Graph module sends the ValueChanged type events to the Event Bus when the 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 the level is correct, 0 if incorrect. |
When the user fills in all columns without any mistakes, the module 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. The 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. The 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. The jqplot-series and jqplot-point are counted from 0. |
Demo presentation
Demo presentation contains examples of how to use the Count and Graph module.