Steps to create Application by giving the Prompts
Prompt 1: Can you suggest me some simple react app which I can make.
Response:
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:
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:
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.
/* 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;
}
//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;
//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;
//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;
//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;
//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:
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:
Updated Code: Change the following files and see the updated results.
//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;
//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:
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
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.
Contact Us