Quiz App by @AhsanHabib007 - Codewith.it

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

Referenze

<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<select>Usato per creare un menu a tendina.
valueValore alfanumerico o booleano contenuto in un elemento
<h5>Titolo di intestazione di quinto livello
getDefinisce un metodo di invio di dati al server
listCollega un elemento input con una lista di opzioni datalist

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Review of Functions I

Orario 5G A.S. 2024 - 2025

esercizio 1.1-1.6

tabella con foto e collegamenti ip

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