Axure Tutorial: Make Questionnaire with Repeater

Introduction

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.

Features Introduction

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

Widgets Setup 

1. Make the basic structure of the table. Drag the required symbol *, question label, and four radio buttons into the canvas. Set radio group.

If it is radio or checkbox type, there are 4 answers. If it is a blank question, there are no answers.

Interactions Setup

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.

If the text of the choices is empty, hide it and push the right widgets.

Checkbox interactions

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.

Blank interactions 

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. 

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.