[[Place Dropdowns Side by Side]]
You are here: start » Overview » Creating and Designing the Questionnaire » Place Dropdowns Side by Side
 
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
en:create:table-layout-dropdowns [05.02.2015 16:48] – [Check Input] alexander.ritteren:create:table-layout-dropdowns [18.09.2024 21:35] (current) – [Version 1] admin
Line 7: Line 7:
 A total of four dropdown selections (ST17 to ST20 in the example), as well as a multiple-choice question (ST21) is required in the question. If the "to date" option is selected, this means the dropdowns for the end date will be disabled using JavaScript. This prevents the simultaneous entry of an end date and "to date".  A total of four dropdown selections (ST17 to ST20 in the example), as well as a multiple-choice question (ST21) is required in the question. If the "to date" option is selected, this means the dropdowns for the end date will be disabled using JavaScript. This prevents the simultaneous entry of an end date and "to date". 
  
-**Tip:** Likewise, text input fields (e.g. to indicate the year) could be used instead of dropdown selection fields. +**Tip:** Instead of using dropdown selection fields, you could also use text input fields (e.g., to specify the year).
  
  
 ===== Step-by-Step ===== ===== Step-by-Step =====
  
-  - Create a new question with the type "Dropdown Selection" (ST17 in the example). Enter the months January to December as options. +  - Create a new question of type "Dropdown Selection" (in the example ST17). Enter the months from January to December as options. 
-  - Create another new "Dropdown Selection" question (ST18) -- the years available to be selected are input here (e.g. 1980 to 2005).+  - Create another new "Dropdown Selection" question (ST18) — this time enter the selectable years (e.g., 1980 to 2005) as options.
   - Duplicate both questions (ST19 and ST20) for the end date to be input.   - Duplicate both questions (ST19 and ST20) for the end date to be input.
   - Create another question, this time a "Multiple Choice". The sole option in this question is "to date".     - Create another question, this time a "Multiple Choice". The sole option in this question is "to date".  
   - Follow the instructions below (version 1 __or__ version 2) to place the 5 questions next to each other. In **Compose Questionnaire**, a table with five fields in one row is generated using HTML in order to do so.   - Follow the instructions below (version 1 __or__ version 2) to place the 5 questions next to each other. In **Compose Questionnaire**, a table with five fields in one row is generated using HTML in order to do so.
    
-===== Version 1 =====+==== Version 1 ====
  
 Use [[inputs-single|freely place input fields]] to conveniently place the dropdown selection fields in the HTML table. However, the multiple choice question "to date" has to be inserted as a question in the usual way as a label is required next to the input field.  Use [[inputs-single|freely place input fields]] to conveniently place the dropdown selection fields in the HTML table. However, the multiple choice question "to date" has to be inserted as a question in the usual way as a label is required next to the input field. 
  
  
-First of all, place the following PHP code on a page in the questionnaire in **Compose Questionnaire** to to prepare the placeholders for the input fields. +Under **Compose questionnaire** (using element "HTML code") or in a text module (display: "HTML code") insert the HTML code for the table:
- +
-<code php> +
-prepare_input('ST17'); +
-prepare_input('ST18'); +
-prepare_input('ST19'); +
-prepare_input('ST20'); +
-</code> +
- +
-Insert the HTML code for the table below this. Use a "HTML code" element to do this and enter the following content. +
  
 <code html> <code html>
Line 42: Line 32:
 <table width="100%" cellspacing="0" cellpadding="0" border="0"> <table width="100%" cellspacing="0" cellpadding="0" border="0">
   <colgroup>   <colgroup>
-    <col width="20%"> +    <col width="22%"> 
-    <col width="20%"> +    <col width="18%"> 
-    <col width="20%"> +    <col width="22%"> 
-    <col width="20%">+    <col width="18%">
     <col width="20%">     <col width="20%">
   </colgroup>   </colgroup>
   <tr>   <tr>
-    <td>%ST17%</td> +    <td>from:%input:%ST17%</td> 
-    <td>%ST18%</td> +    <td>%input:%ST18%</td> 
-    <td>%ST19%</td> +    <td>to:%input:%ST19%</td> 
-    <td>%ST20%</td>+    <td>%input:%ST20%</td>
     <td>     <td>
 </code> </code>
en/create/table-layout-dropdowns.1423151313.txt.gz · Last modified: by alexander.ritter
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki