the:behavioral:lab

Programmatically embedding Flash videos in Qualtrics

I recently was helping out with a project that required a user to view 50 different flash videos. Since Qualtrics parses HTML automatically in the survey preview mode of the editor, having 50 videos pop up and start playing at once is loud and annoying. Additionally, it is inefficient and difficult to handle randomizing conditions. I wanted to come up with a quick and easy way to use JavaScript to do this in a single question.

To start, I created an EmbeddedData element in the survey flow (always on top) with fields ‘cond’ and ‘i’, leaving the values blank. Next in the instructions question, I created a random condition (all 50 videos randomized). Since the videos have the same URL and take a number as a parameter from the query string, I created and randomized and array with numbers 1 through 50. I then updated the ‘cond’ embedded data element and assigned the index element (‘i’) to 0, using the setEmbeddedData() method that Qualtrics has programmed into their API.

var conditions=new array();
//followed by to populate and randomize the array
Qualtrics.SurveyEngine.setEmbeddedData("cond",conditions.toString());
Qualtrics.SurveyEngine.setEmbeddedData("i","0");

On the question that will display the video, I needed a way to access the embedded data. You cannot do that with the getEmbeddData() method because the embedded data was created on a different page. Instead, since I am going to be editing the question text anyway, I pipe the data into the question text, typing in ${e://Field/cond};${e://Field/i}.

Next, I go to the JavaScript editor, I grab the question text HTML element using another method from the Qualtrics API.

var qt = this.getQuestionTextContainer();

Then I grab and parse the embedded data information using String.split().

var parts=qt.innerHTML.split(";");
var index=Number(parts[1]);
var conds=parts[0].split(",");
var condition=conds[index];

Last, I replace the question text with an iframe of the web page that stores my Flash files, and increment the index variable.

qt.innerHTML="";
Qualtrics.SurveyEngine.setEmbeddedData("i",String(++index));

Now I can repeat that block in the survey flow, and each time it will play the next video.

For a summary for those who want to just copy and paste, click here.

Advertisements

Single Post Navigation

One thought on “Programmatically embedding Flash videos in Qualtrics

  1. Pingback: Qualtrics JavaScript Methods: Setting Embedded Data with JavaScript | 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: