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:
|
| 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 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.