Home » How to Build a Quiz App Using HTML, CSS, and JavaScript (Step-by-Step Guide)

How to Build a Quiz App Using HTML, CSS, and JavaScript (Step-by-Step Guide)

Categories: JavaScript
Quiz app interface built with HTML, CSS, and JavaScript showing multiple‑choice question UI

In this article, we will learn how to make a quiz app using HTML, CSS, and JavaScript step by step. By the end of this guide, you’ll have your very own working multiple-choice quiz application that you can customize with your own questions and answers.

Have you ever wanted to create a fun, interactive quiz app for your website or project? Whether you are a beginner learning front-end development or someone experimenting with JavaScript, building a quiz app is one of the best projects you can try.

Watch the Video Tutorial: How to Make a Quiz App using HTML, CSS, and JavaScript

Why Build a Quiz App?

Before we dive into the coding, let’s understand why a quiz app is a great project to practice:

  •  It improves your knowledge of HTML form inputs (radio buttons, labels, etc.).
  • You learn how to use CSS styling to make the app look modern and responsive.
  • You understand the power of JavaScript DOM manipulation to update questions dynamically.
  • It’s a project you can add to your portfolio as a beginner frontend developer.

What We Will Build

Here’s what our quiz application will do:

  • It will display a series of questions with four multiple-choice answers.
  • The user will select one answer and move to the next question.
  • At the end of the quiz, the app will display the score (how many questions were answered correctly).
  • The design will be neat, modern, and responsive for desktop and mobile.

HTML Code:

First, let’s create the index.html file. This contains the structure of our quiz box, questions, and answer buttons.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How To Make a Quiz App Using HTML CSS And Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="quiz-wrapper">
        <div class="quiz-box" id="quiz">
            <div class="question-count">
                <p class="count"><span id="count-qustion">3</span>/<strong id="tol-num-que">10</strong></p>
                <p class="question-title">Question</p>
            </div>

            <div class="question-box">
                <span id="question-number">3</span>
                <p id="question">Lorem ipsum dolor sit amet, consectetur adipisicing elit Debitis? </p>
            </div>

            <div class="answers-box">
                <div class="box">
                    <div class="answer-number">A</div>
                    <input name="option" type="radio" id="first" value="a" required hidden>
                    <label class="answer-lable" for="first">Testing 1</label>
                </div>
                <div class="box">
                    <div class="answer-number">B</div>
                    <input name="option" type="radio" id="second" value="b" required hidden>
                    <label class="answer-lable" for="second">Testing 2</label>
                </div>
                <div class="box">
                    <div class="answer-number">C</div>
                    <input name="option" type="radio" id="third" value="c" required hidden>
                    <label class="answer-lable" for="third">Testing 3</label>
                </div>
                <div class="box">
                    <div class="answer-number">D</div>
                    <input name="option" type="radio" id="fourth" value="d" required hidden>
                    <label class="answer-lable" for="fourth">Testing 4</label>
                </div>
            </div>

            <div class="button-box">
                <button type="button" class="next-btn button" id="next-question-btn">Next Question</button>
                <button type="button" class="next-btn button submite-btn" id="submite">Submite Now</button>
            </div>

        </div>

        <div class="result-show" id="result">
            <h2 id="score">Questions Answered</h2>
            <div class="button-box">
                <button class="button" onclick="location.reload();">Reload</button>
            </div>
        </div>

    </div>

    <script src="script.js"></script>
</body>

</html>

Explanation:

  • The .quiz-box contains our quiz questions and multiple-choice answers.
  • We use <input type="radio"> for answer choices and link them with labels.
  • The Next button will move us to the next question, and when we reach the final question, the Submit button will appear to show the score.

CSS Code:

Now, let’s make it look attractive by creating a style.css file.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif
}

.quiz-wrapper {
    width: 100%;
    min-height: 100vh;
    padding: 15px;
    background: #6e44fe;
    display: flex;
    justify-content: center;
    align-items: center;
}

.quiz-box {
    width: 750px;
    min-height: 400px;
    padding: 20px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    border-radius: 50px;

}

.question-count {
    text-align: center;
    margin-top: 20px;
}

.question-count .count {
    font-size: 25px;
    font-weight: 800;
    color: #9307b3;
}

.question-count .count span {
    color: #6c42ff;
    font-size: 35px;
}

.question-count .question-title {
    font-size: 20px;
    font-weight: 600;
    color: #6e44fe;
}

.question-box {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.question-box #question-number {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #6c42ff;
    color: #fff;
    font-size: 20px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    padding: 5px;
    text-align: center;
}

.question-box #question {
    font-size: 20px;
    font-weight: 500;
    background-color: #fff;
    color: #6e44fe;
    /* border: 1px solid #6c42ff; */
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: rgba(110, 68, 254, 0.45) 0px 4px 12px;
}

.answers-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 45px;
    gap: 35px 15px;
}

.answers-box .box {
    width: calc(50% - 10px);
    position: relative;
}

.answers-box .box .answer-number {
    position: absolute;
    top: -20px;
    right: 5%;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    background-color: #b892ff;
    width: 60px;
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}

.answers-box .box .answer-lable {
    display: flex;
    align-items: center;
    background-color: #6c42ff;
    border: 2px solid #6c42ff;
    width: 100%;
    color: #fff;
    padding: 20px 25px;
    border-radius: 20px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}

.answers-box .box input:checked~.answer-lable {
    background-color: #fff;
    border: 2px solid #6c42ff;
    color: #6c42ff;
}

