This visual quiz guides users through an interactive flow of ten questions and visual answers. Designed to easily be embedded onto your website, this design features questions beside the visual choices as well as expandable results on the final page.
To preview this creative, click here.
Because this Quick Start utilizes advanced logic, we have also put together a logic template to help you understand the inputs and outputs of this experience. Click here to review the logic template for the Visual Quiz.
Tips and Tricks
- At the top and bottom of each page, there is a thin line acting as a divider. To change or delete this line, it's easiest to select by navigating to the List tab in creative studio and finding the element labeled "Divider."
- This utilizes a half and half set up. This works well for many applications outside of quizzes. Utilize this quiz as a key takeaways section, a section to explore quotes with images beside them, and more. This layout has many possibilities!
- When setting up your questions, think about 2 images that go with your question. You’ll need two images for each question. Icons work as well as photography.
- Above the progress bar, your user can navigate back one step if they need to reconsider their previous answer.
- Need to remove questions from this assessment? Simply delete the flow step. It’s also a best practice to delete the related rule on the Results page. On each step, remove 1 gray block from the progress bar for each step you’ve removed.
- Need to add questions to this assessment? Copy one of the question flow steps and paste in the flow container. Don't forget to update the choice set data field. You’ll also want to add rules for your new questions on the Results page. You can use the other rules on the page as a guide. On each step, add 1 gray block from the progress bar for each step you’ve added.
- For more information about choices and choice groups, click here.
- In addition to adding or deleting rules for each question, you may also want to adjust the scale for each of the results. More on how the rules are set up in the logic template linked to above.
- On the results page, utilize the hero to provide a suggestion to your user.
- An accordion allows your user to review their answers and view the correct answer as well as a suggestion or more information about the question, paired with the image of the correct answer.
Since this experience is designed to be embedded, here are some support posts on that topic: