Turn displayed choices for a multi select field | XM Community
Skip to main content
Solved

Turn displayed choices for a multi select field

  • August 6, 2024
  • 7 replies
  • 90 views

Forum|alt.badge.img+1

How do I pre-set the multi select choices for a question based on piped values in an embedded data field using JS.

Example:

Embedded Data field - DataClassification = “Company Confidential|Non Restricted Data”.

Based on the values in Data Classification, “Company Confidential” and “Non Restricted Data” radio buttons need to be checked.

Best answer by chackbusch

@RaghuA This code works for me with classic layout: 

Qualtrics.SurveyEngine.addOnReady(function()
{
var dataClassification = "${e://Field/DataClassification}";

// Split the embedded data into an array
var options = dataClassification.split("|");

// Get the <ul> element containing the choices
var questionBody = document.getElementById(this.questionId);
var choiceStructure = questionBody.querySelector(".QuestionBody .ChoiceStructure");

// Iterate through each <li> element
var liElements = choiceStructure.querySelectorAll("li.Selection");

liElements.forEach(function(li) {
// Find the label text
var labelText = li.querySelector("span.LabelWrapper label span").textContent.trim();

// Check if the label text is in the options array
if (options.includes(labelText)) {
// Select the corresponding radio button
var inputElement = li.querySelector("input[type='checkbox']");
inputElement.checked = true;
}
});
});

Embedded data is defined before the question: 

That’s how it gets loaded: 

Please consider that this does not work if the texts of the multi select options are translated.

Best
Christian

7 replies

chackbusch
QPN Level 5 ●●●●●
Forum|alt.badge.img+22
  • QPN Level 5 ●●●●●
  • 415 replies
  • August 6, 2024

@RaghuA Which layout are you using?


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 4 replies
  • August 6, 2024

Multiple choice with multiple answers that are listed vertically.

Based on the existing values in the embedded data field as shown above, I want the appropriate radio buttons to be checked.   Hope that makes sense!!


Forum|alt.badge.img+21
  • QPN Level 5 ●●●●●
  • 306 replies
  • August 7, 2024

@RaghuA are you looking to pre-select the choices based on an embedded data, if yes then please check out a similar post.


chackbusch
QPN Level 5 ●●●●●
Forum|alt.badge.img+22
  • QPN Level 5 ●●●●●
  • 415 replies
  • Answer
  • August 7, 2024

@RaghuA This code works for me with classic layout: 

Qualtrics.SurveyEngine.addOnReady(function()
{
var dataClassification = "${e://Field/DataClassification}";

// Split the embedded data into an array
var options = dataClassification.split("|");

// Get the <ul> element containing the choices
var questionBody = document.getElementById(this.questionId);
var choiceStructure = questionBody.querySelector(".QuestionBody .ChoiceStructure");

// Iterate through each <li> element
var liElements = choiceStructure.querySelectorAll("li.Selection");

liElements.forEach(function(li) {
// Find the label text
var labelText = li.querySelector("span.LabelWrapper label span").textContent.trim();

// Check if the label text is in the options array
if (options.includes(labelText)) {
// Select the corresponding radio button
var inputElement = li.querySelector("input[type='checkbox']");
inputElement.checked = true;
}
});
});

Embedded data is defined before the question: 

That’s how it gets loaded: 

Please consider that this does not work if the texts of the multi select options are translated.

Best
Christian


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 4 replies
  • August 7, 2024
When I place the above JS code, I get the above error.  Please advise.  Thank you for your help.

 


chackbusch
QPN Level 5 ●●●●●
Forum|alt.badge.img+22
  • QPN Level 5 ●●●●●
  • 415 replies
  • August 7, 2024

@RaghuA Should not be due to the JavaScript but rather the question setup itself… There are plenty of community topics already when you search for “You are only allowed to use a subset of HTML markup tags.”. 


Forum|alt.badge.img+1
  • Author
  • Level 1 ●
  • 4 replies
  • August 7, 2024

@chackbusch - Yes, you were right!! The account manager was able to turn the html permission on and that seemed to fix the issue of being able to save the code snippet.  Thanks for your help.