Online Quiz

—

by

in React JS Projects

HTML (index.html)

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Quiz App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Quiz App</h1>
        <div id="quiz"></div>
        <button id="submit" class="btn">Submit Quiz</button>
        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS (style.css)

cssCopy codebody {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}

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

h1 {
    text-align: center;
}

.question {
    margin: 20px 0;
}

.btn {
    display: block;
    width: 100%;
    padding: 10px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.btn:hover {
    background: #218838;
}

3. JavaScript (script.js)

javascriptCopy codeconst quizData = [
    {
        question: "What is the capital of France?",
        a: "Berlin",
        b: "Madrid",
        c: "Paris",
        d: "Lisbon",
        correct: "c"
    },
    {
        question: "Who wrote 'To Kill a Mockingbird'?",
        a: "Harper Lee",
        b: "Mark Twain",
        c: "F. Scott Fitzgerald",
        d: "Ernest Hemingway",
        correct: "a"
    },
    {
        question: "What is the largest planet in our solar system?",
        a: "Earth",
        b: "Mars",
        c: "Jupiter",
        d: "Saturn",
        correct: "c"
    },
    {
        question: "What is the smallest prime number?",
        a: "0",
        b: "1",
        c: "2",
        d: "3",
        correct: "c"
    }
];

const quizContainer = document.getElementById('quiz');
const submitButton = document.getElementById('submit');
const resultContainer = document.getElementById('result');

let currentQuestionIndex = 0;
let score = 0;

function loadQuiz() {
    const currentQuizData = quizData[currentQuestionIndex];
    quizContainer.innerHTML = `
        <div class="question">${currentQuizData.question}</div>
        <label><input type="radio" name="answer" value="a"> ${currentQuizData.a}</label><br>
        <label><input type="radio" name="answer" value="b"> ${currentQuizData.b}</label><br>
        <label><input type="radio" name="answer" value="c"> ${currentQuizData.c}</label><br>
        <label><input type="radio" name="answer" value="d"> ${currentQuizData.d}</label><br>
    `;
}

function getSelected() {
    const answers = document.querySelectorAll('input[name="answer"]');
    let answer;
    answers.forEach((ans) => {
        if (ans.checked) {
            answer = ans.value;
        }
    });
    return answer;
}

submitButton.addEventListener('click', () => {
    const answer = getSelected();
    if (answer) {
        if (answer === quizData[currentQuestionIndex].correct) {
            score++;
        }
        currentQuestionIndex++;
        if (currentQuestionIndex < quizData.length) {
            loadQuiz();
        } else {
            resultContainer.innerHTML = `
                <h2>You scored ${score} out of ${quizData.length}</h2>
            `;
            quizContainer.style.display = 'none';
            submitButton.style.display = 'none';
        }
    } else {
        alert('Please select an answer!');
    }
});

loadQuiz();

How to Run the Quiz App

Create the files: Create three files named index.html, style.css, and script.js.
Copy the code: Copy the respective code snippets into the appropriate files.
Open the HTML file: Open index.html in your web browser to see the quiz app in action.

Features You Can Add

Multiple choice with more than one correct answer.
Timer for each question.
Different categories of questions.
User authentication to save scores.
Database integration for a larger question pool.

Comments

Leave a Reply Cancel reply