CTATNumericStepper - CMUCTAT/CTAT GitHub Wiki
A number only text input.
<div id="numericStepper" class="CTATNumericStepper"
value="1" min="0" max="10" step="0.5"></div>
Also see CTATNumberLine Example for examples of using it as a controller component.
-
id
: Required. The name of the component, must be a valid html id name. -
class
: Required. The class list, must includeCTATNumericStepper
and no other CTAT<component> classes. -
data-ctat-enabled
:true
orfalse
. Default istrue
. Controls if the component will accept student interaction. -
data-ctat-tutor
:true
orfalse
. Default istrue
. Controls if direct actions on the component trigger grading. -
data-ctat-show-feedback
:true
orfalse
. Default istrue
unlessdata-ctat-tutor="false"
. Determines if grading feedback is shown on the component. -
data-ctat-show-hint-highlight
:true
orfalse
. Default istrue
. Determines if hint highlighting is shown on the component. -
data-ctat-disable-on-correct
:true
orfalse
. Default istrue
. 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.
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. |
.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;
}
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>