Components
Created by Smart Sparrow

Number Line

The Number Line widget allows learners to drag and drop labels, select a number, or select a range of numbers on a defined number line.

 

Unique ways to use this widget

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

  • The number line widget has two distinct modes: Number or Interval. In number mode, students place a point on the line. In interval mode, students place two points on the line to create an interval between the two.
  • Have learners place lettered labels on the number line to indicate the correct answers.
  • Ask students to assign a label to the appropriate year, e.g. What year was Pong released?

 

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.
  5. Have a look at the CAPI table description at the bottom of the article for more information on what you can do.

 

Capi Table

Property Purpose Acceptable Inputs Readable Writable
Sim Options.Mode
Whether sim mode is number or interval
Number
Interval
Sim Options.Orientation
Screen orientation horizontal/vertical
Horizontal
Vertical
Sim Options.Custom Css
Custom Css
String
Intervals.Interval {index}.Start Value
Starting value of the interval
Number
Intervals.Interval {index}.End Value
Ending value of the interval
Number
Intervals.Interval {index}.Start Type
Whether interval start is open or closed type
Open
Closed
Intervals.Interval {index}.End Type
Whether interval end is open or closed type
Open
Closed
Intervals.Total
Total number of intervals placed on the number line
Number
Intervals.Show Inequality
Show the inequality label over the range
Boolean
Intervals.Number Format
Set the format of numbers
Decimal
Fraction
Intervals.Available.Point
Toggle the point tool
Boolean
Intervals.Available.Closed - Closed
Toggle the closed to closed interval tool
Boolean
Intervals.Available.Opened - Closed
Toggle the opened to closed interval tool
Boolean
Intervals.Available.Closed - Opened
Toggle the closed to opened interval tool
Boolean
Intervals.Available.Opened - Opened
Toggle the opened to opened interval tool
Boolean
Intervals.Available.Infinity - Closed
Toggle the infinity to closed interval tool
Boolean
Intervals.Available.Closed - Infinity'
Toggle the closed to infinity interval tool
Boolean
Intervals.Available.Infinity - Opened
Toggle the infinity to opened interval tool
Boolean
Intervals.Available.Opened - Infinity
Toggle the opened to infinity interval tool
Boolean
Intervals.Available.Infinity - Infinity
Toggle the infinity to infinity interval tool
Boolean
Line.Start value
Starting value of the number line
Number
Line.End value
Ending value of the number line
Number
Line.Tick seed
A number in between the start and end values that contains a tick
Number
Line.Tick size
Distance between ticks, starting from the tick seed.
Number
Line.Subticks
Number of subdivisions for a tick.
Number
Line.Snap To Ticks
Should the numbers/intervals snap to ticks and subticks
Boolean
Line.Label Precision
Decimal precision of the tick labels
String
Numbers.Number {index}.Label
The value rendered in the number box
MathExpression
Numbers.Number {index}.Value
The position of the number on the number line
Number
Numbers.Number {index}.Is Placed
Is the number placed on the number line
Boolean
Numbers.Total
How many numbers exist on the stage
Number
Points.Point {index}.Value
Value of the point on the number line
Number
Points.Total
Total number of points on the number line
Number
Property Purpose Acceptable Inputs Readable Writable
Sim Options.Mode
Whether sim mode is number or interval
Number
Interval
Sim Options.Orientation
Screen orientation horizontal/vertical
Horizontal
Vertical
Sim Options.Custom Css
Custom Css
String
Intervals.Interval {index}.Start Value
Starting value of the interval. For an unbounded value, use '-Infinity' or 'Infinity'
NumberString
Intervals.Interval {index}.End Value
Ending value of the interval. For an unbounded value, use 'Infinity' or '-Infinity'
NumberString
Intervals.Interval {index}.Start Type
Whether interval start is open or closed type
Open
Closed
Intervals.Interval {index}.End Type
Whether interval end is open or closed type
Open
Closed
Intervals.Total
Total number of intervals placed on the number line
Number
Intervals.Show Inequality
Show the inequality label over the range
Boolean
Intervals.Number Format
Set the format of numbers
Decimal
Fraction
Intervals.Available.Point
Toggle the point tool
Boolean
Intervals.Available.Closed - Closed
Toggle the closed to closed interval tool
Boolean
Intervals.Available.Opened - Closed
Toggle the opened to closed interval tool
Boolean
Intervals.Available.Closed - Opened
Toggle the closed to opened interval tool
Boolean
Intervals.Available.Opened - Opened
Toggle the opened to opened interval tool
Boolean
Intervals.Available.Infinity - Closed
Toggle the infinity to closed interval tool
Boolean
Intervals.Available.Closed - Infinity'
Toggle the closed to infinity interval tool
Boolean
Intervals.Available.Infinity - Opened
Toggle the infinity to opened interval tool
Boolean
Intervals.Available.Opened - Infinity
Toggle the opened to infinity interval tool
Boolean
Intervals.Available.Infinity - Infinity
Toggle the infinity to infinity interval tool
Boolean
Line.Start value
Starting value of the number line
Number
Line.End value
Ending value of the number line
Number
Line.Tick seed
A number in between the start and end values that contains a tick
Number
Line.Tick size
Distance between ticks, starting from the tick seed.
Number
Line.Subticks
Number of subdivisions for a tick.
Number
Line.Snap To Ticks
Should the numbers/intervals snap to ticks and subticks
Boolean
Line.Label Precision
Decimal precision of the tick labels
String
Numbers.Number {index}.Label
The value rendered in the number box
MathExpression
Numbers.Number {index}.Value
The position of the number on the number line
Number
Numbers.Number {index}.Is Placed
Is the number placed on the number line
Boolean
Numbers.Total
How many numbers exist on the stage
Number
Points.Point {index}.Value
Value of the point on the number line
Number
Points.Total
Total number of points on the number line
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