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

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

jqplot-point-label jqplot-series-1 jqplot-point-2 up
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.