Quiz App by @AhsanHabib007 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<h5>Titolo di intestazione di quinto livello
<aside>Definisce un contenuto separato dal testo perincipale
crossoriginGestisce richieste tra documenti provenienti da origini differenti.

Users

Log in to search for users

Explore

Find inspiration

Il mio primo sito

20240126 pagina html

servizio_fiscale.html

Quiz ristrutturazione

Lezione 4 (terza parte)

scheda paziente es esame

Casetta NEWTON+

WOO (CHRONO)(Black, Yellow)

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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="container">
        <h1>Quiz App</h1>
        <div id="quiz-container">
            <div id="question-container">
                <p id="question">Question will go here</p>
                <div id="options">
                    <!-- Options will be appended here -->
                </div>
            </div>
            <button id="next-btn" onclick="nextQuestion()">Next</button>
            <button id="reset-btn" onclick="resetQuiz()" style="display: none;">Reset</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

h1 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

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

#options {
    margin-bottom: 20px;
}

.option {
    background-color: #112437;
    border: none;
    border-radius: 5px;
    margin: 5px 0;
    padding: 10px;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.option.correct {
    background-color: #28a745;
    color: white;
}

.option.wrong {
    background-color: #dc3545;
    color: white;
}

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

button:hover {
    background-color: #0056b3;
}

#reset-btn {
    background-color: #ff4081;
    display: block;
    margin: 0 auto;
}

#reset-btn:hover {
    background-color: #ff79b0;
}

const questions = [
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউট কোথায় অবস্থিত?", options: ["ঢাকা", "রাজশাহী", "চট্টগ্রাম", "খুলনা"], answer: "রাজশাহী" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের প্রতিষ্ঠা সাল কত?", options: ["১৯৫৫", "১৯৬৩", "১৯৭১", "১৯৮০"], answer: "১৯৬৩" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের মোট বিভাগ কয়টি?", options: ["৮", "১০", "১২", "১৪"], answer: "১০" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের বর্তমান অধ্যক্ষের নাম কি?", options: ["মোঃ আব্দুল মজিদ", "মোঃ আব্দুল করিম", "মোঃ আব্দুল কাদের", "মোঃ আব্দুল হাকিম"], answer: "মোঃ আব্দুল করিম" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটে মোট ছাত্র সংখ্যা কত?", options: ["৩০০০", "৪০০০", "৫০০০", "৬০০০"], answer: "৪০০০" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের ল্যাবরেটরি সুবিধা কেমন?", options: ["খুব ভাল", "ভাল", "মোটামুটি", "খারাপ"], answer: "খুব ভাল" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটে কোন বিভাগটি নেই?", options: ["কম্পিউটার", "সিভিল", "মেকানিক্যাল", "ডেন্টাল"], answer: "ডেন্টাল" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের ছাত্রাবাস সংখ্যা কত?", options: ["২", "৩", "৪", "৫"], answer: "৪" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের ওয়েবসাইটের ঠিকানা কি?", options: ["www.rpi.gov.bd", "www.rpi.edu.bd", "www.rpi.ac.bd", "www.rpi.com.bd"], answer: "www.rpi.edu.bd" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের ফেসবুক পেজের নাম কি?", options: ["RPI Official", "Rajshahi Polytechnic", "RPI Bangladesh", "Rajshahi Polytechnic Institute"], answer: "Rajshahi Polytechnic Institute" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের ক্যান্টিন সুবিধা কেমন?", options: ["খুব ভাল", "ভাল", "মোটামুটি", "খারাপ"], answer: "ভাল" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের খেলার মাঠ কেমন?", options: ["বড়", "মাঝারি", "ছোট", "নেই"], answer: "বড়" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের গ্রন্থাগার কেমন?", options: ["খুব ভাল", "ভাল", "মোটামুটি", "খারাপ"], answer: "খুব ভাল" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটে মোট শিক্ষক সংখ্যা কত?", options: ["৫০", "৭৫", "১০০", "১২৫"], answer: "১০০" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের প্রধান ভবনের নাম কি?", options: ["মেইন বিল্ডিং", "একাডেমিক ভবন", "প্রশাসনিক ভবন", "লাইব্রেরি ভবন"], answer: "একাডেমিক ভবন" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটে কোন বিষয়টি পড়ানো হয়?", options: ["কম্পিউটার", "মেডিসিন", "ডেন্টাল", "আইন"], answer: "কম্পিউটার" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের কোন বিভাগটি সবচেয়ে পুরনো?", options: ["কম্পিউটার", "সিভিল", "মেকানিক্যাল", "ইলেকট্রিক্যাল"], answer: "সিভিল" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের কতটি সেমিস্টার আছে?", options: ["৪", "৬", "৮", "১০"], answer: "৮" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের ছাত্রছাত্রীদের জন্য কোন সুবিধাটি আছে?", options: ["লাইব্রেরি", "খেলার মাঠ", "ক্যান্টিন", "উপরের সবগুলো"], answer: "উপরের সবগুলো" },
    { question: "রাজশাহী পলিটেকনিক ইনস্টিটিউটের ছাত্রছাত্রীদের কতটুকু নিয়মিত ক্লাস করতে হয়?", options: ["৫০%", "৬০%", "৭০%", "৮০%"], answer: "৮০%" }
];

let currentQuestionIndex = 0;
let correctAnswers = 0;
let wrongAnswers = 0;
let isAnswered = false;

function loadQuestion() {
    isAnswered = false;
    const currentQuestion = questions[currentQuestionIndex];
    document.getElementById('question').innerText = currentQuestion.question;
    const optionsDiv = document.getElementById('options');
    optionsDiv.innerHTML = '';
    currentQuestion.options.forEach(option => {
        const button = document.createElement('button');
        button.classList.add('option');
        button.innerText = option;
        button.onclick = () => selectOption(button, option);
        optionsDiv.appendChild(button);
    });
    document.getElementById('next-btn').style.display = 'block';
    document.getElementById('reset-btn').style.display = 'none';
}

function selectOption(button, selectedOption) {
    if (isAnswered) return;
    isAnswered = true;
    const currentQuestion = questions[currentQuestionIndex];
    if (selectedOption === currentQuestion.answer) {
        button.classList.add('correct');
        correctAnswers++;
    } else {
        button.classList.add('wrong');
        wrongAnswers++;
    }
    document.querySelectorAll('.option').forEach(btn => {
        if (btn.innerText === currentQuestion.answer) {
            btn.classList.add('correct');
        }
    });
}

function nextQuestion() {
    if (currentQuestionIndex < questions.length - 1) {
        currentQuestionIndex++;
        loadQuestion();
    } else {
        document.getElementById('next-btn').style.display = 'none';
        document.getElementById('reset-btn').style.display = 'block';
        document.getElementById('question').innerText = `Quiz completed! Correct: ${correctAnswers}, Wrong: ${wrongAnswers}`;
        document.getElementById('options').innerHTML = '';
    }
}

function resetQuiz() {
    currentQuestionIndex = 0;
    correctAnswers = 0;
    wrongAnswers = 0;
    loadQuestion();
}

// Load the first question
loadQuestion();