Illume’s Survey Styles Editor enables the Survey Designer to define styles that will be applied throughout the survey. Style can be set broadly, at the survey level, or more narrowly to items such as buttons or question prompts.
The appearance of the Style editor will vary depending on the rendering style of the survey (i.e. Classic vs Responsive). For surveys in Classic rendering style, there will be only one tree within the Style editor: “Survey”. For surveys in the Responsive rendering style, there will be 3 trees: Survey, Tablet, and Mobile.
Defining Survey Styles for Classic Rendering Style Surveys
- Choose Survey \ Style from the Survey Designer menu.
- In the left pane of the Survey Styles Editor, click on the name of the item to set. For example, in the image below, Question Prompt is highlighted, so the image properties being defined will apply to all question prompts throughout the survey.
- In the right pane, click the area to the right of each property you want to set, and choose from the list of available settings.
- Repeat this for each of the survey objects for which you would like to set properties.
- Click OK to save your settings.
After clicking OK, use the survey previewer to see how the survey looks with the new styles.
Defining Survey Styles for Responsive Rendering Style Surveys
Defining styles for Responsive surveys follows the same steps as above for Classic rendering style surveys, however rather than 1 Survey tree, the Style editor presents 3 trees: Survey, Tablet, and Mobile
For Responsive surveys, style must be applied to all 3 trees to ensure appropriate rendering across devices.
How Styles are Applied
Illume uses Cascading Style Sheets (CSS) to define the fonts, colors, borders, and other stylistic elements of your survey. The styles defined will apply to the selected object and to all of the items contained within the selected object, except where it explicitly defines those properties differently.
To understand what this means, look at the left pane of the Survey Styles Editor. It shows a hierarchy of survey objects. At the top of the hierarchy is the object called Survey. Choose the Survey object in the left pane and then define properties like font, color, etc., those properties will be applied to all objects within the survey, except where it explicitly defines them differently.
Similarly, if properties for Question are defined, those properties will apply to Questions and to all of the sub-items below it in the hierarchy: Question Numbers, Question Prompts, Scale Labels and Values, Question Error Messages, etc. To override these settings in any of the Question sub-items, select the sub item and define the properties you want.
Overriding Styles: An Example
Example: The user wants the survey to use Verdana font throughout, and to display black text everywhere except in the question prompts. The question prompts should use bold blue text in the same Verdana font. To do this, the user would follow these steps:
- Choose Survey in the left pane of the Survey Styles Editor, and set FontFace to Verdana, and FontColor to #000000 (black).
- Choose Question Prompt in the left pane, and set FontColor to #3333CC (blue) and FontStyle to Bold.
- Click OK.
Survey Styles vs. Custom HTML
When adding a question prompt, a response option, or some custom HTML to a survey, Illume provides an HTML editor to format the text as it is being composed. What happens if the Survey Style says the font color should be blue and the survey designer used the HTML editor to make some green text? The text will be green. Any formatting applied in the HTML editor overrides the formatting from the Survey Styles Editor.
Survey Objects
Styles can be set for the following objects. Note that not all styles apply to all objects. For example, there are no border properties for Radio Buttons and Checkboxes because these items do not have borders.
| Object | Definition |
| Survey | Properties applied to the Survey object will apply to all parts of the survey where those properties are not otherwise defined. |
| Header | The header appears at the top of each page of the survey. Define the header content in the Page Text tab of the Survey Preferences Editor. |
| Progress Bar | The progress bar (if enabled) appears on all pages of the survey to indicate how far a participant has progressed. |
| Collection | Properties applied to a collection are applied to all elements within all collections. |
| Text/HTML | Properties applied to Text/HTML objects will affect all Text/HTML objects, but note that any formatting applied within the HTML editor will override the style properties. |
| Collection Error Messages |
These are error messages that are not associated with a particular question. Examples include messages for invalid logins and attempts to submit a survey more than once. |
| Question | Properties applied to questions will affect all parts of all questions (prompts, response options, question numbers, etc.) except where overridden. |
| Question Number | The Question Number appears to the left of each question prompt in the survey. (Question numbers will not appear of question numbering is disabled in the Survey Preferences.) |
| Question Prompt | The Question Prompt is the text to which participants respond. |
| Scale Labels and Values |
Scale Labels are the response options from which a participant chooses when answering a question. Scale Values are the values associated with each label. Generally, only Labels are displayed to the participant. |
| Alternating Radio Scale Labels |
This sets the background color of even numbered scale items in radio type questions. |
| Alternating Checkbox Scale Labels |
This sets the background color of even numbered scale items in check all that apply questions. |
| Question Error Messages |
Question Error Messages are the messages participants see when they have failed to supply a valid response to a question.Note that most error messages for most users will appear as JavaScript alerts (the little pop-up dialog with the OK button). It is not possible to set styles for JavaScript alerts. This is a limitation of browser technology, not a limitation of the Illume product. Any errors that are not caught by the JavaScript validation will be caught by |
| Input Controls | Input controls include items like text boxes and popup menus. Font properties apply to the text within the controls. |
| Radio/Checkbox Controls |
The only property available for Radio and Checkbox controls is ControlSize. Set this to a numeric value to set the height and width of the controls.A value of “20” will set the height and width to 20 pixels. A value of “20pt” will set the height and width to 20 points. |
| Question Tables | Question Tables are groups of questions that share a common set of responses. The prompts for each question appear in the first column of the table, and the response options appear in the following columns. Any attributes set for Question Tables will apply to Row Headings, Column Headings, Alternating Row and Alternating Column, unless the survey designer specifically overrides the settings in any of those objects. |
| Sub-Question Number |
Properties defined here apply to the question number that precedes the prompt of each item in a Question Table. |
| Prompts | Properties defined here will apply to each individual prompt within a Question Table. |
| Column Headings | Column Headings in Question Tables appear at the top of each of the columns that contains a response option. The text of the response options is printed in the column headers. |
| Alternating Row | Alternating Row properties will be applied to the even numbered rows in a Question Table. |
| Alternating Column | Alternating Column properties will be applied to the even numbered columns in a Question Table. The properties will not apply to the question prompts. |
| Alternating Question |
The background against which survey questions appear alternates by default between white and yellow. |
| Button Box | The Button Box is the area around the buttons at the top and/or bottom of the page. It extends almost to the full width of the page, and is normally not visible. It can be made visible by setting a background color and border. |
| Buttons | The properties set here will apply to all of the buttons in the survey. |
| Footer | The footer appears at the bottom of each page of the survey.Footer content is defined in the Page Text tab of the Survey Preferences Editor. |
Valid Values for Style Properties
Most style properties present a list of valid values from which to choose. Those properties that do not display a list of valid values expect numeric values. Some properties, such as font size, allow survey designers to ignore all of the items on the list and type in a number of their choosing.
Numeric values use the following units:
| Unit | Abbreviation | Description |
| Pixels | px | One pixel represents 1/72 of an inch (1/29 cm.) on most computer monitors, though it may represent 1/90 of an inch (1/36 cm.) on some monitors. |
| Points | pt | One point represents 1/72 of an inch (1/29 cm.). |
| Picas | pc | One pica is 12 points (1/6 in. or about 2/5 cm.) |
| Inches | in | One inch is 72 points, or approximately 2.5 cm. |
| Centimeters | cm | One centimeter is approximately 29 points, or 0.4 inches. |
| Millimeters | mm | One millimeter is approximately 3 points or 0.04 inches. |
| Em | em | Em-units are calculated relative to each participant’s system-wide default font-sizes. |
| Ex | ex | An ex unit is the height of the letter x calculated from the participant’s system-wide default font size. This height will differ for each font. |
| Percent | % | Percent values represent widths relative to the nearest block-level container. E.g. setting the width of a button to 50%, the button will be half as wide as the table cell that contains it. |
Of these units, pixels, em-units and percents are generally best for the Web because computers can scale these units as necessary for the participant’s monitor.
If the survey designer sets the value of a property to a simple number, like 12, the Survey Styles Editor will assume points as the unit, and will set the value to 12.00pt. To set the value to 12 points, specify 12pt. To set the value to 12 percent, specify 12%.
Font Size and Section 508 Compliance
While font sizes can be set to a numeric value such as 12pt or 16px, Illume uses em values by default to comply with Section 508 of the US Rehabilitation Act. If the survey needs to comply with Section 508, em values should be used to define font sizes because em values set font sizes relative to each participant’s system default font sizes. Participants who have difficulty reading text on a computer monitor will generally use a large font size as the default. Em values respect these settings. For example, an em value of 1.00 displays text at exactly the system default point size. An em value of 1.50 displays fonts at 1.5 times the system default font size.