Documentation

Sim Overview

CAPI Table

User Story

Accessibility

Keyboard ✅

Screen reader ✅

Touch ✅

Functionality and Notes

2 modes: point (scatter) and line.
Within line there are three line types: best fit, smooth, line
Can be used as a static (but accessible) graph where the students can’t interact
Can be used as a tool to have students create their own graphs, or edit an existing graph

CAPI

CAPI Name	Type	Default	Description	Notes/Examples
CSS	string		this is where we can enter in custom CSS to style the component. It can either be an @import link or pure CSS. This is not to be confused with customCssClass.
EnableEditing	boolean	true	enable or disable editing the component
EnablePointMoving	boolean	true	enable/disable the ability to move points
EnablePointPlotting	boolean	true	enable/disable the ability to plot points
EnablePointRemoval	boolean	true	enable/disable the ability to remove/delete points
LockChart	boolean	false	When `true`, it prevents the user from moving around the plot or zooming in/out
Mode	enum (line, point)	line	Switched between line plot and point/scatter plot
TooltipEnabled	boolean	true	When `true`, tooltips for the points are enabled
line.equationVisible	boolean	true	When `true` and in `line mode`, shows the equation of the line (if line type is `best fit`)
line.interceptsVisible	boolean	true	When `true` and in `line mode`, shows the x and y intercepts of the line (if line type is `best fit`)
line.riseRunVisible	boolean	true	When `true` and in `line mode`, shows the rise and run of the line (if line type is `best fit`)
line.slopeVisible	boolean	true	When `true` and in `line mode`, shows the slope of the line (if line type is `best fit`)
type.selected	enum (line, smooth, best fit)	best fit	Chooses the line type
type.visible	boolean	true	Shows/hides the line
points.all	array	[]	Gives the array of all points. You can also use this as an initial state to have points already plotted
points.count	number		Number of points currently plotted
points.max	number		Max number of points that can be plotted
points.xMax	number		highest x value of plotted points
points.xMin	number		lowest x value of plotted points
points.yMax	number		highest y value of plotted points
points.yMin	number		lowest y value of plotted points
xAxis.bounds	string (#,#)	-50,50	Sets the bounds of the x axis
xAxis.label	string	X	sets the label of the x axis
xAxis.labelPosition	enum (positive, negative)	positive	Sets the position of the X axis to either the positive or negative end of the chart
xAxis.scale	enum (linear, log)	linear	sets the scale of the x axis to either linear or log
xAxis.snapDistance	number	1	The closest number on the X axis that the point snaps to.	So if the snap distance is 1, then it snaps to intervals of 1. If it is 0.5, snaps to intervals of 0.5
xAxis.units	string		Defaults to no units, but you can add in units however you’d like
yAxis.bounds	string (#,#)	-50,50	Sets the bounds of the y axis
yAxis.label	string	Y	sets the label of the y axis
yAxis.labelPosition	enum (positive, negative)	positive	Sets the position of the Y axis to either the positive or negative end of the chart
yAxis.scale	enum (linear, log)	linear	sets the scale of the y axis to either linear or log
yAxis.snapDistance	number	1	The closest number on the Y axis that the point snaps to.	So if the snap distance is 1, then it snaps to intervals of 1. If it is 0.5, snaps to intervals of 0.5
yAxis.units	string		Defaults to no units, but you can add in units however you’d like
zoom.enabled	boolean	true	Enables/disables the student’s ability to zoom in/out
zoom.max	number	10	The max value the student can zoom out to
zoom.min	number	0.1	The min value the student can zoom in to
zoom.visible	boolean	true	Shows/hides the zoom controls

Common Trap States

Initial States

You could choose to enable or disable the chart, or individual components in the chart on an initial state, for example you may want to disable the chart on subscreens after they’ve completed it.
- stage.graphingComponent.EnableEditing Boolean = false or true
- stage.graphingComponent.EnablePointMoving Boolean = false or true
- stage.graphingComponent.EnablePointPlotting Boolean = false or true
- stage.graphingComponent.EnablePointRemoval Boolean = false or true
You could choose to set points to be plotted. Or do the opposite and clear the graph.
- stage.graphingComponent.Points.All Array = ["(5;-8)","(13;10)","(-7;18)","(31;-27)","(-27;-22)","(37;22)","(-33;24)"]
- stage.graphingComponent.Points.All Array = []
You could change the mode of the sim, either to Line or Point (scatter), or to set the line type
- stage.graphingComponent.Mode Enum = point or line
- stage.graphingComponent.line.Type Enum = smooth or line or best fit
You could set the x and y bounds
- stage.graphingComponent.xAxis.bounds string = -10,10
- stage.graphingComponent.yAxis.bounds string = 0,10

Correct States

Checking to see if all of the correct points are plotted
- stage.graphingComponent.Points.All Array = ["(5;-8)","(13;10)","(-7;18)","(31;-27)","(-27;-22)","(37;22)","(-33;24)"]
Checking to see if some of the correct points are plotted
- stage.graphingComponent.Points.All Array Contains ["(5;-8)","(13;10)"]
Checking to see if they plotted points larger or smaller than a specific value
- stage.graphingComponent.xMax Number > 42
- stage.graphingComponent.yMin Number < 42