Login Register

Documentation

Graph

Description

The Graph module allows inserting a ready-made bar graph into your content.

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 The description shown near the X axis.
Show X axis bars descriptions Indicates if there should be a description shown below each bar (column).
X axis bars descriptions List of descriptions to show below each bar (column). Used only if the 'Show X axis bars descriptions' property is marked. The number of items must be equal to the number of bars in the graph.
Show X axis series descriptions Indicates if there should be a description shown below each of the series.
X axis series descriptions List of descriptions to show below each series. Used only if the 'Show X axis series descriptions' property is marked. The number of items must be equal to the number of series.
Y axis description The description shown near the Y axis.
Y axis maximum value Indicates the maximum value that can be shown on the graph, which can have a fractional part.
Y axis minimum value Indicates the minimum value that can be shown on the graph, which can have a fractional part.
Y axis grid step Indicates how often to draw horizontal grid lines, which can have a fractional part.
Y axis values Shows/hides cyclic or custom values on the Y axis. You can specify single values, e.g., 2;3;-5, cyclic values, e.g., 2*, or mixed values, e.g,. 2*;5;3;-3.5;7.1*. Cyclic value means that every n-th occurrence will be shown.
Interactive Indicates if the user can change the graph columns' values by clicking above or below them.
Interactive step Indicates a value that will be added to or removed from the clicked column; it can have a fractional part.
Data Graph data, in CSV format. For instance:
"1", "2", "3", "4"
"2", "-2", "-6", "8"
"12", "4", "6", "8"
Each row has to have an equal number of columns. Values have to be placed in quotes. Values can have a fractional part.
Answers List of objects containing correct answer and example answer status. Used only if the 'Interactive' property is set to true.
Series colors List containing colors for bars. Colors have to be defined in any notation understood by browsers; the number of colors must be equal to the number of columns in the data.
Decimal separator By default, the decimal separator in Graph is a dot character. When this field is filled with, e.g., a comma, all settings (i.e., the Y axis minimum and maximum values, interactive step) containing the dot character will have it replaced with a comma.

CSS classes

Class name Description
.graph_serie_size Defines the look of the series (rows from the 'Data' property). If you want to add a margin between each of the series, use the "left" CSS property with a fixed value in pixels.
.graph_value_size Defines the look of values, represented as vertical bars (rows' items from the 'Data' property). If you want to add a margin between each of the bars, use the "left" CSS property with a fixed value in pixels.
.graph_container_outer Defines the look of the outermost container of the graph.
.graph_container_inner Defines the look of the container that provides a margin between the outer container and the graph. The default margin is 10px. If you want to adjust it, use the "top", "left", "right", and "bottom" CSS properties.
.graph_grid Defines the look of the container that contains the grid. Use the "display" CSS property to disable the grid.
.graph_grid_block_above Defines the look of the grid lines that are located above the X axis. Use the "border-top" CSS property to change the look of the grid line.
.graph_grid_block_below Defines the look of the grid lines that are located below the X axis. Use the "border-bottom" CSS property to change the look of the grid line.
.graph_grid_description Defines the look of the Y axis values, located on the left side of the Y axis, near grid lines.
.graph_axis_description Defines the look of axes' descriptions.
.graph_axis_x_description Defines the look of X axis description.
.graph_axis_y_description Defines the look of Y axis description.
.graph_value_element Defines the look of bars.

Note about borders: if you want to set a border, use this CSS class to set only "border-left" and "border-right". As the top and bottom borders can affect the positioning of elements, bars that represent positive values should have set only the top border, and bars that represent negative values should have set only the bottom border. For such purpose, please use .graph_value_element_positive and .graph_value_element_negative classes, respectively.

Note about errors: if you want to style bars during error checking mode, use .graph_value_element_valid and .graph_value_element_invalid, respectively, for valid and invalid elements. Rules for borders also apply to this mode.
.graph_value_element_valid See the .graph_value_element.
.graph_value_element_invalid See the .graph_value_element.
.graph_value_element_positive Defines the look of bars that represent positive values. Please see note in the .graph_value_element.

Note about errors: if you want to style bars during error checking mode, use .graph_value_element_positive_valid and .graph_value_element_positive_invalid, respectively, for valid and invalid elements. Rules for borders also apply to this mode.
.graph_value_element_positive_valid See the .graph_value_element_positive.
.graph_value_element_positive_invalid See the .graph_value_element_positive.
.graph_value_element_negative Defines the look of bars that represent negative values. Please see note in the .graph_value_element.

Note about errors: if you want to style bars during error checking mode, use .graph_value_element_negative_valid and .graph_value_element_negative_invalid, respectively, for valid and invalid elements. Rules for borders also apply to this mode.
.graph_value_element_negative_valid See the .graph_value_element_negative.
.graph_value_element_negative_invalid See the .graph_value_element_negative.
.graph_column_description Defines the style of description placed below each bar (column) if they are enabled.
.graph_serie_description Defines the style of description placed below each series if they are enabled.

Supported commands

Command name Params Description
hide - Hides the module if it is visible.
show - Shows the module if it is hidden.
getValue index Returns the current value of the column with the given index. The index can be from 1 to a number of columns (regardless of the number of series).
isAllOK - Returns true if all columns are set correctly.

Examples

1.1. Make bigger spaces between series and smaller between bars:

.graph_xx {}

.graph_xx .graph_serie_size {
    left: 12px;
}

.graph_xx .graph_value_size {
    left: 2px;
}

1.2. Make bars' borders pink on invalid answers and yellow on valid answers:

.graph_xx {}

.graph_xx .graph_value_element_valid {
    border-left-color: yellow;
    border-right-color: yellow;
}

.graph_xx .graph_value_element_positive_valid {
    border-top-color: yellow;
}

.graph_xx .graph_value_element_negative_valid {
    border-bottom-color: yellow;
}

.graph_xx .graph_value_element_invalid {
    border-left-color: pink;
    border-right-color: pink;
}

.graph_xx .graph_value_element_positive_invalid {
    border-top-color: pink;
}

.graph_xx .graph_value_element_negative_invalid {
    border-bottom-color: pink;
}

Events (scripting)

When a bar's value is increased or decreased by the user, it sends an event with the following arguments:

Parameter Value
source ID of this instance of the module.
item Clicked bar ID in format: 
SERIE_ID COLUMN_ID
where:
  • SERIE_ID is a row index, counted from 0.
  • COLUMN_ID is a column index in a particular row, counted from 0.
If all columns are in the correct position, then the item value is 'all'.
value New value associated with the clicked column.

If you are using the Advanced Connector, please note that due to Regular Expression syntax, which has special meaning for "-" and "." characters, you need to escape them with a backslash. For example:
  • if you want to match the value of -10, you should write "\-10",
  • if you want to match value 20.5, you should write "20\.5".
In both examples, quotes are used only to distinguish value from description; do not copy them to the Advanced Connector's script.

If the 'Decimal separator' property was filled, the new value will contain the specified decimal separator.
If all columns are in the correct position, then the value is empty ('').
score 1 if column is correct, 0 if column is incorrect.
If all columns are in the correct position, then the score value is empty ('').

Demo presentation

Demo presentation contains examples of how to use the Graph module.