Qualtrics (Part 2) JavaScript

The following is a sampling of JavaScript functionality you could add to a Qualtrics survey.

To learn more about using JavaScript in Qualtrics check out these docs....

Custom response validation

Ensure specific patterns, combinations of responses, or numeric ranges across multiple fields.

Example: Validate that the sum of responses across multiple text fields equals a certain number

Qualtrics.SurveyEngine.addOnload(function() {
  this.questionclick = function(event, element) {
      let sum = parseInt(document.getElementById("QR~QID1").value) +
                  parseInt(document.getElementById("QR~QID2").value);
      if (sum !== 10) {
          alert('The sum of the numbers must equal 10!');
          return false;
      }
  };
});

Track whether respondents click a link

To track whether a respondent clicks a link, begin by creating a new Embedded Data value in Qualtrics, e.g. trackedLink.

Set up the link in your experiment with an id you can target with JavaScript:

<a id='trackedLink' href='http://example.com'>Please follow this link...</a>

Then use this JavaScript to track when that link is clicked:

Qualtrics.SurveyEngine.addOnload(function() {

    document.getElementById('trackedLink').click(function(event) {
        Qualtrics.SurveyEngine.setEmbeddedData('clickedTrackedLink', '1');
    });

});

Creating Timed Response Tasks

Control the timing of questions and capture response times.

Example: Set a question to appear for only a limited time, and automatically move to the next question afterward

Qualtrics.SurveyEngine.addOnload(function() {
    setTimeout(function() {
        Qualtrics.SurveyEngine.navigateNext();
    }, 5000); // Automatically advances after 5 seconds
});

Randomized or Dynamic Content

Dynamically change content within the survey. You could randomize text, images, or even choices within a question.

Example: Display a random motivational message

JavaScript:

Qualtrics.SurveyEngine.addOnload(function() {
    let messages = ['Great job!', 'Keep going!', 'You’re doing amazing!'];
    let randomMessage = messages[Math.floor(Math.random() * messages.length)];  document.getElementById('randomMessage').innerText = randomMessage;
});

HTML:

<div id='randomMessage'></div>

Custom Progress Bars

Customize how a progress bar is displayed or add a custom progress indicator for multi-part surveys.

Example: Create a custom progress indicator that updates as the user progresses:

Qualtrics.SurveyEngine.addOnload(function() {
    let progress = Math.round((Qualtrics.SurveyEngine.getEmbeddedData('Progress') || 0) + 10);
    Qualtrics.SurveyEngine.setEmbeddedData('Progress', progress);
    document.getElementById('progressBar').style.width = progress + '%';
});

HTML:

<div id='progressBar'></div>

CSS:

#progressBar {
    width: 0; 
    height: 20px; 
    background-color: green;
}

Interactive Elements

Create custom interactive elements, like sliders or buttons, for user input.

Example: Add a button that, when clicked, reveals additional content

JavaScript:

Qualtrics.SurveyEngine.addOnload(function() {
    document.getElementById('revealButton').addEventListener('click', function() {
        document.getElementById('extraContent').style.display = "block";
    });
});

HTML:

<button id='revealButton'>Show More</button>
<div id="extraContent" style='display:none;'>Here is the additional content!</div>

Real-Time Data Capture

Capture additional data such as time spent on a question or number of clicks on certain elements, which can provide insight into user behavior during the survey.

Example: Capture the amount of time spent on a specific page and save it to embedded data

Qualtrics.SurveyEngine.addOnload(function() {
    let startTime = new Date().getTime();

    this.addOnUnload(function() {
        let endTime = new Date().getTime();
        let timeSpent = (endTime - startTime) / 1000; // Time in seconds
        Qualtrics.SurveyEngine.setEmbeddedData('timeOnPage', timeSpent);
    });
});