Skip to main content
Quiz Questions

Create multiple-choice style questions. Use the Quiz Submit Button element to send the user to a targeted page based on their quiz score.

Diego Muralles avatar
Written by Diego Muralles
Updated over 5 months ago

Quiz questions allow you to create interactive quizzes that can engage your audience, test knowledge, and provide a dynamic learning experience directly on your website.

Quiz Questions element in Vev

Setting up quiz questions

Building a quiz question

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

Create extended multiple-choice quizzes by dragging and dropping multiple text components and Quiz Questions onto your canvas. Once users have completed all questions, their total score can be used to direct them to a specific page. This is achieved using an additional element called the 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 indicates the influence a specific question will have on the overall score accumulated across all quiz questions.

Scoring system

A weight-based scoring system is used to grade users' responses. Once all quiz questions have been answered, the total score is calculated by summing the scores of the selected answers. This score is then sent to the 'Quiz Submit Button' element. For more information on how to use the user's total score to direct them to a specific URL, please refer to the documentation on the Quiz Submit Button.

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

Did this answer your question?