the:behavioral:lab

Qualtrics JavaScript Methods: Setting Embedded Data with JavaScript

I’ve been frustrated trying to manipulate questions in Qualtrics and not being able to do so. Qualtrics is great and better than any other survey creator on the webs, but as a programmer, I often want to do things Qualtrics just can’t do on its webpage. I also don’t want to program my own study since that takes 10 times longer.

I recently was able to solve several problems by looking at the Qualtrics JavaScript source. Qualtrics publishes a Question API, but it is slightly incomplete. Looking at the full code answered so many questions that their customer service was not able to. For instance, answer responses are stored as hidden input elements. This makes sense, but there are other methods. As I continue to go through the code, I will be posting intermittently various tools to use in Qualtrics or answering puzzling questions I have had that are solved by looking at the programming. Obviously all I have are the client side JavaScript files, so I have no idea how information is stored on servers, etc., but this has been very helpful to me  and should be to you as well.

One function I have wanted to do but didn’t know how until I saw the code is modify embedded data elements within a question. Having to do it in the survey flow is very limiting. When it is modified, a simple JavaScript method is called which updates the HTML input element for your data. Here is the two functions:

addEmbeddedData: function (key, value)
{
$('Page').appendChild(QBuilder('input',
{
type: 'hidden',
name: key,
value: value
}));
},
setEmbeddedData: function (key, value)
{
var fieldName = 'ED~' + key;
if ($(fieldName))
{
$(fieldName).value = value;
}
else
{
$('Header').appendChild(QBuilder('input',
{
type: 'hidden',
id: fieldName,
name: fieldName,
value: value
}));
}
getEmbeddedData: function (key)
{
var fieldName = 'ED~' + key;
if ($(fieldName))
{
return $(fieldName).value;
}
}

There are several limitations that I have learned from trial and error. First, while after looking it the code, it appears like Qualtrics implements jQuery, they in fact do not. Their selector function [$()] takes a string (or multiple strings) and only searches by id. CSS selectors do not work. Second, JavaScript alone can’t do much with EmbeddedData elements. For your data to be store in the datafiles, and for you to use the EmbeddedData across multiple pages, you need to create an element with that name in the Survey Flow. Using addEmbeddedData without the element in the survey flow will result in the data being lost after the user moves on to the next page. Last, the getEmbeddedData() method cannot get embedded data elements that were not created through JavaScript. Creating an embedded data element in the Survey Flow and then trying to access it using getEmbeddedData() will not work. Creating an embedded data element in the survey flow, editing it using setEmbeddedData, then getting it using getEmbeddedData is the only way to get and set the data in a permanent way.

Check out tomorrow’s post for an example (here).

Advertisements

Single Post Navigation

2 thoughts on “Qualtrics JavaScript Methods: Setting Embedded Data with JavaScript

  1. Mark H on said:

    Qualtrics uses the Prototype JavaScript library which also uses ‘$’. You can load jQuery and use that as long as you use jQuery.noConflict() to resolve the conflict that will occur because both libraries use ‘$’. If you don’t want to deal with the conflict you can use Script.aculo.us which works with Prototype. From my experience there’s a lot more documentation/support for jQuery out there, so I prefer using it (I’m a newbie to programming). Qualtrics support won’t support/help with coding that goes beyond the scope of their “Coder’s Corner”, because they’re already swamped with questions and don’t have the time.

  2. Pingback: How to randomize or shuffle an array in Qualtrics | the:behavioral:lab

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: