How to build dynamic multi-choice forms for quizzes and surveys in Momen

Introduction

Want to connect with your audience, gather valuable feedback, or just add a bit of fun to your website? Interactive quizzes and surveys are a fantastic way to boost engagement and learn more about your users.

This tutorial will guide you through creating a dynamic, multiple-choice form in Momen, suitable for building quizzes or surveys in your app.

Key Component

Select view is the key component in building this function. It handles displaying options and indicates selected states.

Step-by-Step Guide

Data Model

We need to create a question table and an answer table to store our questions and options.

For user's answer, we need to create an exam table to store their records and the details of their answer.

Exam: Store each records of user's participation.

Exam_answer: Store the options that user selected.

Relationship: Create a 1:N relationship between answer and exam_answer table. This allows you to retrieve user's selected options.

Page Configuration

1. Page Variables: Create two page variables to manage the quiz flow:

   1. exam_id: This will store the unique ID of the current quiz attempt (from the exam table).

   2. question_item: This will keep track of the current question number (starting at 1).

      

2. Conditional View: We'll use conditional view to control which part of the quiz is displayed at any given time.

1. Create a main container.

2. Inside the main container, create three child containers:

   • Start: This container will hold the "Start Quiz" button.

   • In Progress: This container will display the current question and its options.

   • Results: This container will show the final score or results.

     

3. Start Container Configuration:

   1. Add a Button component to this container.

   2. Set the button text to "Start Quiz".

   3. Style the button (e.g., color, size, font).

      

   4. Button Action: Configure the button's "On Click" action:

      

      1. Create Record: Add an action to create a new record in the exam table.

      2. On Success: After the record is successfully created:

         • Set Page Variable: Set the exam_id page variable to the result data of the newly created record.

           

         • Switch View: Change the displayed container to the In Progress container.

4. AnsweringContainer Configuration:

• Data Source: Add a data source that retrieves data from the Questions table.

  

  • Filter: Filter the data to show only the question whereid is equal to the question_item page variable. This ensures that only the current question is displayed.

    

• Display Question Text: Add a Text component to display the question.

  • Content: Set the text content to display the content from the Questions data source.

    

  • Style: Style the text appropriately and turn on the multi line option.

    

• Display Options: Add a Select View component to display the answer options.

  • Design:

    • Enable "Multi-line" for option text (to handle longer options).

      

    • Optionally, add borders or other styling to improve the visual appearance.

      

  • Data:

    • Data Source: Set the data source to the answer table.

    • Filter: Filter the options to show only those where question_question matches the question_id from the current question (obtained from the Question data source).

  • Action (On Click): Configure what happens when a user clicks on an option:

    • Create Record: Add an action to create a new record in the exam_answer table.

      • Set exam_exam to the value of the exam_id page variable.

      • Set exam answer_answer to the id of the selected option (provided by the Select View component).

        

        

  • Default state view:

    

    • Add a text, set content to item/content from the Select View.

    

    • Set the width to 100%, enable multi-line.

      

  • Selected state view:

    • The same as default state, but change the text color.

    

5. Results Container Configuration:

   • Data Source: Add a data source that retrieves data from the exam table.

     • Filter: Filter the data to show only the attempt where id is equal to the exam_id page variable.

   • Update Score : Go back to the answering container and the Select View's Insert data action. Add a Refresh Page action after creating the exam_answer record. This ensures that the score is updated after each question is answered.

     

   • Show Results: We need to automatically switch to the Results container when the quiz is finished. Go back to the Question data source. Add an When Success condition:

     • Condition: Check if the Question data source is empty (meaning there are no more questions to display).

     • Action: If the condition is true, switch the container to result.

       

   • Content: Add a text component. Set the text content to: Score followed by In Page Data - Data Source - exam - answers - count. Click on count and configure a filter: answer/is_correct is True

Resources

You can check our video tutorial for this project: https://youtu.be/d3f53WZ-FZ4

We just released our comprehensive courses. Learn to build a web app step by step here.