Seven ways to style your quiz

By Joanna, FlexiQuiz.
4 minute read.

Do you want to create awesome-looking quizzes, tests, and assessments?

If your answer is yes, then FlexiQuiz is the perfect quiz maker for you.

We provide users with a simple page template that is fully customizable so that you can style almost any part.

You can quickly and easily create any quiz or assessment - from a lead generation quiz with a wow factor, entertaining pub quiz, or formal examinations.

If your online tests, exams, or quizzes look attractive and professional, then students, employees, customers, and quiz takers are more likely to engage.

This article talks you through 7 features that can help you style unique and engaging quizzes.

1. Change background colors

Background colors are a great way to reflect the subject of your quiz and your company branding.

Color is a powerful element of any creativity, including quizzes; as Pierre Bonnard once said, "Color does not add a pleasant quality to design - it reinforces it."

With FlexiQuiz, you can change the color of various elements of your quiz pages, such as the center, sides, footer, header, or timer.

You can pick a background color from the FlexiQuiz color pallet, or if you already know the color, you would like to use, simply add the HEX code. Your chosen color scheme is automatically applied across all pages on your quiz.

To update the background colors on your quiz, go to the Theme screen and select the element you would like to change.

2. Add background images

Background images, icons, or photos can make your quiz look more exciting and help engage test-takers.

With FlexiQuiz, you can add a different image to various pages on your quiz, including welcome, thank you, sell, quiz and results.

This guide shows the detailed steps on how to add background images to your quizzes.

Top tips when adding a background image to your quizzes:

• Ensure your text can be easily read on all parts of the image - it's worth checking out the fonts section in this article.
• Choose an image layout option and check how it will look on various devices.
• Fore some awesome images, check out Unsplash or Pixabay. Please remember to check the licensing requirements.

3. Update fonts

Fonts can help set the tone of your quiz to bring your questions to life. Some say, "the font is equivalent to the tone of voice in verbal speech.

FlexiQuiz offers all users a choice of nine font styles, with various color and sizing options. You can also bold text and change it to italic.

Fonts can be updated individually on all pages, including the welcome screen, question pages, results, and thank you screen.

Paid plan members can also update all fonts from the Theme screen.

For a superb choice of fonts, Enterprise customers can choose from over 1,000 google fonts, applied using the CSS editor.

Contact us to find out how to use google fonts on your quizzes.

4. Customize navigation buttons

Although small, navigation buttons are essential, and how they look should not be overlooked.

Navigation buttons guide participants through the quiz so to ensure test-takers have a great experience. The buttons must show the right message and compliment the overall theme of your examination.

You're able to customize the buttons in various ways:

• Change colors.
• Update the standard text to reflect your messaging and language.
• Position the buttons on the left or right-hand side of the page.
• Pick from a flat or gradient design.

You can customize all of these elements of the navigation buttons from the Theme screen on each quiz.

5. Add a logo

Logos are a great way to advertise your organization, build trust, and provide a consistent message for test-takers.

FlexiQuiz provides a choice of ways to place and size your logo to help you reflect your organization's brand guidelines.

You can add your logo to the quiz in these places:

• The top of all pages on the left, middle, or right-hand side.

  This guide shows you how to add a logo to the top of your pages.

• Add a logo as part of a background image - this could be full color or semi-transparent.
• Personalize the Respondent portal with your logo so when test-takers log in to view your tests, they can easily recognize that they are in the right place.

Top tip! When sizing your logo, we recommend using Chrome or Firefox as it's easier to drag your image to the required size.

You can also remove the FlexiQuiz branding from the footer on all quizzes by going to the Configure/ General screen. You need to untick the box FlexiQuiz link.

6. Select a layout of the quiz

The quiz layout can help test-takers digest and understand key information.

With FlexiQuiz, you have various options to show your quiz. For example:

• Horizontal or vertical display.
• The number of questions per page.

7. Custom CSS code

CSS code is an Enterprise feature that enables you to customize further your test to match your quiz requirements and organization brand.

Using CSS code, you can change the size of the fill-in-the-blanks boxes, google fonts, and more.

If you have an Enterprise plan, please contact us to see if we have a CSS code to help.

Top tips and hints when styling your quiz!

• Don't copy and paste your text directly from a word document. We do offer a file upload option if you're looking for a fast way to add questions.
• To check how your quiz looks at any time, press Preview on the top right of the page.
• Once you set up your Theme you can easily save it for future quizzes:
  • Create and style your quiz with at least one question - save this as a template.
  • Every time you would like to generate a new test, go to your main dashboard and copy the original version.

We hope that this inspires you to get creative when building your next quiz, test or assessment.