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.
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.
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
