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

CTATNumberLine Example

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. Default is "1". A value of "0" will disable entry of points.
• 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 clockwise around the midpoint. 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 CTATButton, CTATImageButton, CTATTextInput, and CTATNumericStepper. CTATSubmitButton can also be used as a controller component to do grading on demand for the associated part of the number line; for example, it can be configured to submit just the denominator for grading.

Action-Input

Action	Input	Notes
AddPoint	a number or fraction
Points	a list of numbers or fractions	separated by ;'s
set_minimum	a number or fraction	Change the minimum to the given value.
set_maximum	a number or fraction	Change the maximum to the given value.
set_max_user_entries	an integer	Change the value of data-ctat-max-points to the given value. Useful for manipulating the enable state of number line while no locking the controller components.
set_large_step	a number or fraction	Change the value of data-ctat-large-tick-step
set_small_step	a number or fraction	Change the value of data-ctat-small-tick-step
set_denominator	a number	Change the value of data-ctat-denominator
set_precision	an integer	Set the number of decimal places to print numbers (see Number.prototype.toPrecision() for more information on appropriate values).

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;
}