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 includeCTATCheckBox
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
orfalse
. Default istrue
. Controls if the component will accept student interaction. -
data-ctat-tutor
:true
orfalse
. Default istrue
. Controls if direct actions on the component trigger grading. -
data-ctat-show-feedback
:true
orfalse
. Default istrue
unlessdata-ctat-tutor="false"
. Determines if grading feedback is shown on the component. -
data-ctat-show-hint-highlight
:true
orfalse
. Default istrue
. Determines if hint highlighting is shown on the component. -
data-ctat-disable-on-correct
:true
orfalse
. 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>