Components
Created by Smart Sparrow

Plotter

The Plotter component enables learners to plot points or draw a straight line on a 2-axis cartesian plane.

 

Unique ways to use this widget

There are multiple ways you can use this component to assess learner knowledge. For example:

  • Ask students to plot the answer to an equation.
  • Show students a graph with a line already plotted, and ask students to write the equation.
  • Ask students to analyse a plot of data to determine correlations and patterns in the data.
  • Ask students to plot their experimental results for analysis.

 

Basic setup instructions

  1. Copy the widget link by clicking on the Get Component button at the top of this page.
  2. In the Author Tool, add a Blank component from the Components tab and resize it to your liking.
  3. Paste the url that you’ve just copied into the Component’s source.
  4. With the component selected, click on Configure and select Options to set it up. This widget is set entirely via the options menu.
  5. The Plotter features wide functionality which allow you to:
    • Decide if students will plot points or straight lines.
    • Change the min and max values of the X and Y axes.
    • Set the snap distance (e.g. A snap distance of 1 will mean points snap to values incrementing in 1 such as: 1,2,3,4 etc.)
    • Decide whether to show additional information such as the slope, rise and run and X and Y intercepts - which update dynamically as the student manipulates the line.
  6. If you want students to see a graph with points or a line already drawn when they arrive to a screen, create them on the graph now, while in this editing mode.
  7. Have a look at the CAPI table desciption at the bottom of the article for more information on what you can do.

 

Configuring adaptivity

  • Writing trap states will differ between whether you are in Point or Line mode.
  • If you would like to evaluate whether a student has plotted the correct set of points you can use the CAPI property Points.All which is an array.

 

Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
Graph Axis.X.Minimum
Set x axis minimum value
Number
Graph Axis.X.Maximum
Set x axis maximum value
Number
Graph Axis.X.Snap Distance
Set x axis snap distance
Number
Graph Axis.Y.Minimum
Set y axis minimum value
Number
Graph Axis.Y.Maximum
Set y axis maximum value
Number
Graph Axis.Y.Snap Distance
Set y axis snap distance
Number
Graph Axis.Zoom.Enabled
Whether zoom is enabled
Boolean
Graph Axis.Zoom.Minimum bound
Zoom minimum value
Number
Graph Axis.Zoom.Maximum bound
Zoom maximum value
Number
Graph Axis.X.Label Position
The position of the label on the X axis
PositiveEnd
NegativeEnd
Graph Axis.Y.Label Position
The position of the label on the Y axis
PositiveEnd
NegativeEnd
Tool
Active tool
Point
Line
Show Tooltip
Whether the tooltips should be shown on the graph
Boolean
CSS
Css or the url of the CSS file to style the button
String
Editing enabled
Whether student change position of existing lines or points
Boolean
Creating points enabled
Whether student can create new points
Boolean
Deleting points enabled
Whether student can delete points
Boolean
Lines.Line {index}.x1
Line first point x position
Number
Lines.Line {index}.y1
Line first point y position
Number
Lines.Line {index}.x2
Line second point y position
Number
Lines.Line {index}.y2
Line second point y position
Number
Lines.Line {index}.Slope
Is a number or not defined if the line slope tends to Infinity
Number
Lines.Line {index}.X Axis Intersection
Is a number or parallel if the line is parallel to the X Axis
Number
Lines.Line {index}.Y Axis Intersection
Is a number or parallel if the line is parallel to the Y Axis
Number
Lines.Line {index}.Inequality
Specify inequality
None
Greater than
Lower than
Lines.Line {index}.Line Selection
Specify type of line selection
None
Inclusive
Exclusive
Lines.Line {index}.Points Visible
Whether points are visible on the line
Boolean
Lines.Count
Count number of lines
Number
Lines.Always show infobox
Whether infobox should be shown
Boolean
Lines.Show Rise and Run
Show the rise and run values of each line
Boolean
Lines.Show Slope
Show the slope values of each line
Boolean
Lines.Show Intercepts
Show the intercepts of the x and y axes
Boolean
Lines.Show Equation
Show the equation of each line
Boolean
Lines.Slope Format
The format of how the slope number is represented
Fraction
Decimal
Lines.Slope Precision
The precision that the slope should display at. If -1, it will use the snap distance to define the precision.
Number
Points.All
Array of drawn points
Point Array
Points.Count
Count number of points
Number
Points.Maximum X Value
The highest x value of any point
Number
Points.Minimum X Value
The lowest x value of any point
Number
Points.Maximum Y Value
The highest y value of any point
Number
Points.Minimum Y Value
The lowest y value of any point.
Number
Property Purpose Type
Graph Axis.X.Minimum
Set x axis minimum value
Number
Graph Axis.X.Maximum
Set x axis maximum value
Number
Graph Axis.X.Snap Distance
Set x axis snap distance
Number
Graph Axis.Y.Minimum
Set y axis minimum value
Number
Graph Axis.Y.Maximum
Set y axis maximum value
Number
Graph Axis.Y.Snap Distance
Set y axis snap distance
Number
Graph Axis.Zoom.Enabled
Whether zoom is enabled
Boolean
Graph Axis.Zoom.Minimum bound
Zoom minimum value
Number
Graph Axis.Zoom.Maximum bound
Zoom maximum value
Number
Graph Axis.X.Label Position
The position of the label on the X axis
PositiveEnd
NegativeEnd
Graph Axis.Y.Label Position
The position of the label on the Y axis
PositiveEnd
NegativeEnd
Tool
Active tool
Point
Line
Show Tooltip
Whether the tooltips should be shown on the graph
Boolean
CSS
Css or the url of the CSS file to style the button
String
Editing enabled
Whether student change position of existing lines or points
Boolean
Creating points enabled
Whether student can create new points
Boolean
Deleting points enabled
Whether student can delete points
Boolean
Lines.Line {index}.x1
Line first point x position
Number
Lines.Line {index}.y1
Line first point y position
Number
Lines.Line {index}.x2
Line second point y position
Number
Lines.Line {index}.y2
Line second point y position
Number
Lines.Line {index}.Slope
Line slop value
Number
Lines.Line {index}.X Axis Intersection
Line x axis intersection
Number
Lines.Line {index}.Y Axis Intersection
Line y axis intersection
Number
Lines.Line {index}.Inequality
Specify inequality
None
Greater than
Lower than
Lines.Line {index}.Line Selection
Specify type of line selection
None
Inclusive
Exclusive
Lines.Line {index}.Points Visible
Whether points are visible on the line
Boolean
Lines.Count
Count number of lines
Number
Lines.Always show infobox
Whether infobox should be shown
Boolean
Lines.Show Rise and Run
Show the rise and run values of each line
Boolean
Lines.Show Slope
Show the slope values of each line
Boolean
Lines.Show Intercepts
Show the intercepts of the x and y axes
Boolean
Lines.Show Equation
Show the equation of each line
Boolean
Lines.Slope Format
The format of how the slope number is represented
Fraction
Decimal
Lines.Slope Precision
The precision that the slope should display at. If -1, it will use the snap distance to define the precision.
Number
Points.All
Array of drawn points
Point Array
Points.Count
Count number of points
Number
Points.Maximum X Value
The highest x value of any point
Number
Points.Minimum X Value
The lowest x value of any point
Number
Points.Maximum Y Value
The highest y value of any point
Number
Points.Minimum Y Value
The lowest y value of any point.
Number

 

Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services

Similar Components