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-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.
• data-ctat-rotation: The number of degrees to rotate the number line. Default is "0".

Setting step size: