Questionnaire Layout

The final appearance of your survey depends on the chosen layout (graphic design). In the section layout you can adjust color, font, font size, available width etc.. You can adjust the layout in the menu item Questionnaire Layout.

SoSci Survey contents a set of layout templates at choice. You can also create your own layout (e.g. in line with the company CI or the university homepage) – indeed you will need some basic knowledge in web design (HTML,CSS) for this.

• If you have created or activated multiple layouts, one will be selected as default. This will be used in questionnaires unless you select another one in the questionnaire's settings. To change the default, select the button left of the layout and click Set selected layout as default.
• If using multiple layouts in the survey, select Compose Questionnaire, tab Settings to select a specific layout for this questionnaire. Mind the OK button.
• You may need a different layout for a single page in the questionnaire – to present a stimulus, for example. Use the PHP function option('layout', ...) for this purpose. There is a layout template “SoSci Stimulus Presenter” to present a stimulus without all the surrounding questionnaire stuff.

In the Menu item Questionnaire Layout you can find some Layout Templates. You have to click Activate at the desired layout to use it. Afterwards the layout will be listed above and you are able to change it as the case may be.

If you haven't created or activated a layout yet, SoSci Survey will use a plain, decent layout in blue and white with a width of 600 pixels. If you want to adapt color or width of the standard layout, you have to copy the standard layout:

• Choose the menu item Questionnaire Layout
• Create a copy of the default layout
  • Click Create new layout and enter an ID (e.g., “default”) and a description (e.g., “default layout in pink”) or
  • activate the layout template “SoSci Survey Default” and then click the layout to edit it.
• Then make the desired changes. Remember to save!
• With the next call of Questionnaire Layout the new layout will appear in the list above and you will be able to choose and edit it.

To edit the default layout or an other layout you have to click on the edit button () in the list of active layouts (at the very top of Questionnaire Layout).

• Modify the color by entering the specific 6-digit color code. You can identify this code by using the Color Calculator (simply click on the color) or read it out in the graphics software of your choice.
• Modify the width by adjusting the layout base width of the layout.
• If you like to change the font, please notice that only a few fonts are performing in almost all browsers (e.g. Arial, Verdana, Times New Roman und Courier New, see Web Safe Font Combinations). Therefore several fonts are mentioned here separated by commas – and each time at last a generic declaration like (serif or sans-serif, see CSS font-family Property).
• For Input button style, select a different design for the fields that are displayed for simple choice questions and multiple choices, if necessary (see also Custom Input Buttons).
• Save the layout by pressing the OK button.
• You're going to see the appearance of the layout below after saving.

Besides the colors, the questionnaire width, and the font (all adjustable in the first tab of the layout), there are a number of popular setting options in the layout:

Almost every single element of the questionnaire can be adapted individually in the different tabs of the layout. Beyond colors basic knowledge of CSS (CSS Reference) could be helpful.

To access the centrally predefined colors in the CSS- style definitions the variables %color.1% to %color.8% are available. The numeration simply results from the chronological order of the colors in the color scheme tab. %color.2% for example stands for the warning color defined in the color scheme.

The underlying HTML code for the layout can be adjusted or totally regenerated in the HTML template tab. In this respect, the following factors should be taken into consideration:

• SoSci Survey uses HTML5 to display questions.
• At the beginning of the header <head> you should place the placeholder %head% or HTML-compliant <link type="placeholder" href="head"> – SoSci Survey will integrate the CSS code for the layout and other necessary codes at this place.
• In the content of the survey <body> the placeholder %questionnaire% has to appear (the content of the respective survey page will be integrated at this place), the placeholders %logo%, %progress%, and %imprint% should likewise be placed in a suitable location.
• The position of buttons (e.g., next button or language selection) can be specified in the layout by special placeholders, e.g., also at the top of the page. If the placeholders are not used, SoSci Survey places the buttons below the questions in the %questionnaire% area.

The following placeholders are available for your layout:

Tip: While working on the HTML template layout, using the built in Developer Tools in the Browser can be quite useful.

In the HTML Template immediately before the </style> add the following CSS code to mark mandatory questions (“must be answered”) with an asterisk.

/* Mandatory question marker */
span.s2mandatory::after {
  content: " *";
  color: var(--s2color4);
}