Quiz App by @AhsanHabib007 - Codewith.it

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

Referenze

idIdentifica univocamente un elemento HTML
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<meta>Definisce i meta dati di una pagina web.
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
multipart/form-dataCodifica dei caratteri di un form

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

La storia dell\\\\

hate this project

Spotify Profile

Botteghe on-line

Esercizio prova \"lista della

VERIFICA RANZI LEONARDO

Condizione esercizio 1

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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();