- de
- en
This is an old revision of the document!
Table of Contents
Survey layout
The final appearance of your survey depends on the chosen survey layout. In the section layout you can adjust colour, font, font size, available width etc.. You can adjust the layout in the menu- item survey layouts.
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.
Please note: If you create and activate more than one layout design, the layout selected by default will be the one tagged as standard layout. If you want to use an other layout for a single survey, you can select this in the menu item assemble survey → option tab. Don’t forget to save!
Using layout templates
In the Menu item survey 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 in the section survey layouts above and you are able to change it as the case may be.
Simple customization
If you haven't created or activated a layout yet, SoSci survey will use a plain layout in blue and white with a width of 600 pixels. If you want to adapt colour or width of the standard layout, you have to copy the standard layout:
- Choose the menu item survey layouts
- Click on Create new layout to make a copy of the standard layout.
- Fill in the name (e.g. 'default') and a description (e.g. 'standard layout in pink') and make the desired changes afterwards. Don’t forget to save!
- With the next call of survey layouts the new layout will appear in the list above and you will be able to choose and edit it.
To edit the standard layout or an other layout you have to click on the considering layout in the schedule of active layouts (at the very top of survey layouts) (
.
- Modify the colour by entering the specific 6-digit colour code. You can identify this code by using the colour calculator (simply click on the colour) or read it out in the graphics software of your choice.
- Modify the width by adjusting the baseline 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 dissemination of fonts in www). Therefore several fonts are mentioned here separated by commas – and each time at last an abstract declaration like (
seriforsans-serif, see SelfHTML: font-family). - Save the layout pressing the OK button.
- You're going to see the appearance of the layout below after saving.
Advanced customization
Almost every single element of the survey can be adapted in the different tabs of layout. Beyond colours basic knowledge of CSS (SelfHTML: CSS-Properties) could be helpful.
To access the centrally predefined colours in the CSS- style definitions the variables %color.1% to %color.8% are available. The numeration simply results from the chronological order of the colours in the colour scheme tab. %color.2% for example stands for the warning colour defined in the colour scheme.
Entire customization
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:
- The DOCTYPE should be HTML4 and so the HTML version used by SoSci Survey for questions.
- At the beginning of the header
<head>you should place the placeholder%head%– SoSci survey will integrate for example the CSS code for the layout 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 placeholder%logo%,%progress%and%imprint%should be placed likewise in a suitable location.
The following placeholders are available for your layout:
| Placeholder | Function |
|---|---|
%questionnaire% | Placeholder for the actually content of your survey |
%imprint% | Placeholder for the imprint defined in the survey project |
%logo% | Placeholder for a logo, which can be adapted in the survey project |
%progress% | Placeholder for the progress bar |
%color.1% to %color.8% | Colours of the colour scheme |
%width%, %width-80% | The baseline width (pixel, px) adjusted for the layout. If there is entered a plus (+) or minus (-) behind the width, the placeholder represents the baseline width plus/less this value. |
%button.next% | Placeholder for the next button. If this placeholder isn't used, the button will be placed at %button.submit% automatically. |
%button.back% | Placeholder for the back button. If this placeholder isn't used, the button will be placed at %button.submit% automatically. |
%button.submit% | Placeholder for next and back buttons. If this placeholder isn't used, the buttons will be placed below the survey automatically. |
%button.break% | Button to interrupt the interview. This button has to be activated separately in the survey settings. If this placeholder isn't used, the button will be placed at %button.control%. |
%button.leave% | Button to cancel and delete the interview. This button has to be activated separately in the survey settings. If this placeholder isn't used, the button will be placed at %button.control%. |
%button.language% | Buttons to change the language settings. These buttons are only available in multilingual surveys and have to be activated separately in the survey settings. If this placeholder isn't used, the buttons will be placed at %button.control%. |
%button.screenreader% | Button to leave the accessible screen reader mode if it has been activated. If this placeholder isn't used, the button will be placed at %button.control%. |
%button.control% | Placeholder for the control buttons (see above), if this placeholder isn't used, the buttons will be placed below the survey. |
