React Introduction

Quiz App in React using ChatGPT

Last Updated : 23 Jul, 2025

AI is one of the most overhyped techs right now in the market. It is said that it will soon replace Software Engineers in creating complex software applications.

In this article, we will test ChatGPT to create a Quiz application by giving ChatGPT the prompts and will see if it can actually make this simple application just by following our commands.

Prerequisites:

What is ChatGPT?

ChatGPT is an AI language model developed by OpenAI, designed to generate human-like text responses based on the input it receives. Trained on vast amounts of text data, ChatGPT utilizes a transformer architecture to understand the context and predict the next word or sequence of words, enabling it to engage in coherent and contextually relevant conversations with users. With applications ranging from chatbots to content generation, ChatGPT represents a powerful tool for automating text-based tasks and enhancing user interactions across various domains.

So if you don't know about ChatGPT, now you have know about it by reading the definition that is also written by ChatGPT.

Steps to create Application by giving the Prompts

Prompt 1: Can you suggest me some simple react app which I can make.

Response:

wqerdefg

Prompt 2: Can you create a Quiz Application with the features like- It has 10 questions related to Computer Science and each question come at a time on the screen. Also give the complete folder Structure and steps to create the application.

Response:

wewr

So the output which is created by the steps and code given.

Step 1: Create a new React application using create-react-app command.

npx create-react-app quiz-app

Folder Structure:

ertyh

Updated Dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example: Create the required files as shown in folder structure and add the following codes.

CSS

/* App.css */

.App {
    text-align: center;
}

.App-header {
    background-color: #282c34;
    padding: 20px;
    color: white;
}

.question {
    margin-bottom: 20px;
}

.options button {
    margin: 5px;
    padding: 10px 20px;
    cursor: pointer;
}

.result {
    margin-top: 20px;
}

JavaScript

//App.js

import React from 'react';
import './App.css';
import Quiz from './components/Quiz';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <h1>Computer Science Quiz</h1>
            </header>
            <main>
                <Quiz />
            </main>
        </div>
    );
}

export default App;

JavaScript

//components/Question.js

import React from 'react';

const Question = ({ question, options, handleAnswer }) => {
    return (
        <div className="question">
            <h2>{question}</h2>
            <div className="options">
                {options.map((option, index) => (
                    <button key={index} onClick={() => handleAnswer(option)}>
                        {option}
                    </button>
                ))}
            </div>
        </div>
    );
};

export default Question;

JavaScript

//components/Quiz.js

import React, { useState } from 'react';
import Question from './Question';
import Result from './Result';
import questions from '../data/questions';

const Quiz = () => {
    const [currentQuestion, setCurrentQuestion] = useState(0);
    const [score, setScore] = useState(0);
    const [showResult, setShowResult] = useState(false);

    const handleAnswer = (selectedOption) => {
        const correctAnswer = questions[currentQuestion].answer;
        if (selectedOption === correctAnswer) {
            setScore(score + 1);
        }

        const nextQuestion = currentQuestion + 1;
        if (nextQuestion < questions.length) {
            setCurrentQuestion(nextQuestion);
        } else {
            setShowResult(true);
        }
    };

    return (
        <div className="quiz">
            {showResult ? (
                <Result score={score} totalQuestions={questions.length} />
            ) : (
                <Question
                    question={questions[currentQuestion].question}
                    options={questions[currentQuestion].options}
                    handleAnswer={handleAnswer}
                />
            )}
        </div>
    );
};

export default Quiz;

JavaScript

//components/Result.js

import React from 'react';

const Result = ({ score, totalQuestions }) => {
    const percentage = (score / totalQuestions) * 100;

    return (
        <div className="result">
            <h2>Quiz Result</h2>
            <p>You scored {score} out of {totalQuestions} questions.</p>
            <p>Your percentage: {percentage.toFixed(2)}%</p>
        </div>
    );
};

export default Result;

JavaScript

//data/questions.js

