Building a personality quiz

The demonstration personality quiz shown in this article can be seen here:

Age Gate

If you wish to limit this social app to users of above a specific age, turn on this Age Gate. Age Gates are optional.

Users younger than the age you specify will be prevented from participating. Enter a URL to redirect those users to an explanatory page.

Layout & Design

HTML Block

Use HTML, CSS, and JS code to customize the look at the top of your social app. (Note: This is an advanced feature! Your code will not be fully 'error checked' here. So be sure to paste in code that has been fully debugged first.)


Select the type of header layout you want. Depending on the layout you select, you'll be asked to upload anywhere from one to three images for your header. Refer to the Design Guide for SocialFusion for more details about image size and layout.


Themes automatically change the app's background style and color.

Use the preview area on the left to see what content looks like in the theme you have picked.


Choose a color for the back of your engagement app. Choose transparent if you're planning to embed your app onto a web page that already has a background color or texture.


If you’d like to add additional copy below the header, you can toggle the ‘Optional paragraph’ ON and type what you would like to include. You can include basic HTML tags in the paragraph.

Quiz — Audiences

For the quiz, first define the Audiences that represent the answers for your quiz.

Each audience is effectively a 'bucket' into which visitors go, depending on the answers to questions.  You can add as many audiences buckets as you wish, though it's usually best to keep the number to just a few — definitely less than six. More than that, and the answers and numbers of questions becomes unwieldy.

In the example below for a demo travel brand, there are potentially three audience 'buckets' into which a visitor could fall: Thrill Seeker, Family Traveller, and Sun Worshipper.

Quiz — Images

Images can be associated with each question and, optionally, each answer. Images are optional, but make a personality quiz more compelling and interesting.

If you want to associate an image to a question simply upload an image. For best results, the image should be 700px wide, and 350px high.

If you want to associate images with each possible answer, check ON the box "Do you want images in each answer?" and then simply upload an image.

For best results, answer images should be at least 350px wide, and 350px high.  Try to keep the 'aspect ratio' of the image as close to 1:1 as possible to display images without cropped.


In the example below for a demo travel brand, images have been associated with the answers, but not with the question:

Quiz — Questions and answers

First, add the content of a question in the 'Edit the questions' field:

You can have as many questions as you want, but remember that visitors get tired after a few, so shorter is better! We recommend no more than 6–10. Visitors will answer more if the prize is really compelling!

Then, add all the potential answers. You can have as many answers as you want, but we recommend just a few. It gets unwieldy with more than three, and visitors are less likely to answer.

When you add an answer, you associate that answer with an audience. One answer can be associated with more than one audience and the Platform takes care of sorting out the results.

In the example below, the answer "Emergency snacks and diapers" is only relevant for the Family Traveller audience bucket. But "Backpack and camera" could be relevant to both Family Traveller and Thrill Seeker, so that answer was relevant to both those audience buckets.


Quiz — Optional form

You can optionally add a form at the bottom of your quiz. This form can collect entrant demographic information.  To add a form, turn that toggle ON and use the form builder to choose fields. This is useful if you are promising something in return for completing the quiz, and you want to collect information to deliver that 'something.' Or if you just want to exchange an answer for an email address.

However, again, more fields will represent friction. Only add those you absolutely want. The better the prize, the more likely visitors will complete the form.

Note that the quiz does minimal 'validation' on the form. If the email 'looks' like a valid email, it will be accepted. 

Save the quiz

Once you’ve added all of your questions, answers, and images press ‘Continue’ at the top right corner, then ‘Save’ to continue.

Configuring the quiz results page

Now you have to configure a page for every audience result, in exactly the same way as you configured the quiz pages.

(Here's where you find out that if you made 12 audiences, then you have to make 12 audience pages!)

Toggle through each audience in the menu bar, and configure each page.

For each results page:

  • You can customize the text that lives below the header. You can edit the title, the text below the title, and the link for the CTA (call to action) button.
  • You can customize the text that lives below the header. You can edit the title, the text below the title, and the link for the CTA button.
  • You can customize the CTA share so it will appear on Facebook the way you want it to.
  • There is an option to add share buttons to the bottom of the quiz so users can share the quiz to different social networks.
  • You can also add a ‘Follow us’ button at the bottom of the quiz and you can customize where this leads users.



End of Promotion Page

  • If your promotion has an end date, display the copy and/or graphics you'd like to display to any visitors who arrive after the promotion has ended.

Preview, publish and deploy the engagement app

Managing entries and picking winners

To manage contest / sweepstakes and pick winners, see the section "Choosing sweepstakes or contest winners" in the Content Moderation forum. 

Please visit "Personality Quiz Design Guide" for specific design guidelines.


Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk