| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| en:create:layout [16.01.2015 11:12] – admin | en:create:layout [04.04.2025 00:48] (current) – Updating English translation for parity with German version of this page jacob.wheeler |
|---|
| ====== Survey Layouts ====== | ====== Questionnaire Layout ====== |
| |
| The final appearance of your survey depends on the chosen //survey layout//. 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**. | 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. | 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. |
| * Modify the width by adjusting the //layout base width// of the layout. | * 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 [[http://www.w3schools.com/cssref/css_websafe_fonts.asp|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 [[http://www.w3schools.com/cssref/pr_font_font-family.asp|CSS font-family Property]]). | * 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 [[http://www.w3schools.com/cssref/css_websafe_fonts.asp|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 [[http://www.w3schools.com/cssref/pr_font_font-family.asp|CSS font-family Property]]). |
| | * For //Selected Push Button//, select a different design for the fields that are displayed for simple choice questions and multiple choices, if necessary (see also [[:en:create:layout-inputs]]). |
| * Save the layout by pressing the //OK// button. | * Save the layout by pressing the //OK// button. |
| * You're going to see the appearance of the layout below after saving. | * You're going to see the appearance of the layout below after saving. |
| 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 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. | * SoSci Survey uses HTML5 to display questions. |
| * At the beginning of the header ''<head>'' you should place the placeholder ''%head%'' -- SoSci Survey will integrate the CSS code for the layout and other necessary codes at this place. | * At the beginning of the header ''<head>'' you should place the placeholder ''%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 placeholder ''%logo%'', ''%progress%'' and ''%imprint%'' should be placed likewise in a suitable location. | * 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. |
| |''%color.1%'' to ''%color.8%''|Colors of the color scheme| | |''%color.1%'' to ''%color.8%''|Colors of the color 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.| | |''%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.| |
| | |''%header.image%''|File name of an image file, which can be specified as "header image" in the layout.| |
| |''%button.next%''|Placeholder for the ''next'' button. If this placeholder isn't used, the button will be placed at ''%button.submit%'' automatically.| | |''%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.back%''|Placeholder for the ''back'' button. If this placeholder isn't used, the button will be placed at ''%button.submit%'' automatically.| |
| |''%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.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.| | |''%button.control%''|Placeholder for the control buttons (see above), if this placeholder isn't used, the buttons will be placed below the survey.| |
| | |
| | **Tip:** While working on the HTML template layout, using the built in [[:en:general:browser-tools]] can be quite useful. |
