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

Repeater Data

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

Questionnaire with repeater

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 

Make Single Choice widgets

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

Make question and answer widgets

2.  Create the four radio buttons as a dynamic panel and name the state as single choice. Add 2 new states: Multiple Choose, Blank Filling.

 

Repeater Table Data Settings

Repeater data

Type: Radio, Checkbox and Blank represent single choice, multiple choice and blank filling questions respectively.

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

Interactions Setup

Display different types of questions.

Set and 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

Hide blank widgets

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

Checkbox interactions

Checkbox interactions setting

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.

Radio interaciton setting

Similarly, the radio buttons are set in this way.

Blank interactions 

Blank interaction setting
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

Submit button interaction

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. 

Other interactions

Required symbo

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.

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


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


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.