Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
en:create:layout [11.08.2014 11:10] – 825415.uni-wuppertal | en:create:layout [16.01.2015 11:12] – admin |
---|
====== Survey layout ====== | ====== Survey Layouts ====== |
| |
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**. | 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**. |
| |
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. |
| |
**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! | * 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 ''[[:en:create:functions:option|option('layout', ...)]]'' for this purpose. There is a layout template "SoSci Stimulus Presenter" to present a stimulus without all the surrounding questionnaire stuff. |
| |
===== 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. | ===== Using Layout Templates ===== |
| |
===== Simple customization ===== | 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 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: | ===== Simple Customization ===== |
| |
* Choose the menu item **survey layouts** | 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: |
* 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**) ({{:button.edit.gif?nolink|edit layout}}. | * Choose the menu item **Questionnaire Layout** |
| * Click on **Create new layout** to make a copy of the standard layout. |
| * Fill in the //ID// (e.g. "pink") and a //comment// (e.g. "standard layout in pink") and make the desired changes afterwards. 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. |
| |
* 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. | To edit the default layout or an other layout you have to click on the edit button ({{:button.edit.gif?nolink|edit layout}}) in the list of active layouts (at the very top of **Questionnaire Layout**). |
| |
* Modify the width by adjusting the //baseline width// of the 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. |
* 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.webmasterpro.de/design/news/2009/02/02/verbreitung-von-schriftarten-im-web.html|dissemination of fonts in www]]). Therefore several fonts are mentioned here separated by commas -- and each time at last an abstract declaration like (''serif'' or ''sans-serif'', see [[http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family|SelfHTML: font-family]]). | * Modify the width by adjusting the //layout base width// of the layout. |
* Save the layout pressing the //OK// button. | * 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]]). |
| * 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. |
| |
===== Advanced customization ===== | ===== Advanced Customization ===== |
| |
Almost every single element of the survey can be adapted in the different tabs of layout. Beyond colours basic knowledge of CSS ([[http://de.selfhtml.org/css/eigenschaften/index.htm|SelfHTML: CSS-Properties]]) could be helpful. | Almost every single element of the survey can be adapted in the different tabs. Beyond colors basic knowledge of CSS ([[http://www.w3schools.com/cssref/default.asp|CSS Reference]]) 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. | 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. |
| |
===== Entire customization ===== | ===== Full 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 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. | * 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. | * 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. |
| |
The following placeholders are available for your layout: | The following placeholders are available for your layout: |
|''%logo%''|Placeholder for a logo, which can be adapted in the survey project| | |''%logo%''|Placeholder for a logo, which can be adapted in the survey project| |
|''%progress%''|Placeholder for the progress bar| | |''%progress%''|Placeholder for the progress bar| |
|''%color.1%'' to ''%color.8%''|Colours of the colour 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.| |
|''%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.| |