Strategy for showing/hiding specific questions (when you have A LOT of them) based on URL params | XM Community
Skip to main content

I wanted to share my strategy since it took me forever (I’m fairly new to using Qualtrics though, that might definitely be part of it) to figure out in case anyone else is trying to do something like this. Also in case anyone has a better idea that makes things simpler (although I think the solution ended up being pretty simple!).

Problem

I have about 300 questions within a block and I need to show a subset of these to a survey-taker based on a URL parameter. Note that this subset is not predetermined, so participant A could get a URL param with 44, 92, 201 and B could get 1, 107 and I wouldn't know in advance.

Considerations

  • I know I could do Javascript logic for each individual question, but I have way too many and I didn’t want to go so far as to start editing the qsf files (not quite there yet on my Qualtrics journey).
  • Splitting each question into its own block wouldn’t make things that much easier since I’d still have to manually do branching logic and I don't want to do that 300 times.
  • I don't want to have to rely on known question IDs because I've been iterating on the questions in a TXT file and reuploading the whole thing because usually I'm changing something in many or all the 300 questions (in an automated way).

Solution

  1. Add a hidden div to each question with two class names: one that gets repeated for all (something like SpecialQuestion) and another one that's unique and has a custom ID that will show up in the URL parameter if the question is meant to be shown (something like SpecialQuestion-<ID>, where <ID> shows up in the URL parameter). This wasn't a lot of work because I have a script that outputs the questions in an importable .txt file.
  2. In the header (Survey > Look and feel > General > Header > code view) I added the following code (in a script tag, of course):
Qualtrics.SurveyEngine.addOnReady(function()
{
const customID = Qualtrics.SurveyEngine.getJSEmbeddedData("customID");
// parse the embedded data if necessary
jQuery(".QuestionOuter").each(function() {
if (
jQuery(this).find(".SpecialQuestion").length > 0
&& jQuery(this).find(".SpecialQuestion-" + customID).length === 0
) {
jQuery(this).hide();
}
});
});


And that's literally all I had to do!

What ended up taking the longest for me was debugging. I was using a template literal for the second find() (`.SpecialQuestion-${questionCode}`), which for some reason isn't supported, and I couldn't figure out why the hidden divs were ending up with the same two classnames (SpecialQuestion and SpecialQuestion-, with no ID after the -). I thought it was an issue with embedded data, but when I did old-fashioned string concatenation it worked.

Be the first to reply!

Leave a Reply