GreatStack Watch on YouTube

How To Make Quiz App Using JavaScript | Build Quiz App With HTML CSS & JavaScript

4 min read 1 year ago
Published on Aug 04, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create a simple quiz app using HTML, CSS, and JavaScript. This app allows users to answer multiple-choice questions, receive immediate feedback on their answers, and view their final score. Whether you're a beginner looking to enhance your coding skills or a student needing a project for your portfolio, this guide will walk you through the entire process step-by-step.

Step 1: Set Up Your Project Files

  1. Create a new folder for your project.
  2. Inside this folder, create three files:
    • index.html
    • style.css
    • script.js
  3. Open these files in your preferred code editor (e.g., Visual Studio Code).

Step 2: Create the HTML Structure

  1. In index.html, add the basic HTML structure:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Quiz App</title>
</head>
<body>
    <div class="app">
        <h1>Simple Quiz</h1>
        <div class="quiz">
            <h2 id="question">Question goes here</h2>
            <div id="answer-buttons"></div>
        </div>
        <button id="next-btn" style="display: none;">Next</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Style Your Quiz App

  1. In style.css, add the following styles:
    body {
    background-color: #121212;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.app {
    background-color: white;
    width: 90%;
    max-width: 600px;
    margin: 100px auto;
    border-radius: 10px;
    padding: 30px;
}

h1 {
    font-size: 24px;
    color: #333;
    text-align: center;
    border-bottom: 2px solid #ccc;
    padding-bottom: 10px;
}

h2 {
    font-size: 18px;
    color: #333;
}

.btn {
    background-color: white;
    color: #333;
    font-weight: 500;
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 4px;
}

.btn:hover {
    background-color: #ccc;
}

.correct {
    background-color: green;
    color: white;
}

.incorrect {
    background-color: red;
    color: white;
}

Step 4: Add JavaScript Functionality

  1. In script.js, initialize your questions and set up the quiz logic:
    const questions = [
    {
        question: "What is the capital of France?",
        answers: [
            { text: "Berlin", correct: false },
            { text: "Madrid", correct: false },
            { text: "Paris", correct: true },
            { text: "Lisbon", correct: false }
        ]
    },
    {
        question: "Which planet is known as the Red Planet?",
        answers: [
            { text: "Earth", correct: false },
            { text: "Mars", correct: true },
            { text: "Jupiter", correct: false },
            { text: "Saturn", correct: false }
        ]
    }
    // Add more questions as needed
];

let currentQuestionIndex = 0;
let score = 0;

const questionElement = document.getElementById('question');
const answerButtons = document.getElementById('answer-buttons');
const nextButton = document.getElementById('next-btn');

function startQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    nextButton.style.display = 'none';
    showQuestion(questions[currentQuestionIndex]);
}

function showQuestion(question) {
    questionElement.innerText = question.question;
    answerButtons.innerHTML = '';
    question.answers.forEach(answer => {
        const button = document.createElement('button');
        button.innerText = answer.text;
        button.classList.add('btn');
        button.addEventListener('click', () => selectAnswer(answer));
        answerButtons.appendChild(button);
    });
}

function selectAnswer(answer) {
    const correct = answer.correct;
    if (correct) {
        score++;
        answerButtons.querySelectorAll('.btn').forEach(button => {
            if (button.innerText === answer.text) {
                button.classList.add('correct');
            }
        });
    } else {
        answerButtons.querySelectorAll('.btn').forEach(button => {
            if (button.innerText === answer.text) {
                button.classList.add('incorrect');
            }
        });
    }
    nextButton.style.display = 'block';
}

nextButton.addEventListener('click', () => {
    currentQuestionIndex++;
    if (currentQuestionIndex < questions.length) {
        showQuestion(questions[currentQuestionIndex]);
    } else {
        showScore();
    }
});

function showScore() {
    questionElement.innerText = `You scored ${score} out of ${questions.length}`;
    answerButtons.innerHTML = '';
    nextButton.innerText = 'Play Again';
    nextButton.style.display = 'block';
    nextButton.addEventListener('click', startQuiz);
}

startQuiz();

Step 5: Test Your Quiz App

  1. Open the index.html file in a web browser.
  2. Test the quiz by selecting answers and navigating through the questions.
  3. Check the scoring functionality and ensure the correct and incorrect answers are visually distinguished.

Conclusion

You have successfully built a simple quiz app using HTML, CSS, and JavaScript. This project not only enhances your web development skills but also provides a solid foundation for future projects. Feel free to expand upon this quiz by adding more questions or features such as timers or scoring systems. Happy coding!

Table of Contents

Recent