Visual Components for Question Skins

You can use five different visual components inside a Skin, as follows:

• Question Title – this component is a place-holder for the question title.
• Question Error – this component is a place-holder for the error message that is displayed if the respondent does not answer the question correctly (for example does not answer the question, checks too many boxes etc.).
• Question Text – this component is a place-holder for the question text.
• Question Instructions – this component is a place-holder for the question instructions.
• Question Form Inputs – this component is a place-holder for the answer alternatives for the question. For open questions, this refers to the actual text-box which the respondents use to provide feedback. For single and multi questions, this component defines the layout for the answer labels, the answer inputs (radio buttons or check boxes), and headers. For grid questions, the settings also include the look and feel of the scale, and the right-side labels if these are used).

These components are listed in the Visual Components toolbox, and can be dragged into the skin Page Editor and positioned as required.

• The skin background (in this case the green area in the figure) can be given an "overall" style. Click into the background area without selecting anything and choose a style for the area from the drop-down list in the toolbar.
• If you add text to the background area, you can also select parts of that text and specify a different style, again by using the selection box in the toolbar.

The various components have different sets of property elements, as appropriate for the specific component, and each property element can be allocated a specific style. In all cases, to specify the styles that are to be used for the elements in a component:

1. Right-click on the component and select Properties or double-click on the component to open the Properties pane as shown below - .
2. For each element, select from the drop-down list the style you wish to use.
3. Click Apply to apply the changes and keep the Properties pane open, or click Apply and Close to apply the settings and close the window.

Note: The Question Form Inputs component has a large number of properties for which you can specify styles. These are grouped into tabs as shown in the figure.

Figure 1 - Example of the Question Form Inputs component's properties

Note: When you open the Properties pane for a component, the elements available for that component are listed. Any styles that have already been specified for the various elements are displayed alongside the element. If a style has not been selected for an element then that element's style box will be blank; the element will then adopt the default setting. The styles listed in the drop-down list are those contained in the HTML Styles folder in the Survey Tree. All these HTML styles can be edited individually (go to About HTML Styles for more information).

Note: You can also use styles that are defined in external style sheets (go to Using an External Style Sheet for more information).

The Question Form Inputs are the Question Skin components in which the style settings are most complex. Some of the terms are defined below:

• Answer section - The entire area in which answers are displayed. One answer normally consists of one or more inputs and a corresponding label.
• Label - The text that describes the input. For a Grid or 3DGrid question, the label is the statement (not the scale). Drop-downs do not have labels for each answer.
• Input - The part of the question where a user can change something (an input-field, a checkbox, a radio-button or a drop-down).

Tag Types

To achieve better accessibility compliance, you can select the tag type for visual components in survey layouts. The options are div, span, H1, H2 , H3, H4 and H5. This allows more flexibility, and for example enables you to use H1 for survey titles (or other headers) and H2 for question texts if question titles aren't used (question titles already use H2).