Theme:
The plugin offers 8 pre-designed quiz themes. Choose the one that suits your preferences by exploring the templates and their features:
- Elegant Dark: Dark background, light text, black buttons, and progress bar on the results page.
- Elegant Light: Light background, dark text, white buttons, and progress bar.
- Classic Dark: Dark background, orange text, blue buttons with hover effect, and progress bar. Checkbox questions have circled bullets.
- Classic Light: Light background, dark text, green buttons with hover effect, and progress bar. Checkbox questions have circled bullets.
- Rect Dark: Dark background, light text, blue answer boxes, buttons, and progress bar. Square bullets.
- Rect Light: Light background, dark text, light yellow answer boxes, buttons, and progress bar. Square bullets.
Animation effect:
Choose an animation effect for transitioning between questions. The available options are:
Click “Animate” to preview the effects and make your selection. If you prefer no animation effects, choose “None” from the Animation effect dropdown.
Quiz Color:
Select the color for the main elements of the quiz, including buttons, hover effects, and the progress bar. Adjust the opacity level if needed.
Background color:
Specify the background color of the quiz. Adjust the opacity level if needed.
Text color:
Specify the color of the text used for questions, answers, and result messages. Adjust the opacity level if needed.
Buttons text color:
Define the color of the buttons’ text in the quiz. Adjust the opacity level if needed.
Quiz width:
Set the width of the quiz in pixels or as a percentage. Leave the field blank for 100% width.
Quiz max-width for mobile:
Set the maximum width of the quiz for the mobile version as a percentage. Leave the field blank for 100% width. This option applies to screens with a width of less than 640 pixels.
Quiz min-height:
Set the minimum height of the quiz by entering a numeric value.
Quiz title transformation:
Choose how to capitalize the title text of your quiz.
- Uppercase: Convert all characters to uppercase.
- Lowercase: Convert all characters to lowercase.
- Capitalize: Capitalize the first character of each word.
Question image styles:
This setting applies to the images added to questions using the “Add Image” button on the Edit Question page.
- Image width (px): Set the width of the question image in pixels. Leave the field blank for 100% image width.
- Image height (px): Set the height of the question image in pixels.
- Image sizing: Configure the scaling of the images within the quiz:
- Cover: Resize the image to cover the entire container, trimming the object if necessary.
- Contain: Resize the image to fit fully within the container.
- None: Do not resize the image.
- Unset: The variable does not exist.
Quiz container border:
Add a border to the quiz container.
- Border width (px): Specify the width of the quiz container border in pixels.
- Border style: Choose the desired style for the quiz container border from the available options such as solid, dashed, dotted, double, groove, ridge, inset, outset, or none.
- Border color: Select the color for the quiz container border. Adjust the opacity level if needed.
Border radius (px):
Set a numeric value to make the corners of the quiz container more rounded.
Box shadow:
Apply a shadow effect to the quiz container.
- Box shadow color: Specify the color for the box shadow. Adjust the opacity level if needed.
Background image:
Choose a background image for the quiz by clicking on the “Add Image” button. The background-size is set to cover the entire container.
- Background image position: Set the position of the background image from the available options like left top, left center, left bottom, center top, center center, center bottom, right top, right center, or right bottom.
- Hide background image on result page: Disable the background image on the results page.
Background gradient:
Add a gradient background to the quiz.
- Color 1: Set the starting color value for the gradient background. Adjust the opacity level if needed.
- Color 2: Set the ending color value for the gradient background. Adjust the opacity level if needed.
- Gradient direction: Set the direction in which the gradient colors should flow, such as vertical, horizontal, diagonal (from left to right), or diagonal (from right to left).
Buttons position:
Specify the position of the buttons in the quiz.
- Center
- Left
- Right
- Space between
Progress bar style:
Set the design of the progress bar that appears on the results page, indicating the user’s score.
- Rounded
- Rectangle
- With stripes
- With stripes and animation
Custom class for quiz container:
Use your custom HTML class to add your own styles to the quiz container.
Answer font size (px):
Define the font size for the answers in your quiz. Please enter a numeric value in the field.
Question font size (px):
Define the font size for the questions in your quiz. Please enter a numeric value in the field.
Answer view (Pro):
Choose the layout for displaying the answers to the questions:
- List
- Grid
Disable answer hover:
Disable the hover effect for the answers.
Question text alignment:
Set the alignment for the text of your questions:
- Left
- Center
- Right
Answer object-fit (Pro):
Determine the size of the images attached to the answers. Choose from the following properties:
- Cover: Resize the image to cover the entire container. The object may be trimmed to fit.
- Fill: Resize the image to fill the entire container. The object may be stretched to fit.
- Contain: Resize the image to fit fully within the container.
- Scale-down: Rescale the image to a smaller size, either using contain or none.
- None: The image is not resized.
Answer padding (px) (Pro):
Specify the dimensions of the free space within the answer boxes by entering a numeric value.
Answer gap (px) (Pro):
Specify the size of the gap between answers by entering a numeric value.
Answer border (Pro):
Set borders for the answers.
- Border width (px): Specify the width of the borders for the answers in pixels.
- Border style: Select the desired style for the answer borders from options such as solid, dashed, dotted, double, groove, ridge, inset, outset, or none.
- Border color: Select the color for the answer borders. Adjust the opacity level if needed.
Answer box-shadow (Pro):
Apply a shadow effect to the answer boxes.
- Answer box-shadow color: Define the color of the shadow for the answer boxes. Adjust the opacity level if needed.
Answer image height (px) (Pro):
Specify the height of the images attached to the answers by entering a numeric value.
Show answer caption (Pro):
Display captions along with the images for the answers. This option only works when the answer has an image.
Caption style of the image answer (Pro):
Choose the preferred placement of the answers in relation to the images attached to them:
- Outside
- Inside
Caption position of the image answer (Pro):
Choose the preferred position of the answers in relation to the images attached to them:
- Top
- Bottom
Right/wrong answer icons:
Select the desired icons for indicating right or wrong answers.
- Show icons in the live preview
- Show icons for wrong answers in the live preview. If you enable the second option, please make sure to also enable the first option.
Button size:
Choose the default size for the buttons in your quiz:
- Small
- Medium
- Large
Button font-size (px):
Define the font size of the text inside the buttons. Please enter a numeric value. Note that the button size will adjust accordingly with the button text size.
Button width (px):
Set the width of the buttons in pixels. Leave the field blank for the default width.
Button padding (px):
Define the dimensions of the free space within the buttons by entering an appropriate numeric value.
- Left/Right
- Top/Bottom
Button border-radius (px):
Make the corners of the buttons more rounded by setting a numeric value.
Custom CSS:
Enter your own CSS code to apply custom styles.
