We are using Qualtrics to perform some of our online data collections as part of a much larger initiative. The Qualtrics product provides a number of options to build and ask various questions, but we had specific functionality and validation we wanted to perform during the survey to mitigate previous user input errors we have seen in previous projects in the past while also ensure a good user experience.
One of the data points we ask for is the age of the subject when they were diagnosed. In the past, they have used input fields to collect years and months. As you can image, there are times when user would enter the data in the wrong field(s).
What we decided to do was use the Qualtrics Side by Side question using the dropdown lists. The first column would be populated with years from 0 to 60 and the 2 column would be populated with months 0 to 11:
You are required to populate all choices when creating the survey, therefore I decided to leverage the embedded data to capture the age of the subject, so we could reduce the number of choices in the years select. The first thing we need to is capture that embed data, which is we are calling ‘age_in_months’, which will be assigned to a variable called ‘parameterName’. This will be one of few variables set at the beginning of the code to allow for some flexibility to the research assistant creating and updating these surveys:
The first thing we need to is capture that embed data, named ‘age_in_months’, which will be assigned to a variable called ‘parameterName’. This will be one of few variables set at the beginning of the code to allow for some flexibility to the research assistant creating and updating these surveys.
The next snippet of code contains a variable call ‘minimum_age’, which is one of the few variables the research assistant can set based on their requirements. This value will hide the month choices based on the minimum age value. They will reappear if the user selects a year value greater than 1 (we see that logic later).
Next we use jQuery to apply the onchange event to the selection elements. Because jQuery uses the same $ symbol Qualtrics uses for variable naming, we have to leverage the no conflict method. When you update the header source options on Qualtrics, you can add something similar to this:
<script>var $j = jQuery.noConflict();</script>
The user selects a value, now what? We need currently cycling through each select and determine a number of actions. Basically, depending if the years select is set to 0 or not, we need to determine if we want to hide months 0 through 5. In the case a month choice of 0 through 5 has previously been selected, and the user then selects 0 years, in addition to hiding the choices, we need to clear the selectedIndex.
The snippet above will provide us with a calculated age in month values.
If the calculated age is determined to be below a threshold of concern (and both year and month values have been selected), then we will initiate a dialog box asking if they are sure.
Now we have accomplished a couple of things that standard Qualtrics questions could not provide, or at least, not with the same user experience. We ensured a limited option based on the subjects age and we initiated a warning to the user to confirm an age range we have some concerns with.
Finally, that brings us to the dialog box functionality. Nothing too fancy. Should the user answer that the inputed age was not correct, we are resetting select elements.