Using ExternalDataReference to populate Multiple Choice Options | XM Community
Skip to main content
Michael_Cooksey
Administrator
22 days ago
Question

Using ExternalDataReference to populate Multiple Choice Options

  • February 10, 2025
  • 1 reply
  • 26 views
R
Forum|alt.badge.img

Hi,

I have semicolon delimited text in external data reference that i am using to dynamically generate a list of options for my users. This list is customised per user in the contacts directory.

I am using Javascript to generate the options, however the checkboxes are not loading, only the text is loading. 

The code I'm using is below. I think its something to do with Stylesheets, can anyone figure out what is wrong?.. Is there a better way to do this?

 

Qualtrics.SurveyEngine.addOnload(function()
{

      // Retrieve the embedded data field
    var dynamicChoices = "${e://Field/ExternalDataReference}";

    
    var optionsArray = dynamicChoices.split(';');
    
    var questionId = this.questionId;


    var questionContainer = this.getQuestionContainer();
    
    // Find the multiple choice options container

    var optionsContainer = this.questionContainer.querySelector('.ChoiceStructure');
    
    // Clear existing options
    optionsContainer.innerHTML = '';
    

    
// Dynamically create and append new options
    for (var i = 0; i < optionsArray.length; i++) {
       var option = document.createElement('div');
        option.className = 'Choice';
        option.innerHTML = '<label><input type="checkbox" name="QID11" value="' + optionsArray[i] + '"> ' + optionsArray[i] + '</label>';
        
optionsContainer.appendChild(option);
}
    
});

1 reply

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+44
  • Deepak
  • 1549 replies
  • February 11, 2025

Not sure, if you already know the max number of options and if it would be consistent across,
if yes you can use below code
 

Qualtrics.SurveyEngine.addOnReady(function() {
    var embeddedData = "${e://Field/ExternalDataReference}"; // Get the embedded data value
    if (!embeddedData) return; // Exit if no data
    var choices = embeddedData.split(";"); // Split by semicolon
    var labels = document.querySelectorAll("span.LabelWrapper label span"); // Find choice labels
    // Loop through existing choices and update them
    for (var i = 0; i < labels.length && i < choices.length; i++) {
        labels[i].textContent = choices[i]; // Update the choice text
    }
});

 

Leave a Reply


Terms & Conditions