Quiz App in JavaScript using ChatGPT

Create a Quiz Application Using JavaScript

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

Basic Knowledge of HTML, CSS, and JavaScript
A ChatGPT account

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 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:

HTML

<!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>

CSS

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;
}

JavaScript

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.

HTML

<!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>

CSS

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;
}

JavaScript

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:

Tags:

#JavaScript-Questions #Web Projects - GPT #JavaScript #Web Technologies

Create a Quiz Application Using JavaScript

Quiz App in JavaScript using ChatGPT

Prerequisites

What is ChatGPT?

Steps to Create Quiz App using ChatGPT Prompts

Folder Structure:

Contact Us