--- title: "Design your quiz: layout, progress bar and buttons" description: "Change how questions, answers, the progress bar, ratings, swipe cards and product results look." url: https://scratcher.io/help/games/quiz-design language: en --- 1. [Help center](https://scratcher.io/help) 2. [Games and formats](https://scratcher.io/help/games) 3. Design your quiz: layout, progress bar and buttons # Design your quiz: layout, progress bar and buttons Change how questions, answers, the progress bar, ratings, swipe cards and product results look. Click a part of the quiz on the page to style it: the question, an answer, the progress bar or the result. ## Questions and answers - Fonts and colors for the question title and description. - **Layout**: show text answers as a **List** or a **Grid**. - **Prefix text answers with letters (A, B, C)**. - Colors for answered, correct and incorrect answers, used with **Show correct/incorrect answers**. - For image answers: **Images per row**, and in battles **Show battle images vertically**. - For battles: the **Versus text** and its font. - Gaps between the parts of a result: **Gap between title and description**, **Gap between content and button** and, for product results, **Gap between content and products** and **Gap between products**. ## Progress bar Turn on **Progress bar** and choose: - **Layout**: **Dots** or **Bar**. - Colors for **Inactive** and **Active** steps, **Size**, **Shape** and **Gap**. - **Position**: **Top** or **Bottom**, **Full width**, and **Show text** (for example "2 / 5"). ## Navigation In the quiz's **Settings**: - **Click button to continue**: people click a button after choosing an answer, instead of going on automatically. - **Show previous button** and **Allow participant to go to previous question**. ## Ratings and swipe - **Rating**: the selected and unselected images. - **Swipe**: **Show like/dislike buttons**, the **Like text** and **Dislike text**, and **Show question name above image**. Turn on **Use products for swipe** to swipe through your products. ## Product results For product recommendations: **Products per row**, **Show sale badge**, the text before and after sale prices, and which attributes to show (brand, gender, color, size). ## The result button The button on the result page can **Go to link**, **Go to next page** or **Go to page**. With the add-on **Reload page action**, it restarts the quiz. ## Parts you can style Click these parts of the quiz on the page to style them: - **Question**: **Title font**, **Description font**, the **Question image**, and in battles the **Versus font**. Video questions use a **Video URL**. - **Answers**: colors including **Correct background** and **Correct text**, and the **Answer image** for image answers. - **Finish button**: the button on the last question. - **Result**: the **Result image** (with **Gap between image and button**), **Gap between title and description** and **Gap between content and button**. - **Poll results**: **Show number of answers**, **Show percentage of answers**, **Gap between content and results** and **Gap between image and progress bar**. - **Product results**: **Show title before image**, **Hide horizontal line**, **Sale - before price text** and **Sale - after price text**. - **Result button**: the add-on **Reload page action** ("Reload the page when clicking this button"). Games and formats - [Which game should I choose?](https://scratcher.io/help/games/game-formats-overview) - [Scratch cards, wheels and other luck games](https://scratcher.io/help/games/luck-games) - [Spin the wheel: slices, design and settings](https://scratcher.io/help/games/spin-the-wheel) - [Scratch cards: cards, icons and cover](https://scratcher.io/help/games/scratch-cards) - [Slot machine, spin, dice and mystery box](https://scratcher.io/help/games/slot-spin-dice-and-mystery-box) - [Skill games: drop, memory, puzzle and more](https://scratcher.io/help/games/skill-games) - [Catch objects (drop) and hit the target](https://scratcher.io/help/games/catch-drop-and-hit-the-target) - [Smash it, tap it, memory, puzzle, match matrix and bubble shooter](https://scratcher.io/help/games/more-skill-games) - [Finish conditions, timer and points in skill games](https://scratcher.io/help/games/finish-conditions-timer-and-points) - [Quizzes and personality tests](https://scratcher.io/help/games/quizzes-and-personality-tests) - [Quiz questions and answers in detail](https://scratcher.io/help/games/quiz-questions-and-answers) - [Quiz results, branching and calculations](https://scratcher.io/help/games/quiz-results-groups-and-calculator) - [Design your quiz: layout, progress bar and buttons](https://scratcher.io/help/games/quiz-design) - [Polls, surveys, votes and product finders](https://scratcher.io/help/games/polls-surveys-and-product-finders) - [Advent and Christmas calendars: set one up step by step](https://scratcher.io/help/games/advent-and-christmas-calendars) - [Every calendar setting explained](https://scratcher.io/help/games/calendar-settings) - [The advanced calendar: a different game or prize behind every door](https://scratcher.io/help/games/advanced-calendar) - [Calendar problems and how to fix them](https://scratcher.io/help/games/calendar-troubleshooting) - [Leaderboards: rank players by points or time](https://scratcher.io/help/games/leaderboards-and-predictions) - [Score predictions for football and other sports](https://scratcher.io/help/games/score-predictions) - [Lucky number: let people enter a code to win](https://scratcher.io/help/games/lucky-number-codes) - [Countdowns, pre-registration and campaign ended pages](https://scratcher.io/help/games/special-pages) ## Related articles - [How element settings work](https://scratcher.io/help/elements/element-settings-basics): The Content, Styles, Settings and Effects tabs, sizes, shapes, borders, colors and backgrounds, mobile changes and add-ons. - [Quizzes and personality tests](https://scratcher.io/help/games/quizzes-and-personality-tests): Choose a quiz type, add questions and answers, set up results and result pages, or let AI write the questions. - [Quiz questions and answers in detail](https://scratcher.io/help/games/quiz-questions-and-answers): Answer types, images and video, multiple answers, correct answers and points, after-answer texts, colors and active periods. ## Still need help? Real people are here to help. If you already use Scratcher, the quickest way is the chat inside the platform. - **[Chat with us](https://platform.scratcher.io/login)** Log in and click the chat button in the bottom-right corner. Rex answers right away, and our team is a click away. - **[Book a meeting](https://scratcher.io/book-a-meeting)** A free 30-minute video call with our team: a tour, campaign ideas or help with your setup. - **[Email us](mailto:contact@scratcher.io)** Write to contact@scratcher.io and we will get back to you.