CTATCheckBox

CTATCheckBox

A basic check box, used for a boolean component or grouped together for a multi-selection multiple choice exercise. It is advised to use this in conjunction with a CTATSubmitButton so that a student can select multiple items before getting grading feedback.

Code

<div id="cb1" name="checkBoxGroup" class="CTATCheckBox">CTAT Rocks!</div>

Running Example

CTATCheckBox Example

Attributes and Settings

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATCheckBox and no other CTAT<component> classes.
• name: Optional but highly recommended. All CTATCheckBoxes that share the same name attribute are graded together.
• 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.

To add a label, insert text inside the <div>. In the example above, the label would be "CTAT Rocks!"

Action-Input

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

Action	Input	Notes
UpdateCheckBox	a list of ; separated items sorted by id of the form "<checkbox-value>: [true|false]" where <checkbox-value> is the text displayed in the label for the check box and it is true if the box is checked.	The selection will be the value of name
SetSelected	[true|false]	check or uncheck the box
setText	a string.	Sets the label text for the check box.

Style

See a guide like A Complete Guide to Flexbox for how to use flex display for various layout options. For example, override flex-direction to column to have the button above the label.

.CTATCheckBox { /* Container for the button and label. */
	display: inline-flex; /* this should be either inline-flex or flex */
	align-items: center;
	flex-direction: row;
}
/* extra styling for the sub entities */
.CTATCheckBox--button {} /* Added to the generated <input> */
.CTATCheckBox--label {} /* Added to the generated <label> */

Mass Production

Example for mass producing the check box's label text:

<div id="cb1" name="checkBoxGroup" class="CTATCheckBox">%(check1-text)%</div>