Build an Interactive Quiz Platform🚀

As a part of my 3-month programming challenge where i will be engaging in building projects every week. This week i have build a Quiz platform Not fully but this platform is gonna have questions like categorizing items based on the category and then answering the quesiton of the fill the blanks.This project was both fun and a challenging one, Here’s a deep dive into what i have built, the though process behind it, and the challenges I overcame along the way.

Project Overview

The Interactive Quiz platform is design to make learning engaging and interactive.It consist of features:

• Category-Based Questions: Here in this section, a user can give answer to the category based question its, like a admin will create the quiz with the category based and the user will answer it.eg: for the category of planet user will choose (earth , mars , neptue).

• Fill-in-the-blanks: This unique feature allow user to fit the word in the right place of the answer by filling the gaps in the sentence. User can drag the anser and put that anser to the correct position for the answer.

• Drag-and-drop: This feature makes the user involve and engaging in an interactive way. A user can drag and drop the answer to the right place.

• User-Friendly-Interface: For the start I have kept minimal simple interface which will make user easy to navigate.

Tech Stack Used

For this project I have used usual MERN stack for building user interface and a backend and databse. In addition of that I have used a library for the drag and drop feature in client side.

Read more about drag and drop library dndkit .

Feature in Detail:

1. Category Selection:

   • Upon landing on the platform, users are presented with various categories to choose from.

   • Each category contains a curated questions tailored to the theme.

2. Drag-and-Drop Functionality:

   • Certain questions are designed as fill-in-the-blank types.

   • Users can drag potential answers from a list and drop them into the appropriate blanks within the question.

   • Immediate feedback is provided on whether the answer is correct or not.

Key challenges and solution

1. Why this : I know this might seems funny that why i am mentioning this as a challenge why this ? Well this project of making an interactive quiz platform was given me in the form of assignment from my senior, and at that time i was facing lots of challenges like state management , how my states gonna be look like for category based question , fill in the blanks quesiton and many more. This was only the client side and then i again start pondering about how my data is gonna looks in my backend schema.But here am i I built it, its not the whole platform as it but able to implement main feature.

2. Implementing Drag-and-drop: When i saw the drag and drop feature for the first time, I have never use this feature in any of my project. And the day comes where i have to implement it. I learned drag-and-drop using a library called dndkit. There i learned the concept of draggable and droppable area where every droppable area is having unique id and every droppable object is gonna be placed over the droppable area. This library is pretty awsome and looking in future to use it and make more interactive and engaging feature.

3. Properly saving data and creating api endpoint: The challenging part here was how my database schema is gonna be like? Then i found a proper way of designing the database schema for both the category based question and the fill in the blanks. I have even created the endpoint for saving those data’s and reteriving the questions and answer from backend.

   
    // Category based question storing
    const mongoose = require("mongoose");
    const {Schema , model} = mongoose;
   
    const categoriesSchema = new Schema({
      index: {
        type: Number,
        required: true, // Ensures the index is mandatory
      },
      quizId:{
        type:String,
        required:true
      },
      question: {
        type: String,
        required: true, // Ensures the question is mandatory
      },
      categories: [
        {
          category: {
            type: String,
            required: true, // Ensures each category has a name
          },
          data: {
            type: [Schema.Types.Mixed], // Can hold an array of any type (e.g., strings, numbers, objects)
            default: [], // Defaults to an empty array if not provided
          },
        },
      ],
      createdAt:{
        type:Date,
        default:Date.now
      }
    });
   
    const CategoryModel = model("Category", categoriesSchema);
   
    module.exports = CategoryModel;
   

// Fill the blanks schema
const mongoose = require("mongoose");

const Schema = mongoose.Schema;

const FillInTheBlankSchema = new Schema({
  text: {
    type: String,
    required: true, // The full text with gaps, e.g., "<p>writing ____ and ____.</p>"
  },
  quizId:{
    type:String,
    required:true
  },
  blanks: [
    {
      position: {
        type: Number,
        required: true, // Index of the blank (e.g., 0 for the first blank)
      },
      correctAnswer: {
        type: String,
        required: true, // The correct answer for the blank
      },
      options: {
        type: [String], // Array of options for this blank
      },
    },
  ],
});

const FillTheBlankModel =  mongoose.model("FillInTheBlank", FillInTheBlankSchema);

module.exports = FillTheBlankModel;

4. Accessing any pages after deployment give error : The problem which i am facing after deploying my project through vercel, while accessing any particular page i am getting error from vercel like :

And to solve this i have found a solution that by createing a vercel.json file and puting the below codes we can solve it. After writing this code then redeploy your app and its solved.

// vercel.json
{
    "rewrites": [
      {
        "source": "/(.*)",
        "destination": "/index.html"
      }
    ]
  }

Future Improvements

1. Having more question : As of now its only one question for the category based question and the fill in the blanks type question but for further i am thinking of a user should be able to create multiple question based on category and the fill in the blanks.

2. Proper Message for the error and Score: I haven’t implmented this feature yet, its working normally like you create the quiz with basic question and not having proper handle for the user to get the proper information, even for the score one as well user is not able to view it i am thiking of improving it.

3. Analytics: For the better result i am thiknig of giving a proper analytics where user will be able to track the mistakes he has done and improve it.

4. Past quiz: I will be creating it like, a user can view all the different types of the quiz that has happen in the past and can hop into those test and give them.

5. Fun and engaging: Now comes the best part, I want to make it more engaging and interactive where user can interact and learn.

Deployment:

Now, comes the deployment phase of this project.Well the deployment is pretty simple like i have deployed my frontend to the vercel and the backend to the render. I am using the free tier of the render so its making it slow about 50 seconds to kickstart the server then its workign fine, that’s little absurd as i have to wait for 30 second then user will be able to view my project so i am thiking of shifting my backend deployment from render to microsoft azure cloud. For that i will have to learn how to properly deploy it there.

Conclusion

Building the Interactive Quiz Platform was an exhilarating journey, pushing me to think creatively and tackle technical challenges head-on. It's incredibly rewarding to see a project come to life and imagine the amazing impact it could have on users!

This week's project has set the bar sky-high for the next one. I can't wait to see what exciting ideas I come up with next in my 3-month programming adventure!. Stay tuned for more updates, and feel free to try out the platform here!

For contribution here is the repo: github