CTATNumberLine

CTATNumberLine

This component shows a user manipulable number line and supports various types of manipulation depending on how it is configured. A very basic CTATNumberLine allows a user to add a point to the number line.

Code

User can add a single point to the number line between 0 and 10:

<div id="number_line" class="CTATNumberLine"
     data-ctat-minimum="0" data-ctat-maximum="10"></div>

Running Example

TBD

Attributes and Settings

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATNumberLine
• data-ctat-tutor: true or false. Default is true. Controls if direct actions on the component trigger grading.
• data-ctat-show-feedback: true or false. Default is true. Determines if grading feedback is shown on the component. This attribute is ignored if data-ctat-tutor="false".
• data-ctat-show-hint-highlight: true or false. Default is true. Determines if hint highlighting is shown on the component.
• data-ctat-disable-on-correct: true or false. Default is true. Determines if the component becomes locked when it is graded as correct.
• data-ctat-maximum: The maximum value available on the number line. Default is "3".
• data-ctat-minimum: The minimum value available on the number line. Default is "0".
• data-ctat-large-tick-step: The size of the space between each large tick mark. Default is "1". A value of "0" will disable them.
• data-ctat-small-tick-step: The size of the space between each small tick mark. Default is "1/2". A value of "0" will disable them.
• data-ctat-denominator: 1/value will determine the size of the space between each denominator tick mark. Default is "0". A value of "0" will disable them.
• data-ctat-max-points: The maximum number of points that the user can enter. Currently locked at "1".
• data-ctat-point-size: The radius of the dots representing points on the number line in pixels. Default is "7".
• data-ctat-snap: If this is "true", then the user can only add points where there are tick marks and the user's point cursor will snap to the closest tick mark to the cursor when the cursor is over the CTATNumberLine. If it is "false" the user's point cursor will be on the number line at the closest point to the cursor. Default is "false".
• data-ctat-rotation: The number of degrees to rotate the number line. Default is "0".
• data-ctat-ctrl-max: A list of ; deliminated ids of CTAT controller components that the user interacts with to change the maximum value of the number line. Default is "".
• data-ctat-ctrl-min: A list of ; deliminated ids of CTAT controller components that the user interacts with to change the minimum value of the number line. Default is "".
• data-ctat-ctrl-large-tick: A list of ; deliminated ids of CTAT controller components that the user interacts with to change the large tick mark step value. Default is "".
• data-ctat-ctrl-small-tick: A list of ; deliminated ids of CTAT controller components that the user interacts with to change the small tick mark step value. Default is "".
• data-ctat-ctrl-denominator: A list of ; deliminated ids of CTAT controller components that the user interacts with to change the denominator tick mark step value. Default is "".

Valid CTAT controller components include CTATControllerButton, CTATTextInput, and CTATNumericStepper.

Action-Input

• AddPoint
• Points
• set_minimum
• set_maximum
• set_max_user_entries
• set_large_step
• set_small_step
• set_denominator
• set_precision
• set_max_user_entries

Styling

Here is a list of the default styles included in CTAT.css that govern various aspects of the look of the number line.

.CTAT-number-line {
	padding: 10px;
	border: 1px solid #CCCCCC;
}
.CTAT-number-line--cursor {
	fill: black;
	fill-opacity: 0.5;
	stroke-width: 0px;
	stroke: black;
	stroke-opacity: 0.5;
}
.CTAT-number-line--point {
	fill: black;
	stroke-width: 0px;
}
.CTAT-number-line--axis {
	stroke: black;
	stroke-linecap: round;
	stroke-width: 2px;
	fill-opacity: 0;
}
.CTAT-number-line--tickmark {
	stroke: black;
	stroke-width: 2px;
}
.CTAT-number-line--tickmark-label {
	stroke: none;
	fill: black;
}
.CTAT-number-line--large-tickmark {
	stroke-width: 4px;
}
.CTAT-number-line--large-tickmark-label {
}
.CTAT-number-line--small-tickmark {
}
.CTAT-number-line--small-tickmark-label {
	stroke: none;
	fill: black;
}
.CTAT-number-line--denominator-tickmark {
	stroke: purple;
}
.CTAT-number-line--denominator-tickmark-label {
	display: none;
}