Adding quiz questions

Setting up quiz questions

Styling quiz questions

Quiz Questions element in Vev

👍🏽 Add quiz questions

  • From the top menu bar, click the Add Menu (Shortcut: M)

  • Search for and select Quiz Questions

  • Click and drag the element onto your canvas

Setting up quiz questions

Building a quiz question

The Quiz Questions element creates multiple-choice style questions. A multiple-choice question contains two parts: the question, and the set of responses. The Quiz Questions element only creates the set of responses. The question text itself is created using a basic text element.

Build longer multiple choice quizzes by dragging multiple pairs of Text Element + Quiz Questions onto your canvas. When users have finished answering all questions, use their total score to decide which page they should be sent to; this is done using another element called Quiz Submit Button.

Setting up Quiz Questions

Adding a Question Response option

  • Double click on the Quiz Questions element to open its settings

  • Click the Add item (+) button

  • Specify the response text

  • Define the response value

The weight value describes the influence it will have on the overall score accumulated among all quiz questions.

Adding a Question Response option

Scoring system

A weight-based scoring system is used to grade the response of users. When the user has responded to all quiz questions, the total score is calculated by adding up the scores of the user's chosen answers. This score is then sent to the "Quiz Submit Button" element. Read more on the Quiz Submit Button to see how you can use the user's total score to direct them to an appropriate URL.

🎨 Styling quiz questions

  • Background:

    • Container: Change the element's container background

    • Options: Change the background of the responses

    • Selected Checkbox: Change the background of the selected checkbox

    • Checkbox: Change the checkboxes' background

  • Text:

    • Options: Style the responses' text

    • Focused Options: Change the color of the responses when focused

    • Selected Option: Change the color of the responses when selected

    • Checkmark: Change the checkmark's color

  • Margin: Add margin to the checkboxes

  • Padding: Add padding to the responses

  • Border: Set a border color, opacity, and line weight for the responses and checkmarks

  • Icons:

    • Set custom shape: Replace the default icons with a shape or a custom SVG

    • Set custom image: Replace the default icons with an image

Styling Quiz Questions

Did this answer your question?