CTATTextInput

CTATTextInput

This uses a <input type="text"> to add text input fields to a tutor. This is meant for short text inputs and will get submitted when an enter is pressed while it has focus.

Code

<div id="text_input" class="CTATTextInput"></div>

Running Example

CTATTextInput 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 CTATTextInput 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-track-selection: (experimental, in versions after 2023-09-01) true or false. Default is false. If true, the component will generate selectText actions when the user selects part of the text.
• autofocus: component will start focused (only one should have this set)
• maxLength: a number specifying the max number of characters that can be entered.
• value: the value of the input.

Action-Input

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

Action	Input	Notes
UpdateTextField	a string	Modifies the value.

Styling

.CTATTextInput { width: 100px; display: inline-block; }
.CTATTextInput>input[type="text"] {
	width: inherit;
	height: inherit;
	font-size: inherit;
	background-color: inherit;
}