CTATNumericStepper

CTATNumericStepper

A number only text input.

Code

<div id="numericStepper" class="CTATNumericStepper"
     value="1" min="0" max="10" step="0.5"></div>

Running Example

CTATNumericStepper Example

Also see CTATNumberLine Example for examples of using it as a controller component.

Attributes and Settings

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATNumericStepper 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.
• value: the initial value of the component.
• max: the maximum value that can be entered. Note: max needs to be strictly greater than min.
• min: the minimum value that can be entered. Note: min needs to be strictly less than max.
• step: the amount to change the value with each click of the arrow buttons. Note: this needs to be a positive non-zero number.

Action-Input

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

Action	Input	Notes
Update	a number	The value of the component.
set_maximum	a number	The maximum value.
set_minimum	a number	The minimum value.
set_step	a number	The step value.

Styling

.CTATNumericStepper { display: inline-block; width: 60px; }
.CTATNumericStepper>input {
	width: inherit;
	height: inherit;
	font: inherit;
}

In Chrome, the up and down buttons are not visible unless the user mouses over the component. To make them always visible in Chrome for CTATNumericSteppers add the following CSS code:

.CTATNumericStepper input::-webkit-inner-spin-button,
.CTATNumericStepper input::-webkit-outer-spin-button {
   opacity: 1;
}

Mass Production

Example for mass producing the minimum, maximum, step size, and initial value for a CTATNumericStepper:

<div id="fb1_step" class="CTATNumericStepper" data-ctat-tutor="false"
  min="%(step-min)%" max="%(step-max)%"
  value="%(step-val)%" step="%(step-size)%">
</div>