Quiz Builder Component
The Quiz Builder component allows users to select a series of answers. Each answer is associated with a weighted outcome, and when the survey comes to an end, the component redirects the user based on the most represented outcome.
Events
Interaction
Click
Question Z
Mostly A
Outcome A
Mostly B
Outcome B
An Event allows you to trigger a transition to a component’s variant when a specific action happens. The Quiz Builder component accepts two types of events :
Click
Triggered when a user selects an answer.
Triggered when the user clicks one of the answers, it allows you to proceed to the next question.
Mostly A, B, C, D, E and F
Triggered when a click occurs, redirecting to the quiz outcomes.
The events Mostly A, Mostly B, …, Mostly F define the variants to which the component will redirect when the most represented value is A, B, …, or F.
Controls
Answers
The array that contains the answers as their parameters.
You can add as many answers as you want. Each answer contains the following parameters:
Outcome:
Outcome A, B, D, E, or F is attributed to the answer.
Label:
Text that will be displayed as the answer.
Weight:
Multiply the effect of the outcome.
Style
Styling that defines the default state of the answer's frame.
Hover
Styling that will override the default styling when the user hovers over an answer's frame.
Selected
Styling that will override the default styling when the user selects an answer's frame.
Behaviors
When are the answers reset?
The answers are reset every time the component is hidden, which means when "Visible" is set to "No," and when the Mostly event is triggered.
What happen when there is a draw?
The last answer that creates the draw prevails over the others, and its outcome is selected. For example, if the answers are A, B, A, B, C, the outcome will be B.
What happens if both Click and Mostly events are set?
The Mostly event has priority over the Click event. The Mostly event will be triggered, and the Click event will not.
What happens if there is no Mostly event set for the final outcome?
Nothing. Without an event set, any redirection will be triggered. It's important to set all the Mostly events according to your outcomes.
Copy the component