Coding With Nick Watch on YouTube

Create a Quiz App using HTML CSS & JavaScript | Quiz Web App using JavaScript

3 min read 1 year ago
Published on Aug 05, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to create a simple quiz app using HTML, CSS, and JavaScript. This project is ideal for beginners looking to enhance their web development skills by building a functional application. By the end of this guide, you will have a quiz app that can display questions, accept user inputs, and provide feedback based on the answers.

Step 1: Set Up Your Development Environment

  • Download and install a code editor, such as Visual Studio Code.
  • Install the following extensions in your code editor:
    • Emmet
    • Live Server
  • Choose a color theme, like One Dark Pro, for a better coding experience.

Step 2: Create the Project Structure

  • Create a new folder for your quiz app.
  • Inside this folder, create three files:
    • index.html
    • style.css
    • script.js

Step 3: Build the HTML Structure

  • Open index.html and add the following basic structure:
<!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="style.css">
</head>
<body>
    <div class="quiz-container">
        <h1>Quiz App</h1>
        <div id="question-container"></div>
        <button id="next-button">Next</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 4: Style the Quiz App

  • Open style.css and add styles to enhance the appearance of your app. Here's a basic example:
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

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

button {
    padding: 10px 20px;
    margin-top: 20px;
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

Step 5: Write the JavaScript Logic

  • Open script.js and start by defining your quiz questions and answers:
const questions = [
    {
        question: "What is the capital of France?",
        answers: [
            { text: "Berlin", correct: false },
            { text: "Madrid", correct: false },
            { text: "Paris", correct: true },
            { text: "Rome", 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;
const questionContainer = document.getElementById('question-container');
const nextButton = document.getElementById('next-button');

function startGame() {
    currentQuestionIndex = 0;
    nextButton.classList.add('hide');
    showQuestion(questions[currentQuestionIndex]);
}

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

function selectAnswer(answer) {
    const correct = answer.correct;
    if (correct) {
        alert("Correct!");
    } else {
        alert("Wrong answer. Try again!");
    }
    nextButton.classList.remove('hide');
}

nextButton.addEventListener('click', () => {
    currentQuestionIndex++;
    if (currentQuestionIndex < questions.length) {
        showQuestion(questions[currentQuestionIndex]);
    } else {
        alert("Quiz finished!");
    }
});

startGame();

Conclusion

You have now created a basic quiz app using HTML, CSS, and JavaScript. This project allows you to practice your skills in web development and can be expanded with additional features, such as scoring, timers, and more questions. Consider exploring these enhancements to further develop your programming abilities. Happy coding!

Table of Contents

Recent