Overview

Creating a quiz application is a fun and interactive way to learn about HTML, CSS, and JavaScript. In this tutorial, we will build a simple quiz app from scratch, where users can answer multiple-choice questions and see their results at the end.

Project Overview

Features:

  1. A question is displayed with multiple choice answers.
  2. Users can select an answer and navigate to the next question.
  3. At the end of the quiz, the total score is displayed.
  4. The quiz is resettable to allow another attempt.

Tools and Technologies Used

  • HTML: For the structure of the web page.
  • CSS: For styling the app.
  • JavaScript: For handling quiz logic and user interaction.

Step 1: Setting Up the Project

Create a directory for your project and create three files inside it:

  • index.html – The HTML file for the structure of the app.
  • styles.css – The CSS file for styling.
  • script.js – The JavaScript file for functionality.

Step 2: Building the HTML Structure

First, let’s set up the basic HTML structure for our quiz app. This will include a container to display questions, options, and a button to move to the next question.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Quiz App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="quiz-container">
        <h1>Quiz App</h1>
        <div id="question-container">
            <div id="question">Question text</div>
            <div id="answer-buttons" class="btn-container">
                <!-- Answer buttons will be generated dynamically -->
            </div>
        </div>
        <button id="next-btn" class="btn">Next</button>
        <div id="result-container" class="hidden">
            <h2>Your Score: <span id="score"></span></h2>
            <button id="restart-btn" class="btn">Restart Quiz</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3: Styling with CSS

Next, add some basic styling to make the quiz app visually appealing. Open the styles.css file and add the following CSS code:

				
					/* styles.css */

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.quiz-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

.btn-container {
    margin: 20px 0;
}

.btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background-color: #0056b3;
}

.hidden {
    display: none;
}

#result-container {
    margin-top: 20px;
}

Step 4: Adding Interactivity with JavaScript

Now, let’s add JavaScript to handle the quiz logic: displaying questions, checking answers, navigating to the next question, and showing the final score.

Open the script.js file and add the following code:

				
					// script.js

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: "What is 2 + 2?",
        answers: [
            { text: "3", correct: false },
            { text: "4", correct: true },
            { text: "22", correct: false },
            { text: "5", 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 }
        ]
    }
];

let currentQuestionIndex = 0;
let score = 0;

const questionContainer = document.getElementById('question-container');
const questionElement = document.getElementById('question');
const answerButtonsElement = document.getElementById('answer-buttons');
const nextButton = document.getElementById('next-btn');
const resultContainer = document.getElementById('result-container');
const scoreElement = document.getElementById('score');
const restartButton = document.getElementById('restart-btn');

function startQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    questionContainer.classList.remove('hidden');
    resultContainer.classList.add('hidden');
    nextButton.classList.remove('hidden');
    showQuestion(questions[currentQuestionIndex]);
}

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

function selectAnswer(answer) {
    if (answer.correct) {
        score++;
    }
    nextButton.classList.remove('hidden');
}

function showNextQuestion() {
    currentQuestionIndex++;
    if (currentQuestionIndex < questions.length) {
        showQuestion(questions[currentQuestionIndex]);
        nextButton.classList.add('hidden');
    } else {
        showScore();
    }
}

function showScore() {
    questionContainer.classList.add('hidden');
    resultContainer.classList.remove('hidden');
    nextButton.classList.add('hidden');
    scoreElement.innerText = `${score} / ${questions.length}`;
}

function restartQuiz() {
    startQuiz();
}

nextButton.addEventListener('click', showNextQuestion);
restartButton.addEventListener('click', restartQuiz);

startQuiz();

Explanation of the JavaScript Code

  • Questions Array: The questions array contains objects with each question, its possible answers, and the correct answer.
  • State Variables: currentQuestionIndex tracks the current question, and score keeps the user’s score.
  • DOM Elements: We get references to the necessary DOM elements using document.getElementById().
  • Start Quiz: The startQuiz() function initializes the quiz by resetting the question index and score, then shows the first question.
  • Show Question: The showQuestion() function displays the current question and its answer options dynamically.
  • Select Answer: The selectAnswer() function checks if the selected answer is correct, updates the score if necessary, and shows the next button.
  • Show Next Question: The showNextQuestion() function moves to the next question or shows the final score if the quiz is over.
  • Show Score: The showScore() function hides the question container and displays the user’s score.
  • Restart Quiz: The restartQuiz() function reinitializes the quiz to allow the user to retake it.

Step 5: Running the Application

  • Save all the files: index.html, styles.css, and script.js.
  • Open the index.html file in your browser.
  • You should see the quiz interface, with questions appearing one by one as you answer them.
  • At the end of the quiz, your score will be displayed, and you can restart the quiz.

Conclusion

You have now built a fully functional quiz application using HTML, CSS, and JavaScript. This project is a great way to practice DOM manipulation, event handling, and basic application state management. You can further enhance this app by adding features like:

  • A timer for each question.
  • Different question categories.
  • Storing high scores using local storage.

Happy coding, and feel free to extend this project with your own creative ideas!