Login Register

Documentation

Plot

Description

The Plot module allows users to present plots and make plot/points based activities. The Plot module enables drawing functions f(x) and f(y).

The module may work in 4 modes:

  • simple plot functions - set all expressions/selectable and expressions/correct to false,
  • choose function - the user has to select the correct plot(s) - define all clickable functions to true (expressions/selectable) and set appropriate answers (expressions/correct),
  • choose points - if the user defines points, the module displays clickable points at grid intersections. It is important to note that the answer should be a point on that intersection. It must be defined which points are correct,
  • the module can work as a base module for the plot type modules and communicate with them through the interface.

The module can work in a mixed mode, e.g., simple plot + choose plot + choose points.

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
Expressions List of expressions to draw.
Property name Description
ID Plot ID given by the user (used for references in the "Variables" section).
Expression Expression, see the 'Expressions' section for more details.
X min, Y max, Y min, Y max Minimum and maximum values for the expression. These can also be variables defined in the "Variables" section, e.g., Xmin = -a, Xmax = a + 2 * b.
Selectable Check this if the plot should be clickable.
Correct Check this if the plot is the correct answer.
Y to X Draws f(y) functions. By default, f(x) is drawn.
Hidden Check this if the given function should not be visible by default.
Color Set the color for the function, e.g., #0000FF.
mark at length Draw a correct/error mark for the Check Answers event at a location equal to the value defined in this property relative to the length of the visible expression. When the field remains empty, the mark is drawn in the middle of the expression (equivalent to value 50). This value must be empty or a positive number between 0 and 100. Property used when 'Individual marks' is selected in the "Check marks" property.
Variables A section where you can define the plot's variable values.
Property name Description
Plot ID ID of a plot (expressions section).
Variable The name of a variable.
Value Value of a variable.
Expected An expected value of a variable. Controlled by an external module and API, it can become a type of activity. It is important to remember that all correct variables (with expected set) in the plot give result = 1 (correct). Error otherwise.
Points A list of points which are correct answers. Points are defined by the X and Y values and should refer to intersections of the grid, as only these points are clickable.
Property name Description
Selected Check this if a point should be selected by default.
Correct Check this if selecting this point is the correct answer.
Not scored Check this if a point should not be included in the result.
X min, X max, Y min, Y max Minimum and maximum values of the X and Y axis (-10 to 10 by default).
Grid Shows/hides the grid.
Grid step X/Y Step of the X and Y grid (1 by default).
Arrowhead size Size of the arrowheads on the axis (6px by default).
Axis values Shows/hides values for the axis.
Axis X/Y values Shows/hides cyclic or custom values on the axis. You can specify single values e.g. 2,3,-5, cyclic values e.g. 2* or mixed e.g. 2*,5*,3,-3.5,7.1. The cyclic value means that every n-th occurrence will be shown.
X/Y axis description Description for the axis.
Hide X/Y axis Hides the corresponding axis.
Point active area size Defines the size of the active area for the points.
Point radius The radius of the points.
Point outline radius The radius of the point's outline.
Max selected points Defines how many points the user can choose.
Not activity With this option marked, the score and errors will not be returned by the module.
Free points When checked, the user can select points freely. Selected points are not included in the results unless they are defined in the points section. The module sends events on selected/deselected points with no score.
Asymptote DY Sets the minimum ΔY for the heuristic asymptote detection algorithm. The default value is 5 and it should be adjusted accordingly in case the asymptote is drawn incorrectly in the module, e.g., when the Y value range is too large, and the module's height is relatively small.
Broadcast The property that enables adding a list of modules (e.g., Points To Plot) to the Plot module. The Plot will send events to the module included in the list. All items in the list should be comma-separated, e.g., module1, module2.
Decimal separator By default, the decimal separator in Plot is a dot character. When this field is filled in with, e.g., a comma, all settings containing the dot character will have it replaced with a comma. Changing the default decimal separator also has an impact on the "Axis values" properties. In such a case, it is necessary to replace a comma with a semi-colon in "Axis X values" and "Axis Y values" properties, i.e. -10,-9,-8,-7,-6,-5,-4, ... to -10;-9;-8;-7;-6;-5;-4;...
X axis values position The position of values on the X axis.
Y axis values position The position of values on the Y axis.
Check marks Selection of functionality to draw marks for the Check answers event.
When the 'No' option is selected, the module will not draw additional marks.
When the "One mark" option is selected, the module will draw one mark.
When the "Individual marks" option is selected, the module will draw one mark per correct/incorrect point/expression.
Correct marks HTML HTML of the tag displayed next to the point/chart/module when the user correctly provided the answer. When the field remains empty, the module draws a checkmark (✔).
Error marks HTML HTML of the mark displayed next to the point/chart/module when the user incorrectly provided the answer. When the field remains empty, the module draws a checkmark (✖).

