This is a special component and should always be included in a CTAT tutor. It is used by a student to indicate that they believe they are done with the current problem. The tutoring service will then check if the student has completed the problem, and if they have, it will perform end-of-problem steps, which might include things like moving on to the next problem.

<div id="done" class="CTATDoneButton"></div>

Note

Do not add anything to the content of the CTATDoneButton <div>. To change the label text used with this button, see CTAT Advanced Topics - Internationalization Support; this component gets its text from the "DONE" entry.

All of the examples include a CTATDoneButton, and one should always be included! For example, try the CTATRadioButton example.

• id: Required. The id done is required.
• class: Required. The class list, must include CTATDoneButton 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-show-hint-highlight: true or false. Default is true. Determines if hint highlighting is shown on the component.

In addition to the common Actions listed in Often Used TPAs, this component supports the following actions. In later releases, the Done button sends an SAI with a special input value "completeSequence" used by some learner management systems; the input does not appear on the button. If you need to model a done step and want to match any input from the component (because the selection and action are specific enough to distinguish the step), then you can use Any Match for example-tracing tutors and the special "don't_care" value for rule-based tutors.

.CTATDoneButton { /* default Done button font for that classic CTAT feel */
	font: 15px Helvetica Neue, Helvetica, Arial, sans-serif;
	width: 66px; height: 66px; /* default size */
}
.CTAT-done-button { /* for the <button> inside the CTATDoneButton */
	padding: 0;
	font: inherit;
	border-radius: 5px;
	background-color: #669900;
	border: 1px solid green;
 	cursor: pointer;
 	width: inherit;
 	height: inherit;
}
.CTAT-done-button:focus { outline: none; }
.CTAT-done-button--content { /* for the <div> inside the <button> */
	pointer-events: none;
	height: inherit;
	width: inherit;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.CTAT-done-button--icon { /* for the checkmark */
	font-size: 44px;
	pointer-events: none;
	height: 75%;
}
.CTAT-done-button--text { /* for the text (eg) Done */
	flex: none;
	pointer-events: none;
	margin-bottom: 5px;
}
.CTAT-done-button--hover { /* added when hovering over the button */
	background-color: #5C8A00;
}
.CTAT-done-button--clicked { /* added when clicking the button */
	background-color: #85AD33;
}