Solved
Help with JavaScript and piped text
I am creating a survey where participants are asked a question, for example:
"Do you believe this? (Check all that apply)" [this is a multiple-answers multiple choice question]
Option A
Option B
Option C
Option D
Option E
Then they are presented with a screen. This is all text (no questions). Essentially, the screen will say:
"Blah blah...Look at the options below. The first two options (font color is green)....and the last three options (font color is red)....The ones that are highlighted in yellow are the ones you selected. [I want the options to be listed in this order with the font colors, and highlighted based on their selection.]
Option A
Option B
Option C
Option D
Option E
I know there are ways to have the options they selected appear on a following screen using embedded data and piped text (e.g. https://www.qualtrics.com/community/discussion/2224/how-to-display-unselected-choices-from-one-question-in-a-list-view-using-descriptive-text-question), but I was wondering if you can just highlight the text based on the options they select in the previous multiple-answers multiple choice question.
I am new to java script and this coding stuff, so it would be great if anyone could help out.
Thank you sooo much!
Best answer by Anonymous
Hello @jess5 ,
Paste the below code in the next question("Look at the below options.....") js(OnReady) and replace the QID in the code with the previous question QID on line `var ac=` and `var sc=`
var ac= "${q://QID9/ChoiceGroup/AllChoices}";
var ac_array=ac.split(", ")
var sc="${q://QID9/ChoiceGroup/SelectedChoices}";
var sc_array=sc.split(", ");
console.log(sc_array);
var element="<span><ul style='color:red' id='customUl'>";
var i;
for( i=0;i<ac_array.length;i++){
if(sc_array.includes(ac_array[i])){
console.log(ac_array[i]);
element=element+"<li style='background:yellow'>"+ac_array[i]+"</li>";
}else{
element=element+"<li>"+ac_array[i]+"</li>";
}
}
jQuery(".QuestionText").append(element+"</ul></span>");
jQuery("#customUl li:eq(0)").css("color","green");
jQuery("#customUl li:eq(1)").css("color","green");
Output:
!
+20I think you don't need to have JavaScript for this. This can be done through "Rich content editor".
Since you already know how to piped-text the selected choice, so, you just have to go to rich content editor (below is the documentation...look for font style) and select the piped-text "code" which you want to highlight and use the font highlighter option from the tool.
https://www.qualtrics.com/support/survey-platform/survey-module/editing-questions/rich-content-editor/rich-content-editor-overview/#FormattingRichText
The font tools, like bold, works but not the highlighter option.
And my main concerns are 1) the options will not appear in that specific order from Choice A to Choice E (Instead I will have the list of the selected choices first and then the list of the unselected ones) and 2) the font colors of the options (green for the first 2 options and red for the last 3 choices).
Thank you!
+20The option will appear based upon the piped-text. If you keep selected choice piped-text first then all the options which were selected will be shown first in green (comma separated) and then the unselected choices piped-text, this will show all non-selected option in red (comma separated) However, if you need the option in individual line then we will have to use JavaScript else not.
Below is the preview link with line separated option:
https://qimpl.az1.qualtrics.com/jfe/preview/SV_8oJMarU8nht5LvL?Q_SurveyVersionID=current&Q_CHL=preview
!
This is what I am imagining...
Thank you!Hello @jess5 ,
Paste the below code in the next question("Look at the below options.....") js(OnReady) and replace the QID in the code with the previous question QID on line `var ac=` and `var sc=`
var ac= "${q://QID9/ChoiceGroup/AllChoices}";
var ac_array=ac.split(", ")
var sc="${q://QID9/ChoiceGroup/SelectedChoices}";
var sc_array=sc.split(", ");
console.log(sc_array);
var element="<span><ul style='color:red' id='customUl'>";
var i;
for( i=0;i<ac_array.length;i++){
if(sc_array.includes(ac_array[i])){
console.log(ac_array[i]);
element=element+"<li style='background:yellow'>"+ac_array[i]+"</li>";
}else{
element=element+"<li>"+ac_array[i]+"</li>";
}
}
jQuery(".QuestionText").append(element+"</ul></span>");
jQuery("#customUl li:eq(0)").css("color","green");
jQuery("#customUl li:eq(1)").css("color","green");
Output:
!
Hi again, I have a question I hope someone can answer. I followed the instructions above and they worked perfectly. The other day, however, I decided to add a timer to the same page that has the javascript. The texts appears all red. I have attached a screenshot of the screen. I did not change anything to the coding, so I was wondering how the timer could affect what appears, and if there is anything that could be done to make sure the text colors appear how I want it to (green for the first 2, red for the last 3).
THANK YOU again for the help.!
+27@jess5,
Change this line:
```
jQuery(".QuestionText").append(element+"</ul></span>");
```
to this:
```
jQuery("#"+this.questionId+" .QuestionText").append(element+"</ul></span>");
```
to make it specific to the question.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.