Customizing Survey Display Styles

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

  1. Choose Survey \ Style  from the Survey Designer menu.
  2. 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.
    6.5-DatStat Illume Survey Manager-Using the Survey Designer-Setting Survey Preferences and Styles-Customizing Survey Display Styles-Defining Survey Styles for Classic Rendering Style Surveys 1
  3. 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.
  4. Repeat this for each of the survey objects for which you would like to set properties.
  5. 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

6.5-DatStat Illume Survey Manager-Using the Survey Designer-Setting Survey Preferences and Styles-Customizing Survey Display Styles-Defining Survey Styles for Responsive Rendering Style Surveys 1

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:

  1. Choose Survey in the left pane of the Survey Styles Editor, and set FontFace to Verdana, and FontColor to #000000 (black).
  2. Choose Question Prompt in the left pane, and set FontColor to #3333CC (blue) and FontStyle to Bold.
  3. Click OK.
    6.5-DatStat Illume Survey Manager-Using the Survey Designer-Setting Survey Preferences and Styles-Customizing Survey Display Styles-Overriding Styles An Example 1

 

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
the Illume server, and the server will display an error message in the current
page of the survey. When you define styles for Question Error Messages, the
styles are applied to these messages.

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.