Sandy Demi edited this page Apr 10, 2017 · 20 revisions


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.


<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!"


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.


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>
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.