This translation is older than the original page and might be outdated. See what has changed.
Translations of this page:
 

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

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: Likewise, text input fields (e.g. to indicate the year) could be used instead of dropdown selection fields.

Step-by-Step

  1. Create a new question with the type “Dropdown Selection” (ST17 in the example). Enter the months January to December as options.
  2. Create another new “Dropdown Selection” question (ST18) – the years available to be selected are input here (e.g. 1980 to 2005).
  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.

Version 1

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.

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.

prepare_input('ST17');
prepare_input('ST18');
prepare_input('ST19');
prepare_input('ST20');

Insert the HTML code for the table below this. Use a “HTML code” element to do this and enter the following content.

<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: %ST17%</td>
    <td>%ST18%</td>
    <td>to: %ST19%</td>
    <td>%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 (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>

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:

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

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.

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

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 (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
}
en/create/table-layout-dropdowns.txt · Last modified: 16.06.2015 22:45 by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki