How can I use JavaScript to only display embedded data based on previous answers in a survey? | XM Community
Skip to main content

I'm using piped text to show items on a "personalized checklist" on the final page of my survey using a text/graphic display question-type and based on previous answers on the survey. For example, Q. "what are the sources for agricultural water use on your farm?". If they select "well water" as one of their responses, 2 embedded data items should appear on their "personalized checklist" on the final page. If they select "stream or pond" another item should appear on the checklist. If they select "municipal water" then none of the other 3 "embedded data" items should appear on the checklist. So, although piped text is working correctly, it's not as clean looking because I have some "checkboxes" or "bullet points" with nothing after them, which may be confusing for some. I would like to completely hide the piped text embedded data fields if they don't select the item on the multiple-choice/multiple answer question. In the example below, the farmer selected "stream" as a water source, so there are 2 "blank" bullet points that are showing up above the last item on the list. (please pardon the variety of bullet styles in the image below; I'm also trying to figure out how to change my bullet-style to checkboxes instead of a "•")
Agricultural Water Checklist_surface water selected_2022-08-12.PNG

If you post your javascript and html code for the question, someone may be able to comb through it quickly to give you some pointers.


You could use JS to hide the blank list items:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" li").each(function() {
var li = jQuery(this);
if(li.text().length == 0) li.hide();
});
});


Leave a Reply