Javascript and Qualtrics

This is not an endorsement of the product by any means but recently I had a chance to play around with Qualtrics. It is a market research tool that allows users to create and distribute surveys. It also provides features to analyse collected data and produces automatic reports thereby completing the whole circle of research pipeline.

Here at UCSB, we use Qualtrics extensively to conduct surveys for a variety of behavioral research. We wanted to develop a collaborative survey where input of one user affects the usage of others engaged in that survey. Supporting such complex interactions is not supported out of the box by Qualtrics. However, cudos to the developer team for providing JS integration. So, it is ‘possible’ to include arbitrary javascript and create really rich surveys. However, the JS Api is not very detailed in terms of explanation and usage with examples. I spent a while digging through SO posts and other forums online and finally was able to come up with a good workflow for creating JS based surveys (well integrated using the JS api that Qualtrics provides). The remainder of this post is going to be about tiny snippets detailing parts of the whole integration process.

1. Adding external JS libraries – Page transitions have known to cause errors with JS integration so we need to first turn off page transition by going to Look & Feel section under the Survey tab.

Look & Feel (Transition)

Going to the advanced section in Look & Feel  , we can add external js libraries that we want to use in our project.

Add external JS/CSS

2. Clicking on the ‘wedge’ button on any question allows us to add Javascript.

Add javascript to question


Clicking on the button presents us with an editor.This is how we can structure a typical question involving HTTP communication with some REST Api:

This can serve as a skeleton to incorporate increasingly complex event handlers and API integration with Qualtrics. The most important bit in this snippet is the code about setting Embedded Data. Embedded Data allows us to persist some data throughout a survey. It creates an equivalent of ‘session-storage’ and gives us a lot of freedom to employ rich features defined by Qualtrics on top of Embedded Data.

The code above is typically for a rest API. I included some timer code if we want to poll a server in a given frequency. However, for real-time applications we’d want to make a pub-sub communication with a socket server. Here’s a snippet to get started with and Qualtrics:

I have included some dummy socket events that I had created for the demo survey on Qualtrics.

That’s about it. The app server implementation is open ended as it varies with use-case. Qualtrics should now be able to communicate with your app server.

Note: You might have to set  Access-Control-Allow-Origin header in your server response so that the browser does not block Qualtrics’ attempt to make cross origin http request in either case.