Supported commands

Command name Params Description
zoomIn --- Zooms in the plot.
zoomOut --- Zooms out the plot.
moveLeft, moveRight, moveUp, moveDown int pixels Moves the plot by a given value (in pixels), e.g., moveLeft(50).
restoreView --- Resets the view to its initial state.
setVariable string plot_id, string variable, string value Sets the value of a variable for a given plot.
setVisible string plot_id, boolean visible Sets the visibility for a given plot.
setPointVisibility string point_x, string point_y, boolean visible Sets the visibility for a given point. It behaves like a normal click on a point, sending events and changing the score (in interactive mode). It follows the rule of the "Max selected points".
setPlotStyle string plot_id, string type_id, string property, string value Sets a CSS style for a plot with the given plot_id. Type_id is the type of element we'd like to change - it currently supports only plot. Property/value refers to the CSS/SVG property and value. E.g., setPlotStyle('p1', 'plot', 'stroke', '#ff0000') - sets the color of the plot p1 to red.
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
isAllOK --- Returns true if the task is solved correctly and there are no mistakes, otherwise false.

Events

The Plot module sends the ValueChanged type of events to the Event Bus when the user selects a point, plot, or sets a variable.

Field name Description
Item Information about the item:
  • plot_PLOTID - refers to the plot with the ID PLOTID - e.g. plot_function1 - plot function1 has changed state
  • point_X_Y - refers to the point with coordinates X and Y - e.g., point_1_5 - point at coords x = 1 and y = 5 has changed state
  • variable_PLOTID_VARIABLE - refers to the variable VARIABLE of the plot PLOTID - variable_function1_a - variable a of the plot function1 has changed state
  • variables_PLOTID - refers to all variables of the PLOTID - e.g, variables_function1 - all expected variables are set so the state of the plot function1 has changed
Value
  • for plot - 1 when selected, 0 when deselected
  • for point - 1 when selected, 0 when deselected
  • for variable - value of variable
  • N/A for variables
Score
  • in case of plot - 1 when correct, 0 when incorrect, or N/A when not activity
  • in case of point - 1 when correct, 0 when incorrect, or N/A when not activity
  • in case of variable - 1 when correct, 0 when incorrect, or N/A when not activity
  • in case of variables - 1 when all expected values are correct, 0 when any is incorrect, or N/A when not activity

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 e.g. point_\-5\.2_4\.5

When the user makes all connections properly without any error, the module sends the 'ALL OK' event.

Field name Description
Item all
Value N/A
Score N/A

CSS classes

Please note that most of these properties refer to SVG CSS capabilities described at http://www.w3.org/TR/SVG/styling.html

