A single selection item. Useful for limiting student to selecting a single answer for a multiple choice question. If multiple selection is desired, use CTATCheckBox.

<div id="radio_button_1" class="CTATRadioButton"
     name="radio_button_group">yes</div>
<div id="radio_button_2" class="CTATRadioButton"
     name="radio_button_group">no</div>

CTATRadioButton Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATRadioButton and no other CTAT<component> classes.
• name: Optional but highly recommended. All CTATRadioButtons 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 "yes" or "no"

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

In the above example, when a student selects "yes" the SAI reported would be:

Selection: radio_button_group
Action: UpdateRadioButton
Input: radio_button_1: yes

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.

.CTATRadioButton { /* 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 */
.CTATRadioButton--button {} /* Added to the generated <input> */
.CTATRadioButton--label {} /* Added to the generated <label> */

Example for mass producing the text labels for a CTATRadioButton:

<div id="radio_button_1" class="CTATRadioButton"
     name="radio_button_group">%(rb1-text)%</div>
<div id="radio_button_2" class="CTATRadioButton"
     name="radio_button_group">%(rb2-text)%</div>