This was created to address math text styling issues with the existing CTATTextInput. The KaTex-style math formatting for input is done with Guppy API under the MIT License, a Javascript-based WYSIWYG editor for mathematics, and gets submitted when an enter is pressed while it has focus.

In order to initialize CTATMathInput instances, one has to include the relevant Guppy API dependencies that can be found on the CTAT src directory.

<div id="math_input" class="CTATMathInput"></div>

(live example will be up soon)

CTATTextInput Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATMathInput 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 cursor focus exits.
• 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.

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

.CTATMathInput { width: 100px; display: inline-block; background-color: white; border-style:solid;}

.katex {
    font: 400 1.21em KaTeX_Main,Times New Roman,serif;
    line-height: 1.2;
    white-space: nowrap;
    text-indent: 0;
    text-rendering: auto
}