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 (Placing Elements 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).

1. Create a new question of type „Dropdown Selection“ (in the example ST17). Enter the months from January to December as options.
2. Create another new „Dropdown Selection“ question (ST18) — this time enter the selectable years (e.g., 1980 to 2005) as options.
3. Duplicate both questions (ST19 and ST20) for the end date to be input.
4. Create another question, this time a „Multiple Choice“. The sole option in this question is „to date“.
5. 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.

Use 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:

<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>

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 () slightly.

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

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

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:

<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>

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 () 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.

question('ST17','show-title=no', 'show-explanation=no', 'spacing=4');

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

    </td>
    <td>

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

    </td>
    <td>

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

    </td>
    <td>

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

    </td>
    <td>

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

    </td>
  </tr>
</table>

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.

<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>

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 (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).

// 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
}