[[Questionnaire Layout]]
You are here: start » Overview » Creating and Designing the Questionnaire » Questionnaire Layout
 
Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Next revisionBoth sides next revision
en:create:layout [11.08.2014 11:48] – Minor optimization adminen:create:layout [16.01.2015 11:12] – admin
Line 1: Line 1:
-====== Survey layout ======+====== 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**. 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**.
Line 5: Line 5:
 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 questionnaire, you can select this in the menu item **Compose Questionnaire** ->  //Settings// tab. Remember 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 =====+ 
 +===== Using Layout Templates =====
  
 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. 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.
  
-===== Simple customization =====+===== Simple Customization =====
  
 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: 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:
Line 28: Line 31:
   * 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. Beyond colors basic knowledge of CSS ([[http://www.w3schools.com/cssref/default.asp|CSS Reference]]) 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.
Line 34: Line 37:
 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. 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:
en/create/layout.txt · Last modified: 10.03.2022 07:57 by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki