Differences

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

--- en:create:stuff [20.11.2011 19:52] – created lmumovie
+++ en:create:stuff [18.12.2014 21:03] – admin
@@ Line 14: / Line 14: @@
   * **Name** "Registration"
-  * **Title** "Registration for the seminar SoSciSurvey"
+  * **Title** "Registration for the SoSciSurvey seminar"
 Leave the other settings unchanged and save the questionnaire by clicking **OK**. Subsequently, the section "Questionnaire Pages" is displayed.
@@ Line 50: / Line 50: @@
 {{:de:create:scr.stuff.reload.png?nolink|Liste der Fragebogen-Elemente aktualisieren}}
+===== A Welcome at the Start of the Questionnaire =====
+In contrast to the registration form above, most questionnaires start with a friendly welcome page. The procedure is similar to adding a heading:
+  * Click on **Text Elements and Labels** and create a new //text element//.
+  * Add an empty page at the beginning when composing your questionnaire.
+  * Drag and drop the text element onto the empty page.
+===== Text Input and Selection =====
+To add the text input fields (question 1: surname, first name etc in the example above), you need to create a question of the type **Text input**.
+It is usually sensible to define the **Label Width**, e.g. "180" pixels in the example above.
+For the selection (question: Main subject), you need __another question__ of the type **Selection**.
+==== Step by Step ====
+  - Click on **New section** (on the left below List of Questions).
+  - On the right you can see the form for sections. Enter "SD" for the **ID** and "Student Data" for the **Name**, and click **OK**.
+  - On the right the form for a new question appears. In case it doesn't, click on **Add question** in the List of Questions (below the section you just created).
+  - Type "Personal Details" for the **Term** of the new question and click on "Text input" in the **Question Types** below. You can also select the question **type** in the dropdown menu at the top, but then you also need to click **OK**.
+  - On the right, further options for text input fields appear. Type in the following **Question title**: "Please enter your personal data." Further, defining a **Label Width** (items) of "180" is sensible. Do not forget to **Save**.
+  - Enter the items (Name, First Name, Student ID, ...) in the **Quick input for items** below. Alternatively, click on **Add item** on the left below List of Questions. You can save an item simply by hitting the return button.
+  - For the selection, click on **Add question** on the left.
+  - **Term** "Main Subject", **Type** "Selection".
+  - **Question title** "Please select your main subject". **\\ Save** and add items (see point 6 above).
+===== A smaller text input field =====
+For text input fields you can individually define the height and width. If you do not enter a height, text input fields are one row high and do not allow multi-line input.
+To make the text field smaller, simply define the **Width of the text input field** - "32" pixels in the example above.
+==== Step by Step ====
+  - Select **SD Student Data** (List of Questions).
+  - Select the question **Personal Details** (List of Questions).
+  - Enter the width of the input field in the **Quick input for items** __or__ select the item **Year of Study** (List of Questions).
+  - Enter "32" for the **Width** of the input field. **Save**.
+===== Gender Selection below the Text Inputs =====
+The last item of the personal details is a dropdown selection. Although it doesn't look like it on the registration form, this is a separate question.
+It is not visibly a separate question, because it is directly attached to the previous question. To do that, the previous question must not have any spacing - this can be set either via the settings for question items (see [[en:create:concat|Concatenating Questions]]) or by using the argument "spacing=0" in the question() command (see [[en:create:php|Introduction to PHP]]). At the same time, the attached question must not display a question title (setting or argument "notitle").
+==== Step by Step ====
+  - Add a new question of the **Type** "Dropdown selection", **Term** "Gender".
+  - As a **Lead text for the options**, enter "You are:". In the tab **Position of opener and input field**, enter "180" pixels, so that the selection field is positioned in line with the text input fields. **Save**.
+  - Create "Female" and "Male" as items (options).
+  - Click **Compose Questionnaire** on the left and select the questionnaire "Registration for the SoSciSurvey seminar" which you created earlier.
+  - You can now add all three questions using the mouse (mind the sequence: SD01, SD03, SD02) or add a PHP code.
+  - If you have added the questions using the mouse, click on the first question (not on the title, but on the picture). In the dropdown menu **Spacing to the next question**, select **No spacing**. Confirm by clicking the green checkmark. Now, click on the second question (the dropdown selection). In **Show question text**, select the option **No**. Un-tick the box **Show explanation**. Confirm again by clicking the green checkmark.
+  - In case you decided to add PHP code, enter the following code:
+<code php>
+question('SD01', 'spacing=0');  // Personal Data
+question('SD03', 'notitle');    // Gender
+question('SD02');               // Main Subject
+</code>
+The code must contain the correct question IDs. In this example, these are SD01 to SD03.
+After (automatically) saving the questionnaire, you can test it and have look at the preliminary result.
+===== Selection Option "Other" =====
+When using selection or multiple choice questions, additional input boxes can be displayed. This can be simply done by ticking the box //Show text input field for this option// in the item properties. You should define a width for this input box, since otherwise Internet Explorer will use the maximum width and spread the item over multiple rows.
+==== Step by Step ====
+  - Select section //SD Student Data// (List of Questions).
+  - Select question //Main Subject// (List of Questions).
+  - Select item //Other// or create as a new item (List of Questions).
+  - Tick the box //Show text input field for this option//.
+  - Set the //Width of the input field// to "250" pixels. Click //OK//.
+  - Select question //Main Subject// again (List of Questions) and check the result in the preview at the bottom.
+===== Label the Next Button =====
+Any text that is displayed in the questionnaire can be edited via **Text Elements and Labels**.
+==== Step by Step ====
+  - Select **Text Elements and Labels** from the menu.
+  - Beside //Next Button//, type "Register".
+  - Beside //Page title//, you can optionally also type "Registration Form".
+  - Save by clicking //OK//.
+**Important:** The next button now has the same label on every page of the questionnaire. If you need a different label on one page only, use the function ''[[:en:create:functions:option|option()]]''.
+===== Activate and Edit Layout =====
+The width of the questionnaire is set by the layout used. For example, the standard layout "oFb blue" allows a lot of space, the layout "oFb paper" considerably less.
+The example above uses the layout "neutral", but the width has been reduced from 600 pixels to 450. Because changing the width works differently for each layout, only the procedure for the neutral and the blue layout are described here. The width of layouts with graphic elements (e.g. "oFb paper") cannot be changed without "impairing" the layout graphically.
+==== Step by Step ====
+  - Select **Questionnaire Layout** from the menu.
+  - Activate the layout "oFb neutral" for your project. At the bottom, you can see the //Default Layouts//. Next to //oFb neutral//, click //[Activate]// to use the layout in your project.
+  - The layout now appears in the list at the top. Click the description "oFb neutral" or the {{:button.edit.gif}} button.
+  - At the top, change the //ID// to "neutral_n". For the //Comment//, type "oFb neutral (narrow)".
+  - Below, you can change the colours of the layout - to edit the width you have to scroll down to the bottom to the //HTML Template of the Layout//. Here, you can find the line:\\ div.questionary { width: 600px; margin: 20px auto 0px auto; text-align: left; }
+  - Change the width of the layout (here defined as div.questionary) to 450 pixels:\\ div.questionary { width: 450px; margin: 20px auto 0px auto; text-align: left; }
+  - Save by clicking //OK//.
+  - Select you questionnaire via **Compose Questionnaire** and in the tab //Settings//, choose the new //Layout// "[neutral_n] oFb neutral (narrow)". //Save// by clicking OK and go to the tab //Questionnaire Pages//. By clicking the green arrow {{:button.run.gif}} you can check out your questionnaire in the narrow design.
+===== Further Solutions =====
+Solutions for other tasks can be found in the chapter [[composition|Advanced Display Options]].