In this step-by-step guide, you will learn how to build an interactive quiz using Conditions. As soon as users select an option, the form immediately displays whether their answer is correct or incorrect.
Prerequisites and preparation
For this quiz example, create one form page per question with two answer options, along with two text elements for the feedback.
Creating question and feedback elements
In the Structure area, click the green plus sign and select Single choice.
Label: What is the capital of France?
Technical name:Question_01
Option A (Correct): Paris (Technical name: Correct)
Option B (Incorrect): Marseille (Technical name: Incorrect)
Below the single choice element, insert two Paragraph elements:
Paragraph-Element 1: Correct! Paris is the capital of France.(Technical name: NoteCorrect)
To ensure that the feedback remains hidden initially and only appears when the matching answer is selected, create a condition for each of the two paragraph text elements.
Condition 1: Feedback for the correct answer
In the Structure area, click the green plus sign and select Condition. Place it in the form tree directly underneath the Paragraph-Element 1NoteCorrect.
Name the condition NoteCorrectCondition.
Configure the outcome: If (Trigger): Select the Single choice element What is the capital of France?, the Operatoris selected and the ValueParis. Then (Outcome): Select the Paragraph element NoteCorrect and set the StateVisible.
Condition 2: Feedback for the incorrect answer
Add another Condition element. Place it in the form tree directly underneath the Paragraph-Element 1NoteCorrect.
Name the condition NoteIncorrectCondition.
Configure the outcome: If (Trigger): Select the Single choice element What is the capital of France?, the Operatoris selected and the ValueMarseille. Then (Outcome): Select the Paragraph element NoteIncorrect and set the StateVisible.
How the form behaves
With these two conditions in place, the following happens automatically:
Initial state: Since no answer has been selected yet, both feedback text blocks remain hidden.
Selecting "Paris": The Paragraph ElementNoteCorrect is displayed.
Switching to "Marseille": The Paragraph ElementNoteCorrect automatically disappears, and NoteIncorrect is displayed instead.
Finalizing your instant feedback quiz form
You have successfully set up the basic logic for an interactive quiz question!
Add more questions: Create a separate form page for each new question and repeat the steps from 'Creating Question and Feedback Elements' and 'Configuring Conditions'.
Save time by duplicating: Simply duplicate the finished form page, including its elements and conditions, within the form tree. Then, update only the question, answer options, and target values in the conditions.