Creating a quiz form with instant answer feedback

Last updated:

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

  1. In the Structure area, click the green plus sign and select Single choice.
    1. Label: What is the capital of France?
    2. Technical name: Question_01
    3. Option A (Correct): Paris (Technical name: Correct)
    4. Option B (Incorrect): Marseille (Technical name: Incorrect)
  2. Below the single choice element, insert two Paragraph elements:
    1. Paragraph-Element 1: Correct! Paris is the capital of France. (Technical name: NoteCorrect)
    2. Paragraph-Element 2: Incorrect! Please try again. (Technical name: NoteIncorrect)

Configuring conditions

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

  1. In the Structure area, click the green plus sign and select Condition.
    Place it in the form tree directly underneath the Paragraph-Element 1 NoteCorrect.
  2. Name the condition NoteCorrectCondition.
  3. Configure the outcome:
    If (Trigger): Select the Single choice element What is the capital of France?, the Operator is selected and the Value Paris.
    Then (Outcome): Select the Paragraph element NoteCorrect and set the State Visible.

Condition 2: Feedback for the incorrect answer

  1. Add another Condition element.
    Place it in the form tree directly underneath the Paragraph-Element 1 NoteCorrect.
  2. Name the condition NoteIncorrectCondition.
  3. Configure the outcome:
    If (Trigger): Select the Single choice element What is the capital of France?, the Operator is selected and the Value Marseille.
    Then (Outcome): Select the Paragraph element NoteIncorrect and set the State Visible.

How the form behaves

With these two conditions in place, the following happens automatically:

  1. Initial state: Since no answer has been selected yet, both feedback text blocks remain hidden.
  2. Selecting "Paris": The Paragraph Element NoteCorrect is displayed.
  3. Switching to "Marseille": The Paragraph Element NoteCorrect 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!

  1. 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'.
  2. 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.

Feedback