Add 'and' before the last item in "Selected Items" piped text | Experience Community
Skip to main content
Question

Add 'and' before the last item in "Selected Items" piped text

  • July 6, 2020
  • 2 replies
  • 40 views
straister
Forum|alt.badge.img+2

I am asking a matrix question with a series of statements and three answer choices. If respondents select "A lot" or "Not at all" for any of the items, we are asking a follow-up question that amounts to:
"What about those things you said 'a lot' were good?" and "What about those things you selected 'not at all' for could be improved?"
There are many items and it would be excellent if I could add "and" before the last item. Right now they're just coming out as a comma separated list, which is fine, but it'd be cool to add the and with an oxford comma. Is there some simple javascript solution that could do this for me?
In case it's helpful there is a page break between the matrix and open-ended questions and I have a second set of each question if they only select one (that is, "What about that thing you selected" vs. "What about those things you selected") and I'd only need to add the "and" for the "I selected multiple items" questions.

2 replies

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • January 18, 2023

Hi there, if you still need, I was able to put this in place by tweaking ahmedA's code in this thread. This text can be stored in an Embedded Data field and then displayed to the respondent on the following page.
First, create an Embedded Data field called "displaytext" and put it at the top of the Survey Flow.
Then over in the Builder, create a Multiple Choice question that is set to Multiple Answers.
Add the below to the question's JavaScript.
Qualtrics.SurveyEngine.addOnPageSubmit(function (type) {

if (type == "next") {
        var selChoice = this.getSelectedChoices();
        var choiceRef1 = "";
        var choiceText1 = "";
var choiceRef2 = "";
        var choiceText2 = "";
var choiceText3 = "";
var choiceText4 = "";
var displaytext = "";
        for (let i = 0; i < selChoice.length - 1; i++) {
            choiceRef1 = "#" + this.questionId + "-" + selChoice[i] + "-label > span";
            choiceText1 += document.querySelector(choiceRef1).innerHTML + ", ";
choiceText2 = document.querySelector(choiceRef1).innerHTML;
        }
for (let i = 0; i < selChoice.length; i++) {
            choiceRef2 = "#" + this.questionId + "-" + selChoice[i] + "-label > span";
            choiceText3 = " and "+document.querySelector(choiceRef2).innerHTML;
choiceText4 = document.querySelector(choiceRef2).innerHTML;
        }

if (selChoice.length > 2) {
displaytext = choiceText1 + choiceText3;
}

if (selChoice.length == 1) {
displaytext = choiceText4;
}

if (selChoice.length == 2) {
displaytext = choiceText2 + choiceText3;
}

console.log(displaytext);

Qualtrics.SurveyEngine.setEmbeddedData("displaytext",displaytext);

}

});
Finally, in the question that comes on the page after this, use the Rich Content Editor to pipe in the Embedded Data field "displaytext"
ANDtext.png

Tom_1842
Level 8 ●●●●●●●●
Forum|alt.badge.img+28
  • Tom_1842
  • Level 8 ●●●●●●●●
  • January 19, 2023

I read your question again and realized that you weren't using Multiselects, so the code I posted won't really work for you. Instead, the below should work for any question type. It turns a comma separated list into an array and then uses a function to add ', and' before the last item if there are more than 2 items. I found it here.
First, create the Matrix question, add a page break, and create a question after the page break. On the following question, use the Rich Content Editor to grab the Piped text for the selected answers from the Matrix question. For testing, you might also insert this Piped text into the Question Text, like I did in the below example.
Still in the Rich Content Editor for the following question, use the HTML/Source view "<> to add an HTML element with the ID of "displaytext1".
Click to write the question text




${q://QID10/ChoiceGroup/SelectedChoicesForAnswer/1}


 

 


Finally, add the below to the question's JavaScript in the OnReady section, updating the choices1 var with the Piped text for the selected answers:
function makeString(arr) {
  if (arr.length === 0) return '';
  if (arr.length === 1) return arr[0];
  if (arr.length === 2) return arr[0] + ' and' + arr[1];
  const firsts = arr.slice(0, arr.length - 1);
  const last = arr[arr.length - 1];
  return firsts.join(' ,') + ', and' + last;
}

var choices1 = "${q://QID10/ChoiceGroup/SelectedChoicesForAnswer/1}";
var array1 = choices1.split(',');
var displaytext1 = makeString(array1);
console.log(displaytext1);

var displaytext1id = document.getElementById('displaytext1');
displaytext1id.innerText = displaytext1;
ANDtext2.png

Terms & ConditionsAccessibility statement