Difficulty | Medium |
Duration | 5 minutes |
In this step-by-step tutorial, we will show how you can use calculated fields to automatically score a quiz based on radio options. We will demonstrate this using a basic example of a form with five (5) radio questions.
Drag-and-drop a radio option into your form and configure the following setting on the component:
Label - This should be used to show the question.
Values - Within the data tab, use the values property to set the options to choose from. Note that the options have both a label and value property to allow you to display an option (label) but have a different value stored in the background. To follow along this tutorial we recommend setting the value field for each option to a, b ,c ect.
Property Name - Within the API tab there is a property name field which the is used to reference responses to questions in a JavaScript calculation (using data.propertyName syntax). To follow along with this tutorial we recommend setting the Property Name for each question to question1, question2, question3 ect.
Repeat the step above for each question you would like added to your quiz.
Drag-and-drop a number component into your form. This will be used to display the calculated score. Please note you can make this field invisible to users using the hidden property.
Within the number component setting navigate to the data tab and under calculated field enter the following JavaScript expression. The expression below checks if the response to each question is correct and increases the total score by 1 accordingly.
// Each correct answer gets a score of 1
// Incorrect answers get a score of 0
value =
(data.question1 === 'c' ? 1 : 0 )
+ (data.question2 === 'b' ? 1 : 0 )
+ (data.question3 === 'd' ? 1 : 0 )
+ (data.question4 === 'c' ? 1 : 0 )
+ (data.question5 === 'd' ? 1 : 0 )
You may need to adapt the expression below in the following ways:Modify
data.questionto match the Property Name of your question in step 1.Modify the if statement to match the correct answer to the question. Note that you need to use the value field (not label) to when checking the option.