Article Categories

Selected Reading

Creating a Quiz Tool: A Complete Beginner\'s Guide

Javascript CSS HTML

Creating a quiz tool is a great way to learn web development fundamentals. This guide will walk you through building an interactive quiz application using HTML for structure, CSS for styling, and JavaScript for functionality.

Project Overview

Our quiz tool will include the following features

Question Display: Show one question at a time with multiple choice options
User Interaction: Allow users to select answers using radio buttons
Score Tracking: Keep track of correct answers and display final score
Navigation: Move through questions sequentially

Step 1: HTML Structure

First, let's create the basic HTML structure for our quiz application

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Quiz Tool</title>
</head>
<body>
    <div class="quiz-container">
        <h1>Quiz Game</h1>
        <div id="question-container">
            <h2 id="question">Question will appear here</h2>
            <div id="options-container">
                <label>
                    <input type="radio" name="answer" value="A"> 
                    <span id="optionA">Option A</span>
                </label>
                <label>
                    <input type="radio" name="answer" value="B"> 
                    <span id="optionB">Option B</span>
                </label>
                <label>
                    <input type="radio" name="answer" value="C"> 
                    <span id="optionC">Option C</span>
                </label>
                <label>
                    <input type="radio" name="answer" value="D"> 
                    <span id="optionD">Option D</span>
                </label>
            </div>
        </div>
        <button id="submit-btn">Submit</button>
        <div id="result-container"></div>
    </div>
</body>
</html>

Step 2: CSS Styling

Next, let's add CSS to make our quiz visually appealing

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Quiz Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f4f8;
        }

        .quiz-container {
            text-align: center;
            max-width: 500px;
            width: 90%;
            border: 2px solid #4a90e2;
            padding: 30px;
            border-radius: 10px;
            background-color: #ffffff;
            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        #question {
            color: #555;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        #options-container label {
            display: block;
            margin: 15px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        #options-container label:hover {
            background-color: #e9ecef;
        }

        #submit-btn {
            margin-top: 20px;
            padding: 12px 25px;
            cursor: pointer;
            background-color: #4a90e2;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        #submit-btn:hover {
            background-color: #357abd;
        }

        #result-container {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h1>Quiz Game</h1>
        <div id="question-container">
            <h2 id="question">Question will appear here</h2>
            <div id="options-container">
                <label><input type="radio" name="answer" value="A"> <span id="optionA">Option A</span></label>
                <label><input type="radio" name="answer" value="B"> <span id="optionB">Option B</span></label>
                <label><input type="radio" name="answer" value="C"> <span id="optionC">Option C</span></label>
                <label><input type="radio" name="answer" value="D"> <span id="optionD">Option D</span></label>
            </div>
        </div>
        <button id="submit-btn">Submit</button>
        <div id="result-container"></div>
    </div>
</body>
</html>

A centered quiz container with a clean white background, blue border, and hover effects on the answer options appears on the page.

Step 3: Complete Interactive Quiz

Now let's add JavaScript functionality to make the quiz fully interactive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Quiz Tool</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f4f8;
        }

        .quiz-container {
            text-align: center;
            max-width: 500px;
            width: 90%;
            border: 2px solid #4a90e2;
            padding: 30px;
            border-radius: 10px;
            background-color: #ffffff;
            box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        #question {
            color: #555;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        #options-container label {
            display: block;
            margin: 15px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-align: left;
        }

        #options-container label:hover {
            background-color: #e9ecef;
        }

        #submit-btn {
            margin-top: 20px;
            padding: 12px 25px;
            cursor: pointer;
            background-color: #4a90e2;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        #submit-btn:hover {
            background-color: #357abd;
        }

        #result-container {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
        }

        .progress {
            margin-bottom: 20px;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <h1>Interactive Quiz</h1>
        <div class="progress" id="progress">Question 1 of 3</div>
        <div id="question-container">
            <h2 id="question">Loading question...</h2>
            <div id="options-container">
                <label><input type="radio" name="answer" value="A"> <span id="optionA"></span></label>
                <label><input type="radio" name="answer" value="B"> <span id="optionB"></span></label>
                <label><input type="radio" name="answer" value="C"> <span id="optionC"></span></label>
                <label><input type="radio" name="answer" value="D"> <span id="optionD"></span></label>
            </div>
        </div>
        <button id="submit-btn">Submit Answer</button>
        <div id="result-container"></div>
    </div>

    <script>
        const questions = [
            {
                question: "What is the capital of France?",
                options: ["Paris", "London", "Berlin", "Madrid"],
                answer: "A"
            },
            {
                question: "Which planet is known as the Red Planet?",
                options: ["Earth", "Venus", "Mars", "Jupiter"],
                answer: "C"
            },
            {
                question: "What is 2 + 2?",
                options: ["3", "4", "5", "6"],
                answer: "B"
            }
        ];

        let currentQuestionIndex = 0;
        let score = 0;

        function loadQuestion() {
            const currentQuestion = questions[currentQuestionIndex];
            document.getElementById("question").innerText = currentQuestion.question;
            document.getElementById("optionA").innerText = currentQuestion.options[0];
            document.getElementById("optionB").innerText = currentQuestion.options[1];
            document.getElementById("optionC").innerText = currentQuestion.options[2];
            document.getElementById("optionD").innerText = currentQuestion.options[3];
            document.getElementById("progress").innerText = `Question ${currentQuestionIndex + 1} of ${questions.length}`;
        }

        function checkAnswer() {
            const selectedOption = document.querySelector('input[name="answer"]:checked');
            if (selectedOption) {
                const answer = selectedOption.value;
                if (answer === questions[currentQuestionIndex].answer) {
                    score++;
                }
                currentQuestionIndex++;
                selectedOption.checked = false;
                
                if (currentQuestionIndex < questions.length) {
                    loadQuestion();
                } else {
                    showResults();
                }
            } else {
                alert("Please select an answer before proceeding.");
            }
        }

        function showResults() {
            document.getElementById("question-container").style.display = "none";
            document.getElementById("submit-btn").style.display = "none";
            document.getElementById("progress").style.display = "none";
            
            const percentage = Math.round((score / questions.length) * 100);
            let message = `Quiz Complete! Your score: ${score} out of ${questions.length} (${percentage}%)`;
            
            if (percentage >= 80) {
                message += " - Excellent!";
            } else if (percentage >= 60) {
                message += " - Good job!";
            } else {
                message += " - Keep practicing!";
            }
            
            document.getElementById("result-container").innerText = message;
        }

        document.getElementById("submit-btn").addEventListener("click", checkAnswer);
        loadQuestion();
    </script>
</body>
</html>

An interactive quiz with a progress indicator appears. Users can select answers, submit them, and receive feedback. The quiz tracks progress through 3 questions and shows a final score with percentage and encouraging message.

Key Features

Progress Tracking: Shows current question number
Input Validation: Ensures user selects an answer before proceeding
Score Calculation: Tracks correct answers and displays percentage
Visual Feedback: Hover effects and clean styling
Responsive Design: Works on different screen sizes

Conclusion

This quiz tool demonstrates fundamental web development concepts including DOM manipulation, event handling, and user interaction. You can easily extend it by adding more questions, implementing a timer, or saving scores to local storage for a more advanced experience.

Naveen Kumawat

Updated on: 2026-03-15T18:14:59+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next