Scribd Logo
Upload

Welcome to Scribd!

  • Quiz Game

    Uploaded by

    madhurinetsmartz
    3 views3 pages

    Original Title

    QuizGame

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    3 views3 pages

    Quiz Game

    Uploaded by

    madhurinetsmartz

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    of 3

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Quiz Game</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <style>
    body {
    font-family: Arial, sans-serif;
    text-align: center;
    }

    h1 {
    color: #333;
    }

    #quiz-container {
    margin-top: 20px;
    }

    #question-container {
    margin-bottom: 10px;
    }

    #answers-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    }

    .answer-btn {
    padding: 10px 20px;
    font-size: 16px;
    }

    #result {
    font-size: 18px;
    margin-bottom: 10px;
    }

    #timer {
    font-size: 16px;
    }

    </style>
    <body>
    <h1>Quiz Game</h1>
    <div id="quiz-container">
    <div id="question-container">
    <p id="question"></p>
    </div>
    <div id="answers-container">
    <button class="answer-btn"></button>
    <button class="answer-btn"></button>
    <button class="answer-btn"></button>
    <button class="answer-btn"></button>
    </div>
    <div id="result"></div>
    <div id="timer">Time: <span id="time"></span></div>
    </div>

    <script>
    // Quiz questions and answers
    const quizData = [
    {
    question: "What is the capital of France?",
    answers: ["Paris", "London", "Rome", "Madrid"],
    correctAnswer: "Paris"
    },
    {
    question: "Who painted the Mona Lisa?",
    answers: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh",
    "Michelangelo"],
    correctAnswer: "Leonardo da Vinci"
    },
    {
    question: "What is the tallest mountain in the world?",
    answers: ["Mount Everest", "K2", "Kangchenjunga", "Makalu"],
    correctAnswer: "Mount Everest"
    }
    ];

    let currentQuestionIndex = 0;
    let score = 0;
    let timer;

    const questionElement = document.getElementById('question');


    const answersContainer = document.getElementById('answers-container');
    const resultElement = document.getElementById('result');
    const timeElement = document.getElementById('time');

    // Function to start the quiz


    function startQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    resultElement.innerText = '';
    timeElement.innerText = '';

    startTimer();

    showQuestion();
    }

    // Function to show a question and its answers


    function showQuestion() {
    if (currentQuestionIndex < quizData.length) {
    const question = quizData[currentQuestionIndex];
    questionElement.innerText = question.question;

    answersContainer.innerHTML = '';

    question.answers.forEach(answer => {
    const answerButton = document.createElement('button');
    answerButton.classList.add('answer-btn');
    answerButton.innerText = answer;
    answerButton.addEventListener('click', () => {
    checkAnswer(answer);
    });
    answersContainer.appendChild(answerButton);
    });
    } else {
    endQuiz();
    }
    }

    // Function to check the selected answer


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

    currentQuestionIndex++;
    showQuestion();
    }

    // Function to end the quiz


    function endQuiz() {
    clearTimeout(timer);

    const totalQuestions = quizData.length;


    const percentage = ((score / totalQuestions) * 100).toFixed(2);

    resultElement.innerText = `Quiz Ended! Your Score: ${score}/${totalQuestions} ($


    {percentage}%)`;
    }

    // Function to start the timer


    function startTimer() {
    let time = 0;

    function updateTime() {
    time++;
    timeElement.innerText = formatTime(time);
    timer = setTimeout(updateTime, 1000);
    }

    updateTime();
    }

    // Function to format time (mm:ss)


    function formatTime(time) {
    const minutes = Math.floor(time / 60).toString().padStart(2, '0');
    const seconds = (time % 60).toString().padStart(2, '0');
    return `${minutes}:${seconds}`;
    }

    // Start the quiz


    startQuiz();

    </script>
    </body>
    </html>

    You might also like