====== Place Dropdowns Side by Side ======

This chapter describes how to place dropdown selection fields side by side, in order to query a date range (month/year to month/year). In addition, the question should allow a "to date" option. A HTML table is used to place the dropdown input fields ([[table-layout]]).

{{:de:create:scr.example.combine.dropdown.jpg?nolink|Dropdowns Placed Horizontally Side by Side}}

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:** Instead of using dropdown selection fields, you could also use text input fields (e.g., to specify the year).


===== Step-by-Step =====

  - 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) — 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.
  - 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.
 
==== 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. 


Under **Compose questionnaire** (using element "HTML code") or in a text module (display: "HTML code") insert the HTML code for the table:

<code html>
<div class="title">
  <p>Please state how long you have worked for this company.</p>
</div>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <colgroup>
    <col width="22%">
    <col width="18%">
    <col width="22%">
    <col width="18%">
    <col width="20%">
  </colgroup>
  <tr>
    <td>from:%input:%ST17%</td>
    <td>%input:%ST18%</td>
    <td>to:%input:%ST19%</td>
    <td>%input:%ST20%</td>
    <td>
</code>

The "to date" option has to be inserted as question. Either a line of PHP can be used to do so -- or drag the question onto the page and customize the display settings ({{:button.settings.png?nolink|Display Settings}}) slightly. 


<code php>
// Insert the alternative option ("to date") in the last cell
question('ST21','show-title=no', 'show-explanation=no', 'spacing=4');
</code>

<code html>
<!-- End of table -->
    </td>
  </tr>
</table>
</code>


==== Version 2 ====

Instead of working with placeholders, you can also insert all of the questions "normally". First of all, create the question title as well as the table framework:


<code html>
<div class="title">
  <p>Please state how long you have worked for this company.</p>
</div>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <colgroup>
    <col width="20%">
    <col width="20%">
    <col width="20%">
    <col width="20%">
    <col width="20%">
  </colgroup>
  <tr>
    <td>
</code>

The first dropdown input field (month in which the person started working) is now inserted with a line of PHP code -- or drag the question onto the page and customize the display settings ({{:button.settings.png?nolink|Display Settings}}) slightly.

The options in the ''question()'' command suppress the question text and explanations in question ST17; these will already be displayed with HTML code. The final option '''spacing=4''' states that there should only be a little bit of space underneath the input field. 

<code php>
question('ST17','show-title=no', 'show-explanation=no', 'spacing=4');
</code>

The HTML structure of the table now continues and each dropdown field is put between ''<td>'' and ''</td>'.

<code html>
    </td>
    <td>
</code>

<code php>
// Ask for first year in next cell
question('ST18','show-title=no', 'show-explanation=no', 'spacing=4');
</code>

<code html>
    </td>
    <td>
</code>

<code php>
// Ask for final month
question('ST19','show-title=no', 'show-explanation=no', 'spacing=4');
</code>

<code html>
    </td>
    <td>
</code>

<code php>
// End date: year
question('ST20','show-title=no', 'show-explanation=no', 'spacing=4');
</code>

<code html>
    </td>
    <td>
</code>

<code php>
// Insert alternative selection option ("to date") in the last cell
question('ST21','show-title=no', 'show-explanation=no', 'spacing=4');
</code>

<code html>
    </td>
  </tr>
</table>
</code>


==== JavaScript for "to date" Option ====

Now the questionnaire still has make sure the dropdown fields for the end date are disabled if "to date" was selected.

Insert the following JavaScript code as a text element (recommended) at the end of the questionnaire page, or as a HTML code element. 

<code html>
<script type="text/javascript">
<!--
var tillToday = document.getElementById("ST21_01");
function checkAlternative() {
  if (tillToday.checked) {
    document.getElementById("ST19").disabled = true;
    document.getElementById("ST20").disabled = true;
  } else {
    document.getElementById("ST19").disabled = false;
    document.getElementById("ST20").disabled = false;
  }
}
SoSciTools.attachEvent(tillToday, "click", checkAlternative);
checkAlternative();
// -->
</script>
</code>


==== Check Input ====

If you want to install an additional consistency check in order to verify that a participant's input is sensible, do this with a filter on the __next__ page in the questionnaire ([[:en:create:checks#customized_response_check|Check Responses: Customized Response Check]]). In order to program this filter, you need the return values of your individual questions, which can be taken from the **Variables Overview**.

If you have created the questions as demonstrated in the examples, you will see the following:

  * [ST17] and [ST19] respectively\\ 1 = January\\ 2 = February\\ ...\\ 12 = December\\ -9 = not answered
  * [ST18] and [ST20] respectively\\ 1 = 2005\\ 2 = 2004\\ 3 = 2003 \\ ...\\ 35 = 1980\\ -9 = not answered
  * [ST21]\\ 1 = not selected\\ 2 = selected

A filter is used to ensure that the date of leaving the company is always after the date of joining the company. In order to do this, ST19 has to accept a later month than ST18 if the person joined and left within the same year. As long as the year of leaving (ST20) is chronologically after the year of joining (ST18), the month is arbitrary. 

In order to show the participant an error message and redisplay the question in these circumstances, create a text element in the **Text Elements and Labels** menu, which you can then use later on as an error message ("durationE" in the example).


<code php>
// Year of joining is after year of leaving 
if ((value('ST18') < value('ST20')) {
  repeatPage('durationE'); // repeat previous page with error message
}

// In the same year, but different months
if ((value('ST18') == value('ST20')) and (value('ST17') > value('ST19'))) {
  repeatPage('durationE'); // repeat previous page with error message
}
</code>