How to build a kind of survey feature for my product

Ask us anything How do I?
1

Hi all,

As you know survey product works first user prepares the question and defines the answer type such as multiple selection, date, free text, etc. Then the end user will answer it. My question is how do I build an end-user page based on the survey input type defined by the admin user? Conditional rendering is addressed for this issue?

Thanks in advance for any help.

2

Hey, you will need to have some kind of table structure in your backend:

Table: Surveys

  • id
    -name

Table: Questions

  • id
  • survey_id
  • title
  • type (enum of values such as ‘Free Text’, ‘Multiple Choice’, ‘Single Choice’, ‘Number’)
  • order (number)

Table: Choices

  • id
  • question_id
  • text

You would need to build an admin panel for creating these surveys.

I recommend using the kanban board (with a single stack) to list your questions.
You can have a button to add a question, the user selects the type and it gets added to the bottom of the kanban.

Depending on the type, you can show/hide different pieces of UI to allow configuration of each added question.

For choice questions, you will need an additional kanban board inside that allows to add/edit/re-order choices. It will pretty much work the same way as the main kanban.

As for displaying it to the user, it will simply require some kind of endpoint to retrieve the questions for a given survey, preferably in 1 request, you can decorate your response with the choices added to each question to avoid tens/hundreds of requests.

And it will work similar to the admin panel except no kanban needed.
This time, you will show/hide input fields / radio buttons / etc depending on the question type.

I usually also store the answers in a single variable and update it when a user types / selects something.

On page load you can generate this variable from your collection with the questions. It will need to look something like so:

{
    [
         "question_id": 1,
         "title": "My first question",
         "type": "Multiple Choice",
         "answer": "" //HERE YOU WILL UPDATE THE ANSWER ON INPUT CHANGE
         "choices": [
             }
                  "id": 1,
                  "text": "Choice 1",
                  "selected": false //TOGGLE THIS TO TRUE IF SELECTED
             },
             }
                  "id": 2,
                  "text": "Choice 2",
                  "selected": false //TOGGLE THIS TO TRUE IF SELECTED
             }
         ]
         //REST OF QUESTIONS...
    ]
}


//this took way too long, should of used a json editor...

…then you update the variable on change, use the handy ‘update one item’ and ‘path’ options to just update the index and thing you want.

1 Like
3

Thank you @AJAW for your invaluable feedback. It helps me a lot.

1 Like