This uses a <textarea> as its base and is meant be used for larger text entry.

<div id="textarea" class="CTATTextArea"></div>

CTATTextArea Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATTextArea 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-tab-on-enter: true or false. Default is true`. Determines if pressing the enter key will act like hitting tab which will advance to the next entity in the tab order and initiate grading, if grading is enabled. Set this to 'false' if you would like to let students format text with newlines.
• 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.

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

.CTATTextArea { display: inline-block; }
.CTATTextArea>textarea {
	overflow: hidden;
	resize: none;
	width: inherit;
	height: inherit;
}