const questions = [
    {
        question: "What is the capital of France?",
        options: ["Paris", "London", "Berlin", "Rome"],
        answer: "Paris",
    },
    {
        question: "What does HTML stand for?",
        options: [
            "Hyper Text Markup Language",
            "Hyperlinks and Text Markup Language",
            "Home Tool Markup Language",
            "Hyperlinks and Text Management Language",
        ],
        answer: "Hyper Text Markup Language",
    },
    {
        question:
            'Which programming language is known as "the mother of all languages"?',
        options: ["C++", "Java", "Python", "Assembly Language"],
        answer: "Assembly Language",
    },
    {
        question: "What does CSS stand for?",
        options: [
            "Cascading Style Sheets",
            "Creative Style Sheets",
            "Computer Style Sheets",
            "Colorful Style Sheets",
        ],
        answer: "Cascading Style Sheets",
    },
    {
        question: "What year was JavaScript created?",
        options: ["1995", "1999", "2001", "2005"],
        answer: "1995",
    },
];

export default questions;

To start the application run the following command.

npm start

Browser Output:

Animation51

By seeing the output we can say that it is almost good application and if required we can add some more features and styles to it.

Prompt 3: Can you add a timer in the app and give the question no. like- 1/5, 2/5, and at the last give option to restart the test.

Response:

234rt

Updated Code: Change the following files and see the updated results.

JavaScript

//components/Quiz.js

import React, {
    useState,
    useEffect,
} from "react";
import Question from "./Question";
import Result from "./Result";
import questions from "../data/questions";

const Quiz = () => {
    const [currentQuestion, setCurrentQuestion] =
        useState(0);
    const [score, setScore] = useState(0);
    const [showResult, setShowResult] =
        useState(false);
    const [timeLeft, setTimeLeft] = useState(60);
    const totalQuestions = questions.length;

    useEffect(() => {
        const timer = setTimeout(() => {
            if (timeLeft > 0) {
                setTimeLeft(timeLeft - 1);
            } else {
                setShowResult(true);
            }
        }, 1000);

        return () => clearTimeout(timer);
    }, [timeLeft]);

    const handleAnswer = (selectedOption) => {
        const correctAnswer =
            questions[currentQuestion].answer;
        if (selectedOption === correctAnswer) {
            setScore(score + 1);
        }

        const nextQuestion = currentQuestion + 1;
        if (nextQuestion < totalQuestions) {
            setCurrentQuestion(nextQuestion);
        } else {
            setShowResult(true);
        }
    };

    const restartQuiz = () => {
        setCurrentQuestion(0);
        setScore(0);
        setShowResult(false);
        setTimeLeft(60);
    };

    return (
        <div className="quiz">
            {showResult ? (
                <Result score={score}
                    totalQuestions={
                        totalQuestions
                    }
                    restartQuiz={restartQuiz}
                />
            ) : (
                <>
                    <div className="timer">
                        Time Left: {timeLeft}{" "}
                        seconds
                    </div>
                    <div className="question-number">
                        Question {currentQuestion + 1}/
                        {totalQuestions}
                    </div>
                    <Question
                        question={
                            questions[
                                currentQuestion
                            ].question
                        }
                        options={
                            questions[
                                currentQuestion
                            ].options
                        }
                        handleAnswer={
                            handleAnswer
                        }
                    />
                </>
            )}
        </div>
    );
};

export default Quiz;

JavaScript

//components/Result.js

import React from "react";

const Result = ({ score, totalQuestions, restartQuiz }) => {
    const percentage = (score / totalQuestions) * 100;

    return (
        <div className="result">
            <h2>Quiz Result</h2>
            <p>
                You scored {score} out of {totalQuestions} questions.
            </p>
            <p>Your percentage: {percentage.toFixed(2)}%</p>
            <button onClick={restartQuiz}>Restart Quiz</button>
        </div>
    );
};

export default Result;

Steps to Run the Application:

npm start

Browser Output:

Animation52 — Quiz App in React using ChatGPT

So as you can see by applying the updated codes we can clearly see the required changes in our application.

By giving the right prompt to the ChatGPT and following the steps we can easily create our own customized application from scratch.

Quiz App in React using ChatGPT

React Introduction

S

souravsharma098

Improve

Article Tags :

Similar Reads

React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version

React Lifecycle

In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo