Questionnaire is a tool often used in user research. It is also a necessary skill for every user experience(UX) designer and product manager.
Today, I will teach you how to use the repeater to make a questionnaire, including single-choice, multiple-choice and blank filling questions.
The questionnaire content is generated through the repeater data form. You can generate different questionnaires by modifying this form, which is simple and fast.
Features to be Realized
1. The questionnaire includes single choice, multiple choice and blank filling questions.
2. After completing all the required questions, click the submit button to show the notice of successful submission.
3. If the required questions are not filled in, click the submit button to show an error notice.
How to Realize these Features
1. Make the main widgets of the questionnaire through the repeater. Display different widgets by judging the type of repeater.
2. By calculating the number of required questions and the number of completed required questions, judge whether all questions have been answered.
Preview the completed prototype for this tutorial
1. Make the basic structure of the table. Drag the required symbol *, question label, and four radio buttons into the canvas. Set radio group.
Repeater Table Data Settings
If it is radio or checkbox type, there are 4 answers. If it is a blank question, there are no answers.
Display different types of questions.
When each item of the repeater is loaded, judge the content of the Type column, and change the dynamic panel to the response state. If it is radio, change the text of the radios to the text of the repeater's item.
Hide Blank Choices
If the text of the choices is empty, hide it and push the right widgets.
Then there is the setting of checkbox. First, you need to add a Completed Number text field and a Required Number text text field to calculate whether all required questions have been answered. When the checkbox selection changes, we need to judge whether this item is required and whether at least one checkbox is checked. If so, the text field Completed Number + 1 and mark this row. If not, unmark the row and the text field Completed Number - 1.
These all four checkbox need to be set like this.
The Blank text box interaction is simpler. When the text changes, you only need to judge whether the number of text in the text box is greater than 0. If so, the text field Completed Number + 1 and mark this row. If not, unmark the row and the text field Completed Number - 1.
Submit Button Interactions
When the submit button is clicked, you need to judge whether the Required Number and the Completed Number are equal. If so, a success notice will be shown; if not, an error notice will be shown.
When each item of repeater is loaded, if Item.Required is equal to 1, then Required Number + 1.
In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.
If you like the article, please share it with others with page link, thanks for your supporting! ❤
Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.