CODEWITHSUNDEEP
javascriptsurveyjs
brianfit
brianfit

Reputation: 1919

Using conditional page visibility in Surveyjs to branch survey paths

I am designing a survey which branches according to responses to each question by making a specific subsequent hidden page visible. I'm trying to use the fabulous surveyjs gui to design as much as I can before I dig in to tweak code.

In the first question, there are six checkbox answers to choose from, and each makes visible a single unique page. So far so good. My problem occurs with the second set of questions, which don't have that one-to-one relationship.

Multiple answers in the separate question sets can lead to the same page becoming visible.

So for example:

Question 1:
I prefer
-SWEET
-SOUR
-BITTER

If the answer is Sweet, the Sweet page becomes visible:

Question 2:
What's your favorite Sweet?
-Kit Kat
-M & Ms
-Sour Balls

If the answer is Sour, the Sour page becomes visible:

Question 2:
What's your favorite Sour Food?
-Limes
-Sourdough Bread
-Sour Balls

But once I've selected the "Sour Balls" page to become visible in a "previous" question, that page is no longer presented as an option to make visible in the GUI. That would make sense if a previous question would make the visibility redundant, but the first question BRANCHES the user, so that won't happen. If they choose option 2 in Question 1, the option 1 page and its response actions never happen.

In other words, when I try to add a Logic flow of If answer to question 2 is Sour Balls, make the Sour Balls page visible, the Sour Balls page option isn't presented because I've "Already" made it visible in a previous, possible answer to question 2.

Is this strictly a GUI issue I can fix, eg. by adding an "or" condition to the visibleIF in the JSON for each page that has multiple paths to its visibility?

Or am I doing branching coditionals wrong, and there's a better way than hiding/showing a page to create a logical flow in which many questions lead to non-unique pages?

Upvotes: 0

Views: 759

Answers (1)

brianfit
brianfit

Reputation: 1919

Well, I'm an idiot, but I'll post an answer here in case anyone else stumbles on this problem.

I added a second condition to one of the pages in the form of a boolean OR in the JSON

"visibleIf": "{FoodOptionsSweet} = ['SourBalls'] or {FoodOptionsSour} = ['SourBalls']",

and I noticed the GUI changed accordingly.

The key was not to add a new rule for a page that's previously made visible, but to go back to the first condition that took the page out of hiding, and add an OR operator and the second condition.

Dang. Powerful GUI. Smart coding.

Upvotes: 1

Related Questions