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 non-clickable
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 n-th 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 semi-colon 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:
  • plot_PLOTID - refers to plot with PLOTID - eg. plot_function1 - plot function1 has changed state
  • point_X_Y - refers to point with coordinates X and Y - eg. point_1_5 - point at coords x = 1 and y = 5 has changed state
  • variable_PLOTID_VARIABLE - refers to variable VARIABLE of plot PLOTID - variable_function1_a - variable a of plot function1 has changed state
  • variables_PLOTID - refers to all variables of PLOTID - eg. variables_function1 - all expected variables are set so state of 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 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 stroke-width 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 stroke-opacity, stroke-width, 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 fill-opacity 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 stroke-opacity, stroke-width, stroke, fill and fill-opacity
.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); x-5cos(2*x)

The parser has several built-in “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 base-10)
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 (e.g.. by slider/button) you have to use Variables section. Give a plot id, e.g.. '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 e.g. 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 module and integrate it with other modules, e.g. Slider, buttons.