Quiz App in JavaScript using ChatGPT

Quiz App in React using ChatGPT

Last Updated : 03 May, 2024

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 JavaScript using ChatGPT

S

souravsharma098

Improve

Article Tags :

Similar Reads

Create a Quiz App using ReactJS

In this article, we will create a quiz application to learn the basics of ReactJS. We will be using class components to create the application with custom and bootstrap styling. The application will start with questions at first and then the score will be displayed at last. Initially, there are only

Quiz App in JavaScript using ChatGPT

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

Create a Chatbot App using React-Native

Creating a chatbot app using React Native will be an exciting project. In this article, we are going to implement a Chatbot App using React Native. Chatbot App is a mobile application that answers the user's questions on the basis of their previous learning or content provided by developers. It help

Create an Interactive Quiz App using React-Native?

In this article, we are going to implement an Interactive Quiz App using React Native. Interactive Quiz App is a mobile application that allows users to take tests and view their quiz results to see how well they performed. This Interactive Quiz App consists of multiple questions and multiple-choice

Quiz App using MERN Stack

In this article, weâ€™ll walk through the step-by-step process of creating a complete quiz application with MongoDB, ReactJS, ExpressJS, and NodeJS. This application will provide users with a user-friendly interface for taking and submitting quizzes and a scoreboard to check their standing among other

News App using React

News App using React JS uses React's basic principles to fetch the latest news from a News API and show them to users based on their interests. It's a simple project to create an interactive and personalized news-viewing experience.Preview of final output: Let us have a look at how the final output

Hangman game using React

React provides an excellent platform for creating interactive and engaging web applications. In this tutorial, you will be guided to build a classic Hangman game using React. Hangman is a word-guessing game that is not only entertaining but also a great way to practice your React skills.Preview of f

Emoji Picker App using React

In this article, we will create an Interactive Emoji Application using ReactJS Framework. This developed project basically implements functional components and manages the state accordingly.The developed Application allows users to explore a wide range of emojis and select them for their communicati

Quiz App Using Typescript

A quiz app built with TypeScript provides an interactive way to test knowledge while using TypeScriptâ€™s strong typing for better code quality. By implementing features like multiple-choice questions, score tracking, and timers, we can create a robust and engaging quiz experience for users.What Weâ€™re

Shopping Cart app using React

In this article, we will create an Interactive and Responsive Shopping Cart Project Application using the famous JavaScript FrontEnd library ReactJS. We have named or Application as "GeeksforGeeks Shopping Cart". The application or project which we have developed mainly focuses on the functional com