Steps to Create Quiz App using ChatGPT Prompts
Prompt 1: Give the Project Structure for making creating a Quiz Application
Response:
Folder Structure:
Prompt 2: Write HTML and CSS code to develop a web-based quiz application that includes approximately five JavaScript quiz questions, along with the time taken to answer each question.
Response:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container">
<h1>Computer Science Quiz</h1>
<div class="conatiner">
<div id="question-counter"></div>
<div id="question"></div>
<div id="options"></div>
<div id="score-box" class="hidden">
<h2>Quiz Result</h2>
<p>Your score:
<span id="score"></span>
</p>
<button id="restart-btn">
Restart Quiz
</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
background-color: #000;
color: #fff;
padding: 20px;
margin: 0;
width: 100%;
}
.quiz-container {
text-align: center;
}
#question {
font-size: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
.conatiner {
margin-top: 30px;
}
#options {
margin-bottom: 20px;
}
#options button {
margin: 5px;
font-size: 15px;
padding: 10px 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #4f5052;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#timer {
font-size: 16px;
margin-top: 10px;
}
#score-box {
max-width: 400px;
margin: 50px auto;
border: 2px solid black;
border-radius: 10px;
padding: 20px;
text-align: center;
}
#restart-btn {
margin: 5px;
font-size: 15px;
padding: 10px 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #4f5052;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#score-box h2 {
margin-bottom: 20px;
}
.hidden {
display: none;
}
const quizData = [
{
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",
},
];
let currentQuestion = 0;
let timer;
let correctAnswers = 0;
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const questionCounterElement =
document.getElementById('question-counter');
const timerValueElement = document.getElementById('timer-value');
const scoreBox = document.getElementById('score-box');
const scoreElement = document.getElementById('score');
const restartButton = document.getElementById('restart-btn');
function displayQuestion() {
const currentQuiz = quizData[currentQuestion];
questionCounterElement.textContent =
`Question ${currentQuestion + 1}/${quizData.length}`;
questionElement.innerText = currentQuiz.question;
optionsElement.innerHTML = "";
currentQuiz.options.forEach((option, index) => {
const button = document.createElement('button');
button.innerText = option;
button.addEventListener('click',
() => checkAnswer(option));
optionsElement.appendChild(button);
});
}
function checkAnswer(selectedOption) {
const currentQuiz = quizData[currentQuestion];
if (selectedOption === currentQuiz.answer) {
// Correct answer
correctAnswers++;
}
// Move to next question
currentQuestion++;
if (currentQuestion < quizData.length) {
displayQuestion();
} else {
// Quiz finished
endQuiz();
}
}
function startTimer(duration) {
let timeLeft = duration;
timer = setInterval(() => {
timeLeft--;
if (timeLeft >= 0) {
timerValueElement.textContent = timeLeft;
} else {
clearInterval(timer);
endQuiz();
}
}, 1000);
}
function endQuiz() {
clearInterval(timer);
const scorePercentage =
((correctAnswers / quizData.length) * 100).toFixed(2);
scoreElement.textContent =
`${correctAnswers} out of ${quizData.length} (${scorePercentage}%)`;
scoreBox.classList.remove('hidden');
}
function restartQuiz() {
currentQuestion = 0;
correctAnswers = 0;
scoreBox.classList.add('hidden');
displayQuestion();
startTimer(60); // Start timer again with 60 seconds
}
restartButton.addEventListener('click', restartQuiz);
// Start quiz
displayQuestion();
startTimer(60); // Start timer with 60 seconds
Output:
Prompt 3: Add the countdown timer of 60second in the above project and give the new code
Response:
Example: Create the required files as shown in folder structure and add the following codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Quiz App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="quiz-container">
<h1>Computer Science Quiz</h1>
<div class="conatiner">
<div id="question-counter"></div>
<div id="question"></div>
<div id="options"></div>
<div id="timer">Time left:
<span id="timer-value"></span>
</div>
<div id="score-box" class="hidden">
<h2>Quiz Result</h2>
<p>Your score:
<span id="score"></span>
</p>
<button id="restart-btn">
Restart Quiz
</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 {
background-color: #000;
color: #fff;
padding: 20px;
margin: 0;
width: 100%;
}
.quiz-container {
text-align: center;
}
#question {
font-size: 20px;
margin-bottom: 20px;
margin-top: 20px;
}
.conatiner {
margin-top: 30px;
}
#options {
margin-bottom: 20px;
}
#options button {
margin: 5px;
font-size: 15px;
padding: 10px 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #4f5052;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#timer {
font-size: 16px;
margin-top: 10px;
}
#score-box {
max-width: 400px;
margin: 50px auto;
border: 2px solid black;
border-radius: 10px;
padding: 20px;
text-align: center;
}
#restart-btn {
margin: 5px;
font-size: 15px;
padding: 10px 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #4f5052;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#score-box h2 {
margin-bottom: 20px;
}
.hidden {
display: none;
}
const quizData = [
{
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",
},
];
let currentQuestion = 0;
let timer;
let correctAnswers = 0;
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const questionCounterElement =
document.getElementById('question-counter');
const timerValueElement = document.getElementById('timer-value');
const scoreBox = document.getElementById('score-box');
const scoreElement = document.getElementById('score');
const restartButton = document.getElementById('restart-btn');
function displayQuestion() {
const currentQuiz = quizData[currentQuestion];
questionCounterElement.textContent =
`Question ${currentQuestion + 1}/${quizData.length}`;
questionElement.innerText = currentQuiz.question;
optionsElement.innerHTML = "";
currentQuiz.options.forEach((option, index) => {
const button = document.createElement('button');
button.innerText = option;
button.addEventListener('click',
() => checkAnswer(option));
optionsElement.appendChild(button);
});
}
function checkAnswer(selectedOption) {
const currentQuiz = quizData[currentQuestion];
if (selectedOption === currentQuiz.answer) {
// Correct answer
correctAnswers++;
}
// Move to next question
currentQuestion++;
if (currentQuestion < quizData.length) {
displayQuestion();
} else {
// Quiz finished
endQuiz();
}
}
function startTimer(duration) {
let timeLeft = duration;
timer = setInterval(() => {
timeLeft--;
if (timeLeft >= 0) {
timerValueElement.textContent = timeLeft;
} else {
clearInterval(timer);
endQuiz();
}
}, 1000);
}
function endQuiz() {
clearInterval(timer);
const scorePercentage =
((correctAnswers / quizData.length) * 100).toFixed(2);
scoreElement.textContent =
`${correctAnswers} out of ${quizData.length} (${scorePercentage}%)`;
scoreBox.classList.remove('hidden');
}
function restartQuiz() {
currentQuestion = 0;
correctAnswers = 0;
scoreBox.classList.add('hidden');
displayQuestion();
startTimer(60); // Start timer again with 60 seconds
}
restartButton.addEventListener('click', restartQuiz);
// Start quiz
displayQuestion();
startTimer(60); // Start timer with 60 seconds
Output:
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 simple application just by following our commands.