Skip to main content

Make Quiz application Dynamic MCQ Quiz App with Animations & Score Tracking Using HTML, CSS, and JavaScript

 Here's a Quiz App built using HTML, CSS, and JavaScript. It includes:

Output


✅ Multiple-choice questions
✅ Score tracking
✅ Animations for smooth transitions

📌 Features & Advantages

  1. Interactive UI – Smooth animations enhance user experience.
  2. Score Tracking – Tracks and displays the user's final score.
  3. Dynamic Questions – Easily add or modify questions.
  4. Responsive Design – Works on all devices.

🚀 Code for Quiz App

1️⃣ HTML (index.html)

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="styles.css">
   </head> <body>
    <div class="quiz-container">
        <h1>Quiz App</h1>
        <div id="question-container">
            <h2 id="question">Question goes here</h2>
            <div id="answer-buttons" class="btn-container"></div>
        </div>
        <button id="next-btn">Next</button>
        <h3 id="score">Score: 0</h3>
    </div>  </script>
   </body>
    </html>

2️⃣ CSS (styles.css)

css
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(120deg, #ff9a9e, #fad0c4);
}

.quiz-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.btn-container {
    display: flex;
    flex-direction: column;
}

button {
    margin: 10px;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: transform 0.2s ease-in-out;
}

button:hover {
    transform: scale(1.05);
}

.correct { background-color: #9aeabc; }
.wrong { background-color: #ff9393; }

#next-btn {
    display: none;
    background-color: #007bff;
    color: white;
}

3️⃣ JavaScript (script.js)

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: "Which language is used for web development?",
        answers: [
            { text: "Python", correct: false },
            { text: "Java", correct: false },
            { text: "JavaScript", correct: true },
            { text: "C++", correct: false }
        ]
    }
];

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

let currentQuestionIndex = 0;
let score = 0;

function startQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    nextButton.style.display = "none";
    showQuestion();
}

function showQuestion() {
    resetState();
    let currentQuestion = questions[currentQuestionIndex];
    questionElement.innerText = currentQuestion.question;

    currentQuestion.answers.forEach(answer => {
        const button = document.createElement("button");
        button.innerText = answer.text;
        button.classList.add("btn");
        button.addEventListener("click", () => selectAnswer(button, answer.correct));
        answerButtons.appendChild(button);
    });
}

function resetState() {
    nextButton.style.display = "none";
    answerButtons.innerHTML = "";
}

function selectAnswer(button, isCorrect) {
    if (isCorrect) {
        button.classList.add("correct");
        score++;
    } else {
        button.classList.add("wrong");
    }
    Array.from(answerButtons.children).forEach(btn => btn.disabled = true);
    nextButton.style.display = "block";
}

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

function showScore() {
    resetState();
    questionElement.innerText = `You scored ${score} out of ${questions.length}!`;
    scoreElement.innerText = `Final Score: ${score}`;
    nextButton.innerText = "Restart";
    nextButton.style.display = "block";
    nextButton.addEventListener("click", startQuiz);
}

startQuiz();

🎯 How It Works

  1. Displays a question with multiple-choice answers.
  2. User selects an answer → Highlights green (correct) or red (wrong).
  3. Score updates dynamically and moves to the next question.
  4. At the end, final score is displayed with an option to restart.

🔗 Enhancements

  • Add a timer for each question.
  • Store high scores using localStorage.
  • Add more animations with CSS keyframes.