Class name Description
.canvas Describes the div for the whole module.
.axis Describes the X and Y axis.
.axisArrows Describes properties for the axis arrowheads.
.axisText General descriptions of the axis (X, Y,0).
.axisXText, .axisYText Descriptions of the axis X, Y
.axisThicksTextX, .axisThicksTextY Descriptions of the axis values.
.grid Grid properties.
.draw_active_area Describes the style for the plot's active area. Use stroke-width to define the size of the active area.
.draw_outline_base Basic properties for the plot's outline. Generally, do not modify, but if you want to make the outline visible, set stroke-opacity, stroke-width, and stroke.
.draw_outline Defines properties of the outline for the selected plot.
.draw_outline_mark_error, .draw_X_outline_mark_error,
.draw_outline_mark_correct, .draw_X_outline_mark_correct		 Properties of the outline for the wrong/correct plots in the show errors mode. Classes with X (where X is the number of the plot) define properties for the given X plot.
.draw, .draw_X Describe the style for plots in the normal state. Classes with X (where X is the number of the plot) define properties for the given X plot.
.draw_over, .draw_X_over Describes the style for plots in the hover (mouseover) state. Classes with X (where X is the number of the plot) define properties for the given X plot.
.draw_selected, .draw_X_selected Describes the style for the selected (clicked) plot. Classes with X (where X is the number of the plot) define properties for the given X plot.
.draw_mark_error, .draw_X_mark_error,
.draw_mark_correct, .draw_X_mark_correct		 Properties for wrong/correct plots in the show errors mode. Classes with X (where X is the number of the plot) define properties for the given X plot.
.point_active_area Describes the style for the point's active area. Use the fill and fill-opacity to make the active area visible. Use model's Point active area size to define the size of the active area.
.point_outline_base Basic properties for the points' outline. Generally, do not modify, but if you want to make the outline visible, set stroke-opacity, stroke-width, stroke, fill, and fill-opacity.
.point_outline Defines properties of the outline for the selected point.
.point_outline_mark_error,
.point_outline_mark_correct		 Define properties of the outline for wrong/correct points in the show errors mode.
.point Describes the style for points.
.point_over Describes the style for points in the hover (mouseover) state.
.point_selected Describes the style for the selected points.
.point_error, .point_correct Describe the styles for wrong/correct points in the show errors mode.
.mark Describe styles for the wrong/correct marks in the check errors mode.
.mark.point_mark.mark_error, .mark.point_mark.mark_correct Describe the styles for the wrong/correct marks for the points in the check errors mode.
.mark.expression_mark.mark_error, .mark.expression_mark.mark_correct Describe the styles for the wrong/correct marks for the expressions in the check errors mode.
.mark.addon_mark.mark_error, .mark.addon_mark.mark_correct Describe the styles for the wrong/correct mark for the module in the check errors mode.

Additionally, you can override the style for each plot by setting .draw_X, .draw_X_over, .draw_X_selected, where X is the number (1..X) of the plot.

Expressions

The parser accepts a pretty basic grammar. Operators have the normal precedence — ^ (exponentiation), *, /, and % (multiplication, division, and remainder), and finally +, - — and bind from left to right. E.g. x+2; x^2+2; x+sin(x); x-5*cos(2*x)

The parser has several built-in “functions” that are actually operators.

Function Description
sin(x) Sine of XZ (x is in radians).
cos(x) Cosine of x (x is in radians).
tan(x) Tangent of x (x is in radians).
asin(x) Arc sine of x (in radians).
acos(x) Arc cosine of x (in radians).
atan(x) Arc tangent of x (in radians).
sqrt(x) Square root of x. Result is NaN (Not a Number) if x is negative.
log(x) Natural logarithm of x (not base-10).
abs(x) Absolute value (magnitude) of x.
ceil(x) Ceiling of x — the smallest integer that's >= x.
floor(x) Floor of x — the largest integer that's <= x.
round(x) X, rounded to the nearest integer, using gradeschool rounding.
exp(x) ex (exponential/antilogarithm function with base e).

Defining variables

Let's assume you have a plot a\*x\+b. Normally, you can write expressions like 3\*x\+5, but if you want to change the value of a and/or b dynamically (e.g., by the slider/button), you have to use the "Variables" property. Give a plot ID, e.g., 'p1', write expression a\*x\+b. The Plot module is expecting values for a and b in the "Variables" property.

Now go to the "Variables" property and create a list of 2 items. In Item 1 - set plot ID 'p1', name variable as 'a' and set value e.g. 3. In Item 2 - set plot ID 'p1', variable 'b', value 5.

The module is able to parse plot 'p1' in the form of a\*x\+b as 3\*x\+5.

Demo presentation

Demo presentation contains examples of how to use the Plot module and integrate it with other modules, e.g. Slider, buttons.