A basic component which has users select one of several possible options. Note that not all options are visible unless the user clicks on the component to select one. This is often used in Cloze tasks.

<div id="combo" class="CTATComboBox">
  <option>--------</option>
  <option>Insert Label 1 Text Here</option>
  <option>Insert Label 2 Text Here</option>
</div>

Alternately, options can be specified in an attribute:

<div id="comboA" class="CTATComboBox"
     data-ctat-labels="----,option 1,option 2"></div>

CTATComboBox Example

• id: Required. The name of the component, must be a valid html id name.
• class: Required. The class list, must include CTATComboBox and no other CTAT<component> classes.
• 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.
• data-ctat-size: The number of items to show in the pop-up window. The default is determined by the browser.
• data-ctat-labels: A string of labels to use as options, default separator is , Default is an empty string.
• data-ctat-split-on: The separator used for data-ctat-labels. Default is ,

To add options, add new child <option>my text</option> items or set the data-ctat-labels attribute. It is recommended that only plain text is used in the options. Both methods can be used together and if both are specified, the options in data-ctat-labels will be appended after any <option>text</option> entities.

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

.CTATComboBox { display: inline-block; }
.CTATComboBox>select { /* inherit from Component */
   width:inherit;
   height:inherit;
   color: inherit;
   font: inherit;
}

Only combo boxes defined using the data-ctat-labels attribute can be mass produced.

Examples for mass producing the combo box's options:

<div id="comboA" class="CTATComboBox"
     data-ctat-labels="%(comboA-ops)%"></div>

or

<div id="comboA" class="CTATComboBox"
     data-ctat-labels="%(combo-dashes)%,%(comboA-op1)%,%(comboA-op2)%"></div>