What is the Styles Settings tab of the Quizzes page about, and what options does it provide? We will talk about that in this article.
Quiz Styles #
- Theme
You can choose one of the theme options depending on the theme color of the background or the fields.
Please note that the results of using the following options will be displayed in the example quiz box in the right part.
- Quiz width
Here, you can choose the width of your quiz by pixels or by percentages (100% is the standard size that will be set automatically).
- Quiz max-width for mobile
With this option, you can set the maximum width of your quiz for mobile by pixels or percentages (100% is the standard size that will be set automatically).
- Quiz min-height
You can set a minimum height for your quiz by pixels or percentages.
- Quiz Color
Choose a color for your quiz. The quiz buttons will be in the selected color.
- Background Color
With this option, you can change the color of the background for your quiz.
- Text Color
Here, you can choose a color for the quiz text.
- Buttons text Color
Here, you can choose a color for the button texts of your quiz.
- Border radius
This option allows you to change the radius (in pixels) of the borders of the quiz, making them round.
- Box shadow
You can turn on this option if you want your quiz box to have a shadow. Then, you can choose the color and the three-dimensional parameters of the shadow.
- Background image
With this option, you can choose a background image for your quiz. You can also change the position of the image, concentrating it on the part you want.
With the next two checkboxes, you can choose not to display the image on the start or results pages. If you turn them on, your selected background color will be applied to the mentioned pages.
- Quiz background gradient
By turning on this option, you can choose two colors; the background of your quiz will consist of a mix of these colors. You can choose the direction of the gradient of colors.
- Quiz container border
Next, you can set a border for the quiz box. After turning on this option, you can choose the border width (in pixels), its style, and color.
- Quiz image height
With this option, choose the height of the images (in pixels) in the quiz.
- Progress bar style
If you have already set a progress bar that will be shown on the Finish Page of your quiz, then you can change its style with this option. You can see the selected style of the progress bar displayed below.
- Progress live bar style
If you have already set a progress live bar that will be shown during the quiz, then you can change its style with this option. You can see the selected style of the progress bar displayed below.
- Buttons position
Here, you can change the displacement of the buttons that will be shown in the quiz.
- Quiz title transformation
This option allows you to choose a capitalization of the title letters in your preferred way.
- Quiz title font size
Here, you can choose a font size (in pixels) for the title of your quiz. You can change it both for desktop and mobile options.
- Quiz title text shadow
You can also set a shadow for the title, change its title, and give three-dimensional parameters.
- Custom class for quiz container
If you want to add a custom style to your quiz container, you can add your HTML class in this field. In case of two or more classes, separate them with the Spacebar button.
Question Styles #
- Animation effect
This option allows you to choose an animation of the questions that appear. Click on the Animate! button beside it to see the effect of the animation in the right part.
- Question font size
Choose a font size (in pixels) for the questions. You can change the font both for desktop and mobile options.
- Question text alignment
Here, you can choose the position of the questions: Left, Center, or Right.
- Navigation bar style
With this option, choose the style of the navigation bar. The first checkbox is a Circle border, and the second one is a Border-Radius.
Here is an easy tutorial on how to make a quiz with a Navigation Bar for a WordPress Website.
- Questions Image Styles
This option is for the images of the questions set from the Edit Questions page. You can change their width (in pixels or percentages) and height (in pixels). Also, choose an image sizing option if the image sizes are relatively bigger.
Answers Styles #
- Answer font size
Choose the font size (in pixels) of the answers for both desktop and mobile options.
- Font size for the question explanation
Choose the font size (in pixels) of the question explanation that you have added from the Edit Page of the particular question for both desktop and mobile options.
- Font size for the right answer
Choose the font size (in pixels) of the messages for the correct answers that you have added from the Edit Page of the particular question for both desktop and mobile options.
- Font size for the wrong answer
Choose the font size (in pixels) of the messages for the incorrect answers that you have added from the Edit Page of the particular question for both desktop and mobile options.
- Answer view
Change the displacement of the answers with this option. You can change it either to List or Grid.
With the List checkbox, the answers will be displayed under another in one column. With the Grid checkbox, you can choose the number of columns that the answers will arranged in. In this case, you can also choose to display the answers in the list view for only text answers.
- Disable answer hover
With this option, you can turn off the hover mode. Nothing will change when the user hovers the answers with the cursor.
- Answer object-fit
Here, you can choose how to fit the images that you have already included in the questions.
- Answer padding
This option allows you to choose the width of the space (in pixels) of the answer boxes.
- Answer gap
With this option, you can change the distance (in pixels) between the answer boxes.
- Answer border
You can enable this option to set borders of the answer boxes. Then, you can choose the border’s width (in pixels), style, and color.
- Answers box shadow
You can choose to add a shadow on the answer options’ boxes.
- Answer image height
Here, you can change the height (in pixels) of the image contained in the answer.
- Show answer caption
Enable this option to display the caption of the answer which includes an image.
- Caption style of the image answer
Choose whether the caption of the image answer will be outside or inside the borders of the image.
- Caption position of the image answer
You can decide whether the caption of the image answer will be on the top or on the bottom.
- Right/wrong answer icons
Choose the style for icons that will be displayed for right or wrong answers.
You can also enable the live preview mode for those icons or only for the wrong answer icon.
Buttons Styles
Buttons Styles #
The adjustments of the options described below can be seen in the right part of the options in the plugin.
- Button size
There are three options for the sizes of the buttons in the quiz: Small, Medium, and Large.
- Button font-size
Choose the font size (in pixels) of the text written on buttons both for PC and mobile versions.
- Button width
With this option, change the width of the buttons (in pixels).
- Button padding
Choose the gap (in pixels) inside the button from the left and right sides or from the top and down.
- Button border-radius
Change the roundness of buttons with this option.
Admin note styles #
Admin note is the text in a question written by the admin. It can be added from the Settings Tab of the particular question.
- Font size for the note text
Choose the font size (in pixels) of the admin note text both for mobile and desktop versions.
- Text transform
Here, choose the capitalization of the letters of the admin note text; CAPITALIZED, Uppercase, or lowercase.
- Custom CSS
Add your CSS code to this field for any additional style changes in your quiz.
These were all the options in the Styles Tab of the Quizzes page.
Check these articles on the other tabs’ options:
