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 and no other CTAT<component> classes.
• data-ctat-enabled: true or false. Default is true. Controls if the component will accept student interaction.
• 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 unless data-ctat-tutor="false". Determines if grading feedback is shown on the component.
• 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 additionally, the Input in the SAI will be the label of the tick mark, for example if the label on the selected tick mark is "1/2" then the input will be "1/2", not "0.5". If it is "false" the user's point cursor will be on the number line at the closest point to the cursor and the Input will be a decimal value. Default is "false".
• data-ctat-rotation: The number of degrees to rotate the number line clockwise around the midpoint. Default is "0".
• data-ctat-label-points: "true" or "false". If true, labels will appear beneath user-added points showing the values of those points. Default is "false".
• data-ctat-label-cursor: "true" or "false". If true, a label will appear beneath the cursor showing its current value. Default is "false".
• data-ctat-segment-size: A number defining the size of the line segments the number line can be divided into by the user. If this value is nonzero, whenever a point evaluated as correct is added to the number line, if the distance between that point and another correct point, or between that point and zero, is a multiple of the segment size, a line segment will be created between those two points. Line segments equal to the segment size will be colored green; longer ones will be colored gray. Gray segments can be divided into green segments by adding points inside them. A value of "0" will disable this feature. Default is "0".
• data-ctat-denominator-visible: "true" or "false". If false, ticks defined by the data-ctat-denominator attribute will be hidden. Default is "true".
• 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

In addition to the common Actions listed in Often Used TPAs this component supports the following actions:

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).
set_label_points	"true"/"false"	Change the value of data-ctat-label-points
set_label_cursor	"true"/"false"	Change the value of data-ctat-label-cursor
set_segment_size	a number	Change the value of data-ctat-segment-size
set_denominator_visible	"true"/"false"	Change the value of data-ctat-denominator-visible

Styling

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

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

Mass Production

Example for mass producing the minimum, maximum, and tick marks for a CTATNumberLine:

<div id="number_line" class="CTATNumberLine"
  data-ctat-minimum="%(nl-min)%"
  data-ctat-maximum="%(nl-max)%" 
  data-ctat-large-tick-step="%(nl-large-tick)%"
  data-ctat-small-tick-step="%(nl-small-tick)%">
</div>