Survey wizard similar to TurboTax

Hi,

I’m new to bubble and want to make sure I’m structuring the data correctly from the outset. I essentially want to replicate TurboTax’s wizard that walks users through different questions. I’m planning on using hidden groups and custom states to create the “wizard” functionality with tabs and buttons to navigate. The end goal is to aggregate all the questions and answers into a simple table with one question and corresponding answer per row. Think of the Google Forms spreadsheet output.

The question I have is how to structure the data. Specifically, what will be the “things”? Will questions be a thing with title and user response as fields? And does that mean each individual question (e.g. question #24 what is your favorite color?) is a separate “thing”?

Any ideas on how I should be thinking about this would be very helpful. Thanks for your help!

1 Like

Hi Justin,

There’s lots of different ways to design the database schema for this. It really depends on the type of questions your asking, etc. For example, if users can include multiple answers for some questions, then you most likely won’t want the question and answer listed as a single row in 1 large table.

Here’s some additional details about potential schema: http://stackoverflow.com/questions/1764435/database-design-for-a-survey

Best of luck!

Hello @justin,

Did you get any success with this TurboTax wizard?

Thanks.

@ryanck I’ve got something that is close. I use custom states, buttons, and collapsible groups. There are workflows on the buttons that increases or decreases the custom state of the parent group. I created a custom state (type integer) called “wizard state”. The buttons have workflows that increase/decrease the wizard state. Within the parent group, I have sub groups, each with a question and an input. I made sure to check the box to collapse the groups when not visible. I then use conditions on the individual question groups to hide/show, based on the “wizard state”.

For example, question #1 is visible when the wizard state is 1. When you click the “next” button, the workflow saves the data from question one and changes the wizard state to 2. This hides all the questions except for question #2. I have all my question groups arranged vertically within the parent group (this causes a lot of scrolling when you’re editing it), but if they are collapsible when not visible, the visible question rises to the top of the parent group.

I will say that there might be a more elegant way to do this. It probably involves using more than one page. You have to map out your questions/wizard states and it can be tedious if you need to insert a question into the middle. Anybody else have a better way of doing this?

That´s impressive.

Thanks a lot for sharing @justin

One way I’ve done similar it to have a single page with a URL parameter for the tab-number (or any terminology you want for the different views). This enables me to send people to specific pages from an external page quite easily.

Then, on the page itself I have a group for each view. So, group 1 would be displayed when the tab-number = 1 and hidden the rest of the time. Then, I just put all of the questions I want to be visible on that view onto that one group with a submit button at the bottom.

Using groups makes it much easier to control which items are visible and not visible since I don’t have to set-up new logic for everything, and instead have all of the logic in one place - at the group level.

This also makes it much easier to edit and maintain since I can toggle one group to be visible within bubble, then all of the related questions, text, buttons, etc. become visible within the editor.

2 Likes

@sridharan.s so you use URL parameters instead of custom states? Excellent idea! I didn’t know you could do that. :clap:

1 Like

I store the URL parameter as a custom state on page load. I suspect you can reference it directly though. I do like having a URL parameter though because it enables me to link to a specific portion of the wizard. I also use this for 1-page app concept so I can link to what seem to the user like different pages, but in fact are just different views on the same page.