Custom Javascript on Qualtrics

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:

Qualtric side by side question

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.

Two things to note. First, we are leveraging the Qualtrics javascript API to get the ID of the question. Secondly, we had to do an inspect element via our chrome browser to understand the name convention Qualtrics uses, hence the we are providing a prefix of “QR~” and a suffix of “#1~1” or “#2~1”.

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 src=”//code.jquery.com/jquery-1.10.2.js”></script>
<script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>
<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.

I think it is important not boxing ourselves into making the question work based on Qualtrics’ standard features. The custom javascript option is a great tool to provide additional functionality from collecting better data to better user experiences.