CTATCheckBox - CMUCTAT/CTAT GitHub Wiki
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>-
id: Required. The name of the component, must be a valid html id name. -
class: Required. The class list, must includeCTATCheckBoxand no other CTAT<component> classes. -
name: Optional but highly recommended. All CTATCheckBoxes that share the same name attribute are graded together. -
data-ctat-enabled:trueorfalse. Default istrue. Controls if the component will accept student interaction. -
data-ctat-tutor:trueorfalse. Default istrue. Controls if direct actions on the component trigger grading. -
data-ctat-show-feedback:trueorfalse. Default istrueunlessdata-ctat-tutor="false". Determines if grading feedback is shown on the component. -
data-ctat-show-hint-highlight:trueorfalse. Default istrue. Determines if hint highlighting is shown on the component. -
data-ctat-disable-on-correct:trueorfalse. Default istrue. 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> */Example for mass producing the check box's label text:
<div id="cb1" name="checkBoxGroup" class="CTATCheckBox">%(check1-text)%</div>