Building Interactive Quiz And Assessment In MERN Stack Course Management App

Last Updated : 23 Jul, 2025

Interactive quizzes and assessments have emerged as powerful tools to enhance student engagement, reinforce learning, and provide instant feedback. This article explores the significance of interactive quizzes and assessments, their benefits, and how they can be effectively implemented in educational settings.

The Importance of Interactive Quizzes

Interactive quizzes are more than just tools for evaluation; they serve as dynamic learning experiences. Unlike traditional assessments that often lead to rote memorization, interactive quizzes foster critical thinking, problem-solving skills, and active participation. They can transform passive learners into active participants, encouraging them to engage with the material in meaningful ways.

Benefits of Interactive Assessments

  • Immediate Feedback: One of the key advantages of interactive quizzes is the ability to provide instant feedback. Students receive immediate results, allowing them to understand their strengths and weaknesses in real time. This timely feedback helps them adjust their learning strategies accordingly.
  • Enhanced Engagement: Interactive quizzes often incorporate multimedia elements such as videos, images, and gamified components, making the learning process more enjoyable. This increased engagement can lead to higher retention rates and improved academic performance.
  • Adaptive Learning: Many interactive assessment tools use algorithms to adapt the difficulty of questions based on a student's performance. This personalized approach ensures that learners are challenged appropriately, preventing frustration or boredom.

Approach to implement Quiz and Assessment

Backend

  • Define Quiz Schema: The quizSchema outlines the structure of a quiz, including its title, questions, options, and the correct answer for each question, and is exported for use in the application.
  • Create a New Quiz: The createQuiz function accepts quiz data from the request body, saves a new quiz to the database, and returns the saved quiz as JSON.
  • Get All Quizzes: The getQuizzes function retrieves all quizzes from the database and returns them as JSON.
  • Get Quiz by ID: The getQuizById function checks if the provided ID is valid, retrieves the corresponding quiz, and returns it; if not found, it returns a 404 status.
  • Submit Quiz Answers: The submitQuiz function calculates the score based on the submitted answers compared to the correct answers stored in the quiz, returning the score and total questions.

Frontend

  • Quiz Component: The Quiz component fetches a list of available quizzes from the backend API and displays them in a grid format; while loading, it shows a spinner.
  • Quiz Card: Each quiz card displays the title and a short description, with a "Take Quiz" button that links to the quiz details page.
  • QuizList Component: The QuizList component retrieves a specific quiz by ID from the API and displays its questions and options using radio buttons for user selection.
  • Handle Submission: On submitting answers, the component sends the selected answers to the backend and updates the user's score based on the quiz results.
  • Display Score: After submission, the score is displayed, showing the user their performance compared to the total number of questions in the quiz.

Backend Example

JavaScript 
// app.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const user = require('./routes/userRoute')
const course = require('./routes/courseRoutes');
const ErrorMiddleware = require('./middleware/Error');
const cookieParser = require('cookie-parser');
const enrollment = require('./routes/enrollmentRoutes')
const quiz = require("./routes/quizRoutes")
const instructorRoutes = require('./routes/instructorRoutes');


const cors = require('cors')


app.use(cors({
    origin: ['http://localhost:3000'],
    methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
    allowedHeaders: ['Content-Type', 'Authorization'],
    credentials: true,
}));

app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser())

app.use('/api/v1', enrollment)
app.use('/api/v1', user);
app.use('/api/v1', course)
app.use('/api/v1', instructorRoutes);
// Quiz
app.use('/api/v1', quiz);

app.use(ErrorMiddleware);

module.exports = app;
JavaScript 
// server.js

const app = require("./app")
const { config } = require("dotenv")
const database = require('./config/database');
const cloudinary = require('cloudinary').v2;

database.connectedToDatabase();

config({
    path: './config/config.env'
})

app.listen(process.env.PORT, () => {
    console.log(`Server is Running at ${process.env.PORT}`);
})
JavaScript 
// models/quizess.js

const mongoose = require('mongoose');

// Define the schema for the quiz
const quizSchema = new mongoose.Schema({
    title: { type: String, required: true },
    questions: [
        {
            questionText: { type: String, required: true },
            options: [{ type: String, required: true }],
            correctAnswer: { type: String, required: true }
        }
    ]
});

module.exports = mongoose.model('Quiz', quizSchema);
JavaScript 
// controllers/quizController.js

const Quiz = require('../models/quizess');
const mongoose = require('mongoose')

// Get all quizzes
exports.getQuizzes = async (req, res) => {
    try {
        const quizzes = await Quiz.find();
        res.json(quizzes);
    } catch (error) {
        res.status(500).json({ error: 'Server error' });
    }
};

