FormlyQuiz
You can show a different final result based on the user's answers.
Attributes
FomlyQuiz
This feature takes all of the user's choices, and at the end, based on all the choices the user selects, it shows a final result for that selection path.
Use cases include quizzes, personality tests, eligibility checkers, lead qualifiers or product/service recommendations.
Requirements
To ensure the validation of the quiz, it is necessary to use radio buttons.
For each question, the radio group name should be the same but with different values assigned to each option.
This approach guarantees that each question is unique and that users can only select one option per question.
You do not need Logic for this.
For each question, the radio group name should be the same but with different values assigned to each option.
This approach guarantees that each question is unique and that users can only select one option per question.
You do not need Logic for this.
01
Radio Button Attribute
For each radio button, you will need to assign an attribute called 'data-selected' with a value of your choosing.
This parameter will be used to determine the final result to display.
This parameter will be used to determine the final result to display.
02
Custom <div> attributes
data-selected
=
{your-value}
Result Div attribute
To assign a final result to each possible combination of input selections made by the user, you must assign an attribute called 'data-selection' to each result.
The value of the 'data-selection' attribute should correspond to the path taken by the user, with each input selection separated by a comma.
For example, 'data-selection="yes,no,yes,no"' would correspond to the path where the user selects 'yes' for Q1, 'no' for Q2, 'yes' for Q3, and 'no' for Q4.
The value of the 'data-selection' attribute should correspond to the path taken by the user, with each input selection separated by a comma.
For example, 'data-selection="yes,no,yes,no"' would correspond to the path where the user selects 'yes' for Q1, 'no' for Q2, 'yes' for Q3, and 'no' for Q4.
03
Custom <div> attributes
data-selection
=
{the-path-taken}
Default Div attribute
To have a backup result, add this attribute to a Div Block. This Div will appear if the user's choices don't match any of your Result Divs.
04
Custom <div> attributes
data-selection
=
other
Multiple Paths to Same Div
05
Allow multiple combinations of selection paths to be directed to the same final result.
By using the vertical bar ( | ) to split the different paths.
Example: yes,yes,yes|yes,yes,no|yes,no,no
By using the vertical bar ( | ) to split the different paths.
Example: yes,yes,yes|yes,yes,no|yes,no,no
Custom <div> attributes
data-selected
=
{path-1|path-2|...|path-n}
Formly Quiz Cloneable (CMS Results)
The results are fully powered by the CMS. Depending on the user's choices, a final product, which is a CMS item, is displayed.
Join our awesome Slack community with over 300+ Webflow users!
Seek support, vote on new features, stay updated and network with other community members.
Join Slack community