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.

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

CTATTextInput Example

• 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-submit-on-blur: true or false. Default is true. CTATv4.5 and later If false the component will not submit the content for grading when the user presses the Tab key or clicks on another CTAT component.
• data-ctat-submit-on-enter: true or false. Default is true. CTATv4.5 and later If false the component will not submit the content for grading when the user presses the Enter key.
• 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.

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

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