Style Tab (part 2)

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.

What are your feelings
Scroll to Top