How to change the separator for piped text | XM Community
Solved

How to change the separator for piped text

  • 29 November 2017
  • 7 replies
  • 121 views

Userlevel 7
Badge +7
Here is one that I have solved, and will post a solution after the beta finishes out, but till then would love to see everyone's solutions!

When using piped text, how can I change commas (or some other arbitrary character / value) to something else (line breaks, dashes, other words, etc.).

As I said, I have a solution, but I would love to see what you all come up with in the mean time.
icon

Best answer by AnthonyR 5 December 2017, 17:43

View original

7 replies

Userlevel 1
Badge +3
while we wait, can you share the use cases? You've got me curious about how you're thinking of the use for it? And how you're using it (not implementing)...
Userlevel 7
Badge +7
@MartyK
The most common use case I have seen is people wanting to display a list of selected options in a unique way. For instance instead of Dog, Cat, Bird, Fish; perhaps you want it to display as:

Dog
Cat
Bird
Fish

As for how to achieve this, first pip your text in to a div or span html tag with the class "CommaReplacement", for example:

`Your answers are: <div class='CommaReplacement'>${q://QID1/ChoiceGroup/SelectedChoices}</div>`

Then, add the following JavaScript to your questions JavaScript editor, updating the newDelimiter to your desired effect:

Qualtrics.SurveyEngine.addOnReady(function()
{
var textElements = this.questionContainer.select('.CommaReplacement');
var newDelimiter = "<br>"

for(var i = 0; i<textElements.length; i++){
var temp = textElements[i].innerHTML;
console.log(temp);
temp = temp.replace(new RegExp(", ", 'g'), newDelimiter);
console.log(temp);
textElements[i].innerHTML = temp;
}

});


This will also work with multiple "CommaReplacement" tags in the same question. However it will only affect the current question.

I have attached a QSF demo for this.
Hello, what should I do if I want to change only the commas in the piped text? I have attempted this method and it works only if I don't have other commas in the text. When I attempted to put the div around only the piped text, there is a space between the rest of the actual text. Please help me.
Userlevel 7
Badge +7
@Kai_Chizuru You can do exactly what you mentioned except instead of placing the piped text in a div, place it in a <span> using the same class name!
@AnthonyR - I tried your instructions for the e-mail trigger, however, I still get the horizontal list with the commas. Any ideas?
Badge

Hello,
Thanks so much for including this. It's working great for my survey. I have a question asking the user to select what they own among a long list of assets/debts. Then, on the follow-up question, I display all the assets/debts they indicated they own.
Is there a way to add a bullet in front of each of the selected options where I'm piping them?
So, in your example above, you would display:

  • Dog

  • Cat

  • Bird

  • Fish

Thanks!

Hello @Kai_Chizuru 
How did you solve this issue? I have the same problem, and I would like the comma to separate each option. For example: if a) dog,cat b) cat, dog
I want the result to be:
-dog, cat
-cat, dog

Leave a Reply