Documentation
Plot
Description
Plot drawing/exercise module allows users to present plots and make plot/points based activities. Plot enables to draw functions f(x) and f(y).
Addon may work in 4 modes:
simple plot functions  set all expressions/selectable and expressions/correct to false
choose function  user has to select correct plot  define all clickable functions to true (expressions/selectable) and set appropriate answers (expressions/correct)
choose points  if user defines points, module shows clickable points on 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 addon can work as a base module for plot type addons and communicate with them through the interface.
Addon is able to work in a mixed mode eg. 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 
Expressions/Id  Plot id given by user (used for references in Variables section) 
Expressions/expression  expression, see "expressions" section for more details 
Expressions/xMin,xMax,yMin,yMax  Minimum and maximum values for expression. These can also be variables defined in the Variables section eg. xMin=a, xMax=a+2*b 
Expressions/selectable  boolean true/false defines if plot is clickable 
Expressions/correct  boolean true/false defines if plot is the correct answer 
Expressions/y to x  Draw f(y) functions. By default, f(x) are drawn 
Expressions/hidden  if this property is set on "true", it indicates that the given function will not be visible on entry 
Expressions/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 field remains empty then draw mark in the middle of the expression (equivalent of value 50). This value must be empty or a positive number between 0 and 100. Property used when "Individual marks" is selected in "Check marks" property. 
Asymptote DY  Set minimum ΔY for the heuristic asymptote detection algorithm. The default value is 5 and it should be adjusted accordingly in case when the asymptote is drawn incorrectly in the addon, e.g. when the Y value range is too large and the addon's height is relatively small. 
Variables  A section where you can define plot's variable values. 
Variables/plot id  Id of plot (expressions section) 
Variables/variable  Variable name 
Variables/value  Value of a variable 
Variables/expected  An expected value of a variable. Controlled by external module and api can become some kind of an activity. It is important to remember that all correct variables (with expected set) in plot give result = 1 (correct). Error otherwise. 
Points  List of points which are correct answers. Points are defined by x and y values and should refer to intersections of grid as only these points are clickable. 
Points/selected  A boolean true/false defines if a point should be selected on start 
Points/correct  A boolean true/false defines if a point is correct answer when selected (true) or shouldn't be selected (false) 
Points/not scored  A boolean true/false defines if a point is not included in result. Point which is not scoreable is also nonclickable 
xMin, xMax, yMin, yMax  Minimum and maximum values of x and y axis. 10 to 10 by default 
Grid  Shows/hides grid 
GridStepX, GridStepY  Step of x and y grid. 1 by default 
Arrowhead size  Size of arrowhead on axis. 6px by default 
Axis values  Shows/hides values for axis 
Axis x/y values  Shows/hides cyclic or custom values on axis. You can specify single values eg. 2,3,5, cyclic values eg.2* or mixed eg. 2*,5*,3,3.5,7.1. The cyclic value means that every nth occurrence will be shown 
X/Y axis description  Description for axis 
hide X/Y axis  Hides corresponding axis 
Point active area size  Defines size of active area for points 
Point radius  Radius of point 
Point outline radius  Radius of point's outline 
Max selected points  How many points user can choose 
Not activity  When checked, no score (done, errors) is returned by the addon. It is important to mention that events are still passed (except of all OK) with no score 
Free points  When checked, user is able to select points freely. Selected points are not included in results unless they are defined in the points section. The addon sends events on selected/deselected points with no score 
Broadcast  The property that enables to add a list of addons (e.g. Points To Plot) to the Plot addon. Plot will send events to the addons included in the list. All items in the list should be comma separated, e.g. addon1, addon2. 
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 has also impact on the "Axis values" properties. In such a case, it is necessary to replace a comma with a semicolon in "Axis x values" and "Axis y values" fields, i.e. 10,9,8,7,6,5,4, ... to 10;9;8;7;6;5;4;... 
X axis values position  A position of values on the x axis. 
Y axis values position  A position of values on the y axis. 
Check marks  Selection of functionality to draw marks for Check answers event. When "No" option is selected, the addon will not draw additional marks. When "One mark" option is selected, the addon will draw one mark. When "Individual marks" option is selected, the addon will draw one mark per correct/incorrect point/expression. 
Correct marks HTML  HTML of the tag displayed next to the point/chart/addon when the user correctly provided the answer. When field remains empty then draw checkmark (✔). 
Error marks HTML  HTML of the mark displayed next to the point/chart/addon when the user incorrectly provided the answer. When field remains empty then draw checkmark (✖). 
Supported commands
Command name  Params  Description 

