Build a Simple Quiz with JavaScript

Creating a simple quiz using JavaScript is a great way to learn programming. JavaScript helps make web pages interactive, and a quiz is a perfect example of this. Whether you are a beginner or an experienced developer, building a quiz can improve your coding skills.

In this article, we will learn how to create a basic quiz using HTML, CSS, and JavaScript. This quiz will have multiple-choice questions, and users can select their answers. At the end of the quiz, they will see their score.

If you are learning web development or working in a Web Design Company In Udaipur, this guide will be very useful. Let’s get started!

Step 1: Set Up the Basic Structure

Before writing any JavaScript code, we need a simple structure for our quiz. We will use HTML for the structure and CSS for styling.

HTML Code

Create an HTML file (index.html) and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Quiz</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="quiz-container">
        <h2>Simple JavaScript Quiz</h2>
        <div id="question"></div>
        <div id="options"></div>
        <button id="next-btn">Next</button>
        <p id="score"></p>
    </div>
    <script src="script.js"></script>
</body>
</html>

This code creates a basic quiz layout where questions and answer options will be displayed. The "Next" button allows users to move to the next question.

Step 2: Style the Quiz with CSS

Now, let’s make the quiz look visually appealing using CSS. Create a file named style.css and add the following code:

body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f4;
}

.quiz-container {
    width: 50%;
    margin: 50px auto;
    padding: 20px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

button {
    padding: 10px 15px;
    margin: 10px;
    border: none;
    background: #007BFF;
    color: white;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

button:hover {
    background: #0056b3;
}

This CSS code styles the quiz by centering the content, adding spacing, and improving the button's appearance. It ensures the quiz looks good on different devices, making it useful for Responsive Web Design Services In Udaipur.

Step 3: Add JavaScript for Functionality

Now, let's write the JavaScript code that will make the quiz work. Create a file named script.js and add the following code:

const questions = [
    {
        question: "What is the capital of France?",
        options: ["Berlin", "Madrid", "Paris", "Rome"],
        answer: "Paris"
    },
    {
        question: "Which programming language is used for web development?",
        options: ["Python", "Java", "C++", "JavaScript"],
        answer: "JavaScript"
    },
    {
        question: "What does CSS stand for?",
        options: ["Creative Style Sheets", "Cascading Style Sheets", "Computer Style Sheets", "Colorful Style Sheets"],
        answer: "Cascading Style Sheets"
    }
];

let currentQuestionIndex = 0;
let score = 0;

const questionElement = document.getElementById("question");
const optionsElement = document.getElementById("options");
const nextButton = document.getElementById("next-btn");
const scoreElement = document.getElementById("score");

function loadQuestion() {
    const currentQuestion = questions[currentQuestionIndex];
    questionElement.innerText = currentQuestion.question;

    optionsElement.innerHTML = "";
    currentQuestion.options.forEach(option => {
        const button = document.createElement("button");
        button.innerText = option;
        button.addEventListener("click", () => checkAnswer(option));
        optionsElement.appendChild(button);
    });
}

function checkAnswer(selectedOption) {
    const correctAnswer = questions[currentQuestionIndex].answer;
    if (selectedOption === correctAnswer) {
        score++;
    }
    currentQuestionIndex++;

    if (currentQuestionIndex < questions.length) {
        loadQuestion();
    } else {
        showScore();
    }
}

function showScore() {
    questionElement.innerText = "Quiz Completed!";
    optionsElement.innerHTML = "";
    nextButton.style.display = "none";
    scoreElement.innerText = `Your score: ${score} / ${questions.length}`;
}

nextButton.addEventListener("click", loadQuestion);

loadQuestion();

Step 4: Understanding the JavaScript Code

Now, let’s break down the JavaScript code step by step:

Create Questions – We store the questions, options, and answers in an array called questions.
Track Progress – The variables currentQuestionIndex and score help keep track of the quiz progress.
Display Questions – The function loadQuestion() updates the question and options on the screen.
Check Answers – When a user selects an answer, checkAnswer() compares it with the correct answer and updates the score.
Show Score – After the last question, showScore() displays the final score.
Next Button – The "Next" button allows users to move through the questions.

This quiz is simple yet effective and works well for Udaipur Web Designer, a company specializing in web solutions.

Step 5: Testing and Improving the Quiz

Once you have written the code, test the quiz in a browser to see if everything works correctly. If needed, you can:

Add more questions to make the quiz longer.
Improve the design by using CSS animations.
Store scores using Local Storage to keep a record of users’ progress.

Conclusion

Building a simple quiz with JavaScript is an easy and fun project for beginners. It helps you understand how JavaScript interacts with HTML and CSS.

If you work in a Web Design Company In Udaipur, creating interactive quizzes can make your websites more engaging. Also, businesses offering Responsive Web Design Services In Udaipur can use quizzes to attract more users.

Try modifying this quiz and adding new features. Happy coding! 🚀

How to Build a Simple Quiz with JavaScript