This component is used in conjunction with other components. It does not get graded independently when clicked, instead it submits the targeted component for grading. It is meant to be used with components that might require multiple student actions in order to get it into the correct state, for example CTATFractionBar, CTATPieChart, CTATNumberLine, and CTATCheckBox. This is also useful when the author want the student to interact with multiple components before requesting grading. Each component listed in data-ctat-target should have data-ctat-tutor="false" so that it does not grade itself. Also note that the CTATSubmitButton will be graded according to its targets such that if all of the targets are correct, then it will be considered correct and it will be considered incorrect if any of the targets are incorrect.

<div id="submit" class="CTATSubmitButton" data-ctat-target="fraction_bar">Submit</div>

CTATSubmitButton Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATSubmitButton and no other CTAT<component> classes.
• data-ctat-target: Required. A list of ; separated ids. When the submit button is pressed, it will cause grading to occur on each of the listed components.
• data-ctat-enabled: true or false. Default is true. Controls if the component will accept student interaction.
• data-ctat-show-feedback: true or false. Default is true. Determines if grading feedback is shown on this component.
• data-ctat-show-hint-highlight: true or false. Default is true. Determines if hint highlighting is shown on this component.
• data-ctat-disable-on-correct: true or false. Default is true. Determines if the component becomes locked when it is graded as correct.

Only the common Actions listed in Often Used TPAs are supported.

.CTATSubmitButton { display: inline-block; } /* inline to act like <button/> */

With no extra styling, this will use the <button> tag to generate a button. It will have the following classes added to it so you can override these classes to modify the look of the buttons. See CTATButton for more information.

.CTAT-button { /* For the generated <button> */
	font:inherit;
	width:inherit;
	height:inherit;
}
.CTAT-button:hover {} /* when the mouse is hovering over the <button> */
.CTAT-button--clicked {} /* when the <button> is being clicked */
.CTAT-button:disabled {} /* when the <button> is disabled */

Example for mass producing the button label for a CTATSubmitButton:

<div id="submit" class="CTATSubmitButton" data-ctat-target="fraction_bar">%(submit-text)%</div>