.button-box {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.button-box .button {
    width: calc(70% - 15px);
    background-color: #6c42ff;
    border: 2px solid #6c42ff;
    padding: 12px 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.5s;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.button-box .button:hover {
    border: 2px solid #6c42ff;
    background-color: #fff;
    color: #160f21;
}

.button-box .submite-btn {
    display: none;
}

.result-show {
    background-color: #fff;
    padding: 15px;
    border-radius: 10px;
    display: none;
}


@media(max-width:576px) {
    .answers-box .box {
        width: 100%;
    }
}

This CSS ensures that our quiz looks clean, modern, and mobile-friendly.

JavaScript Code:

Now comes the fun part — making it work. Let’s add the code in script.js:

const quizData = [
  {
    question: "How can a datatype be declared to be a constant type?",
    a: "const",
    b: "var",
    c: "let",
    d: "constant",
    correct: "a",
  },
  {
    question: "Which of the following is not a Javascript framework?",
    a: "Node",
    b: "Vue",
    c: "React",
    d: "Cassandra",
    correct: "d",
  },
  {
    question: "How to stop an interval timer in Javascript?",
    a: "clearInterval",
    b: "clearTimer",
    c: "intervalOver",
    d: "None of the above",
    correct: "a",
  },
  {
    question: "Which type of JavaScript language is?",
    a: "Object oriented",
    b: "Object based",
    c: "Functional",
    d: "None of the above",
    correct: "b",
  },
];

const quiz = document.getElementById("quiz");
const resultEl = document.getElementById("result");
const countQustion = document.getElementById("count-qustion");
const tottleNumberOfQuestion = document.getElementById("tol-num-que");
const questionNumber = document.getElementById("question-number");
const questionTitle = document.getElementById("question");
const answerLable = document.querySelectorAll(".answer-lable");
const nextQuestionbtn = document.getElementById("next-question-btn");
const allInputs = document.querySelectorAll("input[type='radio']");
const submitequiz = document.getElementById("submite");
const scoreEl = document.getElementById("score");

let currentQtn = 0;
let answerd = 0;

const loadQuiz = () => {
  countQustion.innerHTML = `${currentQtn + 1}`;
  tottleNumberOfQuestion.innerHTML = quizData.length;
  questionNumber.innerHTML = `${currentQtn + 1}`;
  questionTitle.innerHTML = quizData[currentQtn].question;
  answerLable[0].innerHTML = quizData[currentQtn].a;
  answerLable[1].innerHTML = quizData[currentQtn].b;
  answerLable[2].innerHTML = quizData[currentQtn].c;
  answerLable[3].innerHTML = quizData[currentQtn].d;
  reset();
  if (currentQtn == quizData.length - 1) {
    nextQuestionbtn.style.display = "none";
    submitequiz.style.display = "block";
  }
};

const reset = () => {
  allInputs.forEach((allInputs) => {
    allInputs.checked = false;
  });
};

nextQuestionbtn.addEventListener("click", () => {
  let answer = getSelectd();
  if (answer) {
    if (answer === quizData[currentQtn].correct) {
      answerd++;
    }
    currentQtn++;
    if (currentQtn < quizData.length) {
      loadQuiz();
    }
  }
});

submitequiz.addEventListener("click", () => {
  let answer = getSelectd();
  if (answer === quizData[currentQtn].correct) {
    answerd++;
  }
  currentQtn++;
  if (getSelectd()) {
    quiz.style.display = "none";
    resultEl.style.display = "block";
    scoreEl.innerHTML = `Questions Answered Correctly ${answerd} / ${quizData.length}`;
  }
});

const getSelectd = () => {
  let answer;
  allInputs.forEach((allInputs) => {
    if (allInputs.checked) {
      answer = allInputs.value;
    }
  });
  return answer;
};
loadQuiz();

How It Works

  1. We store quiz questions inside an array of objects (quizData).
  2. Each object has a question, four options (a,b,c,d) and the correct answer.
  3. loadQuiz() function loads each question and options dynamically on screen.
  4. The Next Question button allows the user to move forward after selecting an answer.
  5. At the end, the Submit button shows the result box with the score.

Testing the Quiz App

  • Save all files (index.html, style.css, script.js).
  • Open index.html in your browser.
  • Try answering questions, moving forward, and see if the final score displays correctly.

Customizing the Quiz

You can improve this quiz app by:

  1. Adding a timer for each question.
  2. Shuffling questions randomly.
  3. Displaying correct/incorrect answers after each attempt.
  4. Storing high scores using localStorage.

Conclusion

Building a Quiz App using HTML, CSS, and JavaScript is a fantastic way to strengthen your web development skills. Not only do you practice the core building blocks of frontend — HTML for structure, CSS for styling, and JavaScript for logic — but you also learn how to bring them together into a complete, interactive project.

Through this step-by-step tutorial, we created a neat quiz app that:

  • Shows multiple-choice questions dynamically
  • Lets users select answers and navigate through questions
  • Displays the final result in a simple, user-friendly format

What makes this project even more exciting is that it’s customizable. You can easily add your own set of questions, apply different themes, or even extend it with advanced features like timers, progress bars, or storing high scores. This means the same base project can turn into many creative versions — from educational tools to fun games.

If you are a beginner in web development, this project will give you the confidence to handle DOM manipulation and event handling. And if you’re already experienced, you can treat this as a base to develop more advanced quiz systems.

Live Demo

Related