zoomIn  void  Zooms plot in 
zoomOut  void  Zooms plot out 
moveLeft, moveRight, moveUp, moveDown  int pixels  moves plot by given value (in pixels). Eg. moveLeft(50) 
restoreView  void  Resets view to its initial state 
setVariable  string plot_id, string variable, string value  Sets value of variable for given plot 
setVisible  string plot_id, boolean visible  Sets visibility for given plot 
setPointVisibility  string point_x, string point_y, boolean visible  Sets visibility for given point. It behaves like normal click on point so it sends events, changes score (in interactive mode). It follows rule of max selected points 
setPlotStyle  string plot_id, string type_id, string property, string value  Sets css style for plot with plot_id. Type_id is type of element we'd like to change  it supports only plot for now. Property/value is css/svg property and value. Eg. setPlotStyle('p1', 'plot', 'stroke', '#ff0000')  sets color of plot p1 to red 
show  void  Shows addon 
hide  void  Hides addon 
isAllOK    Returns true if all connections are made correctly and there are no mistakes, otherwise false. 
Events
Plot Addon sends ValueChanged type events to Event Bus when user selects point, plot or sets variable.
Field name  Description 

Item  Information about item:

Value 

Score 

If you are using Advanced Connector, please note that due to Regular Expression syntax which has special meaning for "" and "." characters, you need to escape them with backshlash eg. point_5.2_4.5
When a user makes all connections properly without any error, the addon 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 whole addon 
.axis  Describes x and y axis 
.axisArrows  Describes properties for 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 style for plot's active area. Use strokewidth to define size of active area 
.draw_outline_base  Basic properties for plot's outline. Generally do not modify but if you want to make outline visible set strokeopacity, strokewidth, stroke 
.draw_outline  Defines properties of outline for selected plot 
.draw_outline_mark_error, .draw_X_outline_mark_error, .draw_outline_mark_correct, .draw_X_outline_mark_correct 
Properties of outline for wrong/correct plots in show errors mode. Classes with X (where X is number of plot) define properties for given X plot 
.draw, .draw_X  Describe style for plots in normal state. Classes with X (where X is number of plot) define properties for given X plot 
.draw_over, .draw_X_over  Describes style for plots in hover (mouseover) state. Classes with X (where X is number of plot) define properties for given X plot 
.draw_selected, .draw_X_selected  Describes style for selected (clicked) plot. Classes with X (where X is number of plot) define properties for given X plot 
.draw_mark_error, .draw_X_mark_error, .draw_mark_correct, .draw_X_mark_correct 
Properties for wrong/correct plots in show errors mode. Classes with X (where X is number of plot) define properties for given X plot 
.point_active_area  Describes style for point's active area. Use fill and fillopacity to define make active area visible. Use model's Point active area size to define size of active area 
.point_outline_base  Basic properties for points's outline. Generally do not modify but if you want to make outline visible set strokeopacity, strokewidth, stroke, fill and fillopacity 
.point_outline  Defines properties of outline for selected point 
.point_outline_mark_error, .point_outline_mark_correct 
Define properties of outline for wrong/correct points in show errors mode 
.point  Describes style for points 
.point_over  Describes style for points in hover (mouseover) state 
.point_selected  Describes style for selected points 
.point_error, .point_correct  Describe styles for wrong/correct points in show errors mode 
.mark  Describe styles for wrong/correct marks in check errors mode 
.mark.point_mark.mark_error, .mark.point_mark.mark_correct  Describe styles for wrong/correct marks for points in check errors mode 
.mark.expression_mark.mark_error, .mark.expression_mark.mark_correct  Describe styles for wrong/correct marks for expressions in check errors mode 
.mark.addon_mark.mark_error, .mark.addon_mark.mark_correct  Describe styles for wrong/correct mark for addon in check errors mode 
Additionally you are able to override style for each plot by setting .draw_X, .draw_X_over, .draw_X_selected, where X is number (1..X) of plot.
Expressions
The parser accepts a pretty basic grammar. Operators have the normal precidence — ^ (exponentiation), , /, and % (multiplication, division, and remainder), and finally +,  — and bind from left to right. Eg. x+2; x^2+2; x+sin(x); x5cos(2*x)
The parser has several builtin “functions” that are actually operators.
Function  Description 

sin(x)  Sine of x (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 base10) 
abs(x)  Absolute value (magnatude) 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 expression like 3*x+5, but if you want to change value of a and/or b dynamically (eg. by slider/button) you have to use Variables section. Give a plot id, eg. 'p1', write expression a*x+b. Plot addon is expecting values for a and b in Variables section.
Now go to Variables and create list of 2 items. Item 1  set plot id 'p1', name variable as 'a' and set value eg. 3. In Item 2  set plot id' p1', variable 'b', value 5.
Addon is able to parse plot 'p1' in form of a*x+b as 3*x+5
Demo presentation
Demo presentation contains examples of how to use the Plot addon and integrate it with other Addons, i.e. Slider, buttons.