Suggestion Box

Spot an error or have suggestions for improvement on these notes? Let us know!

Enhancing Qualtrics Surveys with HTML/CSS/JavaScript

HTML and CSS in Qualtrics

Example: Improve survey response rate by hiding extra content

HTML:

What is your
<span 
  class='moreInfo'
  title='Primary language is the language a person learns from birth or within their critical period of language development. It is the language spoken in the person’s home or community during their early years and typically becomes the primary means of communication and cultural identification.'>
  primary
</span>
language?

Edit CSS via Look & Feel → Style → Custom CSS

.moreInfo {
    border-bottom: 2px solid black;
    cursor: pointer;
}

.moreInfo::after {
    content: "*"; /* Add an asterisk symbol */
    font-size: 0.8em; /* Make it slightly smaller */
    margin-left: 5px; /* Add some space between text and asterisk */
    vertical-align: super; /* Align it slightly higher */
}

Learn more: Qualtrics Docs > Add Custom CSS

Link your jsPsych experiment from a Qualtrics survey

Create a link to your experiment from the end of your Qualtrics survey- E.g.:

<a href='https://susanbuck.github.io/psy1903/lexical-decision?qualtricsId=${e://Field/ResponseID}
'>Please visit this link and follow the instructions you see there...</a>

Observe:

The query string ?qualtricsId=${e://Field/ResponseID} is added to attach a Qualtrics response ID to the link
The code ${e://Field/ResponseID} is syntax for Qualtrics Piped Text which you can read about here...

To capture the response ID in your jsPsych experiment, add the following code at the top of your experiment.js file:

// Retrieve the query string from the URL
let queryString = new URLSearchParams(window.location.search);

// Extract the value for qualtricsId from the query string
let qualtricsId = queryString.get('qualtricsId');

// Persist the value for qualtricsId to your experiment data
jsPsych.data.addProperties({ qualtricsId: qualtricsId });

Learn more: Passing information from a Survey

Custom JavaScript in Qualtrics

The following is a sampling of functionality you can add to Qualtrics surveys with custom JavaScript.

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);
    });
});