====== Optimize Display of Questions ======

Although creating questions and their items/options is straightforward, the end result does not always look so pleasing straightaway. As a rule, this can be made better by optimizing the options found in the question. 

This chapter demonstrates the steps to optimize the question type //scale (fully labeled)//  -- however many of these tricks, such as text wrap and width adjustment, can be used for other question types. It also shows you how to use an individual layout for your questionnaire.

You created your first questionnaire with the help of the chapter: [[basics|An Online Questionnaire in 5 Minutes]] with this question in it:

{{:de:create:scr.design.example.start.png?nolink|Question Before Optimization}}

===== Change Layout of a Questionnaire =====

If your questionnaire does not look like the one in the image above (perhaps it is blue or dark gray), then you can change this by altering the layout of the questionnaire. Select **Questionnaire Layout** (left in the control panel) to activate a questionnaire layout to alter, or, to program your own layout.

Here you will find the section //Layout Templates//. To use one of these templates for your questionnaire, click //Use in project// by the desired template. Afterwards, the layout will appear in //Questionnaire Layout// above.

  * If you have __not yet__ activated __any layout at all__ then the SoSci Survey default layout will be used. 
  * If you have activated __one layout__ then this one will be used.
  * If you have activated __multiple layouts__ then you can make one of these the default layout.  Choose the box next to the layout and click on the button //Set selected layout as default//. This layout will be used for the questionnaire unless you have chosen a different //Layout// under **Compose Questionnaire** ->  //Settings// tab.

The //SoSci Survey Neutral// layout was used for the image above. The following images use the //SoSci Survey Paper// layout. This layout is modeled on a piece of a paper; a bit more sombre but not as dull as the neutral layout.

{{:de:create:scr.design.example.paper.png?nolink|The Same Question in a Different Layout}}

You can make relatively simple adjustments in a layout template such as changing the width or the colour. Please see the chapter [[:de:create:layout|Questionnaire Layouts]] for more information.

===== Scale Width =====

To optimize the presentation of a question, choose the question on the left in the list of questions (Section **RT Researcher Type**, Question **RT01 Questionnaire Settings**).

There is not much space in the layout for the text on the left (//Item Text//). To change this, the scale's input fields need to be made narrower. In the tab //Display Options//, the option //Width of labeled values/columns// has a value of "60". If you do not state a value then SoSci Survey will use 80 pixels.

{{:de:create:scr.design.width.png?nolink|Measurement Settings}}

If your knowledge regarding pixel measurements is limited then 100 pixels are -- depending on the screen -- between 2.5 and 3.5cm. There are different pixel scales in various places within SoSci Survey that will help you to estimate the correct size to use:

{{:div.pixel-scale.gif?nolink|Pixel Scale to Determine Measurements}}

By clicking on //save// you can see the changes in the preview directly below:

{{:de:create:scr.design.scale-width.gif?nolink|Measurement in a Scale}}

In the resulting image, the areas in which the width was altered are marked in orange. Other types of questions have different setting options. 

===== Apply Specific Text Wrap =====

The text items now have enough space, but as a result one of the two labels ("completely") is now on two lines. You can enter a line break manually by pressing the enter key in the appropriate place or wrap text with the HTML tag ''<br>'' ("break"). See more about HTML tags: [[:en:create:texts#html_formatting|HTML Formatting]].

You can optimize nearly any text in the questionnaire by using HTML tags. You can set text wrap for the //Minimum// und //Maximum// labels (in the //scale// tab) as follows:

{{:de:create:scr.design.newlines.png?nolink|Set Text Wrap Manually}}

After clicking on //save// the wrapped text appears in the preview. Please note that the label "completely" is now wrapped differently than before. 

{{:de:create:scr.design.newlines.result.gif?nolink|Manual Text wrap in the Questionnaire}}

**Tip:** Remember that making optimizations such as wrapping are only sensible after choosing a layout. Other layouts use other font sizes for labeling the scale and are wider or narrower overall. The first two images on this page show this clearly.

===== Organization of Labels =====

In the original setting the labels are set above the most extreme options of the scale and go outwards. As long as you //Label maximum and minimum only// (in the //Scale// tab), you can also align the organization of the labels "inside" or "centred above the extremes":  

{{:de:create:scr.settings.orientation.inside.gif?nolink|Inward Alignment of the Scale Label}}

In the image above the orientation has been set as "inside" -- and to ensure the labels have enough space the scale's intermediate values have been increased to 30 pixels (default is 20 pixels) (//Display Options// tab -> //Spacing of scale points//). There is more space for the item text because the orientation is set as "inside".

{{:de:create:scr.settings.orientation.middle.gif?nolink|Centred Alignment of the Scale Label}}

When the orientation is set as centred there is wasted space on the left and right of the scale. When an odd-number is used in a "normal" scale there is an additional column in the middle that is unused. However, there is still more room for items in this example than when the orientation was set as "inside" or "outside". Take a look at at the question type [[questions#skala_extrema_beschriftet|Scale (extremes labeled)]] if you still need more room.

===== Visual Anchorage =====

A graphical anchor often improves the measurement of a scale (as the participant can see straightaway where "few" and "many" are). SoSci offers various forms of these "wedges". For example, choose the first wedge in the //Anchorage// tab under //Visual anchorage//.

{{:de:create:scr.design.wedge.gif?nolink|Graphical Anchor in a Scale}}

A //numerical anchor// can be used in the same way -- together with a visual anchor as well.


==== Scale Orientation ====

Please ensure that the alignment of the anchor is adapted to the direction of the scale. If you would rather have the maximum on the left (nearer to the text) then you have to change the //Direction of the scale//. This can be seen in the image below: 

{{:de:create:scr.design.example.result.png?nolink|Optimization Result}}

Of course, the "SoSci Survey Paper" layout is a matter of taste and most probably unsuitable for most surveys. There are plenty of other layouts you can choose from.  

The tweaks shown apply for questions with scales in them. It's worth going through the various settings for other types of questions and trying out different settings. You can easily check how any adjustments look in the preview.

===== Further Adjustments =====

  * In **Footer and Logo** you may customize the contact information displayed at the bottom of the questionnaire. You can also upload your university's or company's logo here -- or deactivate the default server logo if you so wish ([[:en:create:imprint]]).
  * Maybe you also want the "next" button to be labeled differently? You can customize this and other text in **Text Elements and Labels**.
  * Likewise, you can change a layout's colours: [[:en:create:layout|Survey Layouts]]).
  * If you know what you are doing with HTML then the layout is completely up to you. You could take any website (to which you have the rights to!) and use it to make a layout for your questionnaire. This is how questionnaires used in companies are fully customized to their own corporate identity.