Weighted Quiz
Assign a specific weight to each option in your quiz, and display the outcome based on the cumulative total of these weights.
Attributes
Weighted Quiz
Utilize this feature to assign a numerical weight to each Radio Button option. The final total value will dictate the specific Div Block displayed.
To enable weighted quiz, add this to your Form element.
Custom <div> attributes
data-weighted-selection
=
true
Requirements
1. To guarantee the functionality of this feature, utilizing Radio Buttons is essential.
2. Within each question, the radio group name should remain consistent, yet each option should carry a distinct values.
3. This methodology ensures the uniqueness of each question and restricts users to a single option selection per question
You do not need FormlyLogic for this.
2. Within each question, the radio group name should remain consistent, yet each option should carry a distinct values.
3. This methodology ensures the uniqueness of each question and restricts users to a single option selection per question
You do not need FormlyLogic for this.
01
Radio Button Attribute
For each radio button, you need to give an attribute called 'data-selected' with a number you choose. This number is your weight.
Ensure your weight is expressed as an integer. You can use both negative (-1) and positive values (1).
Ensure your weight is expressed as an integer. You can use both negative (-1) and positive values (1).
02
Custom <div> attributes
data-selected
=
{your-weight}
Result Div attribute
You can show a Result Div based on the total of the weights from the options the user picks.
For example, if you have 3 questions and each has 2 options with weights 0 and 1, the total weights can be 0, 1, 2, or 3.
So, you can have 4 Result Divs, one for each possible total value.
For example, if you have 3 questions and each has 2 options with weights 0 and 1, the total weights can be 0, 1, 2, or 3.
So, you can have 4 Result Divs, one for each possible total value.
03
Custom <div> attributes
data-selection
=
{the-sum-weight}
Multiple Sum Values to Same Div
04
You can let many total values show the same final result, making your result section simpler. Use the vertical bar ( | ) to separate the different total values.
For example: 4|5|6|7
To turn on this weighted range feature, add this attribute to the Form element.
For example: 4|5|6|7
To turn on this weighted range feature, add this attribute to the Form element.
Custom <div> attributes
data-weighted-selection-range
=
true
Result Div attribute
05
You can group many total values to show one Result Div. For example, with 5 questions, each having 2 options with weights 0 and 1, the total weights can be 0, 1, 2, 3, 4, or 5.
You can set it up like this:
Show Div 1 if the user's total is 0, 1, or 2.
Show Div 2 if the user's total is 3 or 4.
Show Div 3 if the user's total is 5.
You can set it up like this:
Show Div 1 if the user's total is 0, 1, or 2.
Show Div 2 if the user's total is 3 or 4.
Show Div 3 if the user's total is 5.
Custom <div> attributes
data-selection
=
0|1|2
Custom <div> attributes
data-selection
=
3|4
Custom <div> attributes
data-selection
=
5
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