Using the Layout Element to Change the Appearance of Multiple-Choice Questions

The default appearance of a multiple-choice question (i.e. a question with a codetable data type) is to display the options in a dropdown box. By using the layout element as a child of the question, it is possible to display the question in several formats.

If the layout element contains the num-cols element, the options will be displayed in the specified number of columns:

Figure 1. Layout with Number of Columns

<layout>
                <num-cols>4</num-cols>
        </layout>

If the layout element contains the num-rows element, the options will be displayed in a scrollable list box with the specified number of rows visible at one time:

Figure 2. Layout with Number of Rows

<layout>
  <num-rows>6</num-rows>
</layout>

Note that when num-rows and num-cols are both used, num-cols takes precedence.

If the layout element contains the autosize element, and that contains a text value of 'true', the options will be arranged in the number of columns specified by the multiselect.layout.optimum.columns configuration property.

If the layout element contains the input-alignment element, and that contains a text value of 'left' the checkboxes or radio buttons will be displayed to the left of the text for each option. Conversely, if the text value is 'right', the checkboxes or radio buttons will be displayed to the right of the text for each option:

Figure 3. Layout with Input Alignment Set to Right

<layout>
  <input-alignment>right</input-alignment>
    <num-rows>6</num-rows>
  </layout>