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.
@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.
@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.”.
@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.