Stores Gift Quiz

Create a quiz with your own questions.

Intermediate Last updated: 18 Mar 2025

Open Example Preview

About

In this example, we create an interactive quiz using a multi-state box with repeaters. We check quiz answers against a collection to generate personalized product recommendations, then use a repeater to display the recommended products from the Products collection.

APIs

• $w.Button API
• $w.Repeater API
• Data - Items
• Stores - Product

How we built it

We added the following to our site:

Page Elements

Home

• A multi-state box to display a different quiz question in each state.
• A repeater in each state of the multi-state box to display the possible responses for each quiz question.

Products

• A repeater to display product recommendations.
• A button to redirect to the Home page to restart the quiz.

Collections

Product keywords: A collection with the following fields:

• Product: A reference field that points to an item in the Products collection.
• Keywords: A list that contains a combination of quiz answers, representing different profiles of customers who might enjoy the corresponding product.
• Title: The name of the product.

Frontend Code

Home

The code in this file displays quiz questions and the possible responses, and gathers the responses selected by the customer.

In this file, we:

• Configure the repeater in each state to iterate through the possible responses and listen for an event handler.
• Add the selected responses to a keywords array.
• Store the responses temporarily using the Wix Storage API.
• Navigate to the products page using the Wix Location API.

Products

The code in this file retrieves the stored responses, finds which products to recommend to the customer, and retrieves and displays the data for those products.

In this file, we:

• Retrieve the keywords array containing the customer’s responses from Wix Storage.
• Use Wix Data to find the products to recommend, whose keywords in the Products Keywords collection include all the responses in the keywords array.
• Retrieve the data of those products from the Products collection.
• Display some of the products and their details using a repeater.

Code Snippets

Get Help

Join the community

Join the Wix Studio community on Discord, where experienced developers and fellow creators come together to share tips, troubleshoot issues, and collaborate.

Hire a developer

Building a coded solution on your own can be challenging. Let an experienced Wix developer build it for you, so you can keep working on your site or business. Visit the Wix Marketplace to find a trusted developer.