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