// Get a quiz by ID

exports.getQuizById = async (req, res) => {
    const { id } = req.params;

    if (!mongoose.Types.ObjectId.isValid(id)) {
        return res.status(400).json({ message: "Invalid ID format" });
    }

    try {
        const quiz = await Quiz.findById(id);
        if (!quiz) {
            return res.status(404).json({ message: "Quiz not found" });
        }
        res.status(200).json(quiz);
    } catch (err) {
        res.status(500).json({ message: "Server error", error: err.message });
    }
};



// Create a new quiz
exports.createQuiz = async (req, res) => {
    try {
        const newQuiz = new Quiz(req.body);
        const savedQuiz = await newQuiz.save();
        res.json(savedQuiz);
    } catch (error) {
        res.status(500).json({ error: 'Server error' });
    }
};

// Submit answers and get the result
exports.submitQuiz = async (req, res) => {
    try {
        const { quizId, answers } = req.body;
        const quiz = await Quiz.findById(quizId);

        if (!quiz) {
            return res.status(404).json({ error: 'Quiz not found' });
        }

        let score = 0;
        quiz.questions.forEach((question, index) => {
            if (question.correctAnswer === answers[index]) {
                score += 1;
            }
        });

        res.json({ score, total: quiz.questions.length });
    } catch (error) {
        res.status(500).json({ error: 'Server error' });
    }
};
JavaScript 
// routes/quizRoutes.js

const express = require("express");
const { getQuizzes, getQuizById, createQuiz, submitQuiz }
    = require("../controllers/quizController");

const router = express.Router();

// Route to get all quizzes
router.get("/quiz", getQuizzes);

// Route to create a new quiz
router.post("/quiz", createQuiz);

// Route to submit quiz answers
router.post("/submit", submitQuiz);

// Route to get a single quiz by ID
router.get("/quiz/:id", getQuizById);

module.exports = router;


Start using the below command

node index server.js

Frontend Example

JavaScript 
// App.jsx

import React from 'react';
import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
import Home from './components/Home/Home';
import Header from '../src/components/Layout/Header/Header'
import Courses from './components/Courses/Courses';
import Footer from './components/Layout/Footer/Footer';
import Login from './components/Auth/Login';
import Register from './components/Auth/Register';
import Contact from './components/Contact/Contact';
import Request from './components/Request/Request';;
import CoursePage from './components/CoursePage/CoursePage';
import Profile from './components/Profile/Profile';
import Users from './components/Admin/Users/Users';
import EnrollmentForm from './components/Auth/EnrollmentForm';
import Quiz from './components/Quiz/Quiz';
import QuizList from './components/Quiz/QuizList';


function App() {

    return (

        <Router>
            <Header />
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/courses' element={<Courses />} />
                <Route path='/course/:id' element={<CoursePage />} />
                <Route path="/quiz" element={<Quiz />} />
                <Route path="/quiz/:id" element={<QuizList />} />
                <Route path='/contact' element={<Contact />} />
                <Route path='/request' element={<Request />} />
                <Route path='/login' element={<Login />} />
                <Route path='/signup' element={<Register />} />
                <Route path='/enroll' element={<EnrollmentForm />} />
            </Routes>
            <Footer />
        </Router>
    );
}

export default App;
JavaScript 
// src/componennts/Header/Header.jsx

import React from "react";
import { ColorModeSwitcher } from "../../../ColorModeSwitcher";
import {
    Button,
    Drawer,
    DrawerBody,
    DrawerContent,
    DrawerHeader,
    DrawerOverlay,
    HStack,
    VStack,
    useDisclosure,
} from "@chakra-ui/react";
import { RiDashboardFill, RiLogoutBoxLine, RiMenu5Fill } from "react-icons/ri";
import { Link } from "react-router-dom";

const LinkButton = ({ url = "/", title = "Home", onClose }) => (
    <Link to={url} onClick={onClose}>
        <Button variant={"ghost"}>{title}</Button>
    </Link>
);

const Header = () => {
    const { isOpen, onOpen, onClose } = useDisclosure();
    const isAuthenticated = true;
    const user = {
        role: "admin",
    };
    const logoutHandler = () => {
        console.log("Succefull");
    };
    return (
        <>
            <ColorModeSwitcher />
            <Button
                onClick={onOpen}
                colorScheme="yellow"
                width={"12"}
                height={"12"}
                rounded={"full"}
                zIndex={"overlay"}
                position={"fixed"}
                top={"6"}
                left={"6"}
            >
                <RiMenu5Fill />
            </Button>
            <Drawer placement="left" onClose={onClose} isOpen={isOpen}>
                <DrawerOverlay />
                <DrawerContent>
                    <DrawerHeader borderBottomWidth={"1px"}>BUNDLER</DrawerHeader>

                    <DrawerBody>
                        <VStack spacing={"4"} alignItems={"flex-start"}>
                            <LinkButton onClose={onClose} url="/" title="Home" />
                            <LinkButton
                                onClose={onClose}
                                url="/courses"
                                title="ALL Courses"
                            />
                            <LinkButton
                                onClose={onClose}
                                url="/quiz"
                                title="Quiz & Assessment"
                            />
                            <LinkButton
                                onClose={onClose}
                                url="request"
                                title="Request Courses"
                            />
                            <LinkButton
                                onClose={onClose}
                                url="/resource"
                                title="Resource & Material"
                            />
                            <LinkButton
                                onClose={onClose}
                                url="/posts"
                                title="Forum & Discussion"
                            />
                            <LinkButton onClose={onClose} url="/contact" title="Contact" />
                            <LinkButton onClose={onClose} url="/about" title="About" />

                            <HStack
                                justifyContent={"space-evenly"}
                                position={"absolute"}
                                bottom={"2rem"}
                                width={"80%"}
                            >
                                {isAuthenticated ? (
                                    <>
                                        <VStack>
                                            <HStack>
                                                <Link to="/profile" onClick={onClose}>
                                                    <Button colorScheme="yellow" variant={"ghost"}>
                                                        Profile
                                                    </Button>
                                                </Link>
                                                <Button variant={"ghost"} onClick={logoutHandler}>
                                                    <RiLogoutBoxLine />
                                                    Logout
                                                </Button>
                                            </HStack>
                                            {user && user.role === "admin" && (
                                                <Link to={"/admin/dashboard"} onClick={onClose}>
                                                    <Button colorScheme="purple" variant={"ghost"}>
                                                        <RiDashboardFill style={{ margin: "4px" }} />
                                                        Dashboard
                                                    </Button>
                                                </Link>
                                            )}
                                        </VStack>
                                    </>
                                ) : (
                                    <>
                                        <Link to="/login" onClick={onClose}>
                                            <Button colorScheme="yellow">Login</Button>
                                        </Link>
                                        <p>OR</p>
                                        <Link to="/signup" onClick={onClose}>
                                            <Button colorScheme="yellow">Sign up</Button>
                                        </Link>
                                    </>
                                )}
                            </HStack>
                        </VStack>
                    </DrawerBody>
                </DrawerContent>
            </Drawer>
        </>
    );
};

export default Header;
JavaScript 
// src/components/Footer/Footer.jsx

import { Box, HStack, Heading, Stack, VStack } from "@chakra-ui/react";
import React from "react";
import {
    TiSocialYoutubeCircular,
    TiSocialInstagramCircular,
} from "react-icons/ti";

const Footer = () => {
    return (
        <Box
            position="flex"
            bottom="0"
            left="0"
            right="0"
            padding="4"
            bg="blackAlpha.900"
            minH="10vh"
        >
            <Stack direction={["column", "row"]}>
                <VStack alignItems={["center", "flex-start"]} width="full">
                    {/* Add any content you want in the VStack */}
                </VStack>
                <Heading children="All Right Reserved" color="white" />
                <Heading children="@Course" fontFamily="body" color="yellow.400" />
                <HStack
                    spacing={["2", "10"]}
                    justifyContent="center"
                    color="white"
                    fontSize="50"
                >
                    <a
                    href="https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fwww.youtube.com%2Fsignin%3Faction_handle_signin%3Dtrue%26app%3Ddesktop%26hl%3Den%26next%3Dhttps%253A%252F%252Fstudio.youtube.com%252Fchannel%252FUCWcAS836mcZwSmecex5ZsHQ%26feature%3Dredirect_login&hl=en&ifkv=AdBytiOSHmdnm0eksrhZnjwWGgI5VC6k_KhkbK04DTiIEhxEkMx2VR7dHVzHE0VTk1EtHw7ajE6Q&passive=true&service=youtube&uilel=3&flowName=WebLiteSignIn&flowEntry=ServiceLogin&dsh=S1345314968%3A1753274055035867
     
videos/upload?filter=%5B%5D&sort=%7B%22columnType%22%3A%22date%22%2C%22sortOrder%22%3A%22DESCENDING%22%7D"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <TiSocialYoutubeCircular />
                    </a>
                    <a
                        href="https://accounts.google.com/v3/signin/identifier?continue=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fwww.youtube.com%2Fsignin%3Faction_handle_signin%3Dtrue%26app%3Ddesktop%26hl%3Den%26next%3Dhttps%253A%252F%252Fstudio.youtube.com%252Fchannel%252FUCWcAS836mcZwSmecex5ZsHQ%26feature%3Dredirect_login&hl=en&ifkv=AdBytiOSHmdnm0eksrhZnjwWGgI5VC6k_KhkbK04DTiIEhxEkMx2VR7dHVzHE0VTk1EtHw7ajE6Q&passive=true&service=youtube&uilel=3&flowName=WebLiteSignIn&flowEntry=ServiceLogin&dsh=S1345314968%3A1753274055035867videos"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        <TiSocialInstagramCircular />
                    </a>
                </HStack>
            </Stack>
        </Box>
    );
};

export default Footer;
JavaScript 
//src/components/Quiz/Quiz.jsx

import React, { useEffect, useState } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import axios from 'axios';
import {
    Box,
    Heading,
    SimpleGrid,
    Text,
    Stack,
    Button,
    Link,
    Container,
    Spinner,
    //   useColorModeValue,
} from '@chakra-ui/react';

function Quiz() {
    const [quizzes, setQuizzes] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios
            .get('http://localhost:4000/api/v1/quiz', { withCredentials: true })
            .then((response) => {
                setQuizzes(response.data);
                setLoading(false);
            });
    }, []);

    if (loading) {
        return (
            <Box textAlign="center" mt={20}>
                <Spinner size="xl" />
                <Text mt={4}>Loading quizzes...</Text>
            </Box>
        );
    }

    return (
        <Container maxW="7xl" py={10}>
            <Heading mb={6} textAlign="center">
                Available Quizzes
            </Heading>
            <SimpleGrid columns={[1, 2, 3]} spacing={8}>
                {quizzes.map((quiz) => (
                    <Box
                        key={quiz._id}
                        p={6}
                        borderWidth="1px"
                        borderRadius="lg"
                        boxShadow="lg"
                    // bg={useColorModeValue('white', 'gray.800')}
                    >
                        <Stack spacing={4}>
                            <Heading size="md">{quiz.title}</Heading>
                            <Text noOfLines={2}>{quiz.description}</Text>
                            <Link as={RouterLink} to={`/quiz/${quiz._id}`}>
                                <Button colorScheme="teal" variant="solid" width="full">
                                    Take Quiz
                                </Button>
                            </Link>
                        </Stack>
                    </Box>
                ))}
            </SimpleGrid>
        </Container>
    );
}

export default Quiz;
JavaScript 
//src/components/Quiz/QuizList.jsx

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import {
    Box,
    Heading,
    Radio,
    RadioGroup,
    Stack,
    Button,
    Text,
    Container,
    Spinner,
} from '@chakra-ui/react';

function QuizList() {
    const { id } = useParams();
    const [quiz, setQuiz] = useState(null);
    const [answers, setAnswers] = useState([]);
    const [score, setScore] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        axios
            .get(` http://localhost:4000/api/v1/quiz/${id}`, { withCredentials: true })
            .then((response) => {
                setQuiz(response.data);
                setLoading(false);
            })
            .catch(() => {
                setLoading(false);
            });
    }, [id]);

    const handleSubmit = () => {
        axios
            .post(' http://localhost:4000/api/v1/submit', { quizId: id, answers })
            .then((response) => setScore(response.data.score));
    };

    if (loading) {
        return (
            <Box textAlign="center" mt={20}>
                <Spinner size="xl" />
                <Text mt={4}>Loading quiz...</Text>
            </Box>
        );
    }

    if (!quiz) {
        return <Text mt={4}>Quiz not found</Text>;
    }

    return (
        <Container maxW="container.md" py={10}>
            <Heading mb={6}>{quiz.title}</Heading>
            {quiz.questions.map((question, index) => (
                <Box key={index} mb={6} p={4} borderWidth="1px" borderRadius="lg">
                    <Heading size="md" mb={2}>{question.questionText}</Heading>
                    <RadioGroup
                        onChange={(value) => {
                            const newAnswers = [...answers];
                            newAnswers[index] = value;
                            setAnswers(newAnswers);
                        }}
                        value={answers[index] || ""}
                    >
                        <Stack spacing={4}>
                            {question.options.map((option, i) => (
                                <Radio key={i} value={option}>
                                    {option}
                                </Radio>
                            ))}
                        </Stack>
                    </RadioGroup>
                </Box>
            ))}
            <Button
                mt={6}
                colorScheme="teal"
                onClick={handleSubmit}
            >
                Submit Quiz
            </Button>
            {score !== null && (
                <Text mt={4} fontSize="lg">
                    Your score: {score} / {quiz.questions.length}
                </Text>
            )}
        </Container>
    );
}

export default QuizList;


Start using the below command:

npm start

Output:

Comment
Article Tags:
MERN Stack
MERN-Projects

Explore