| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>BrainyQuiz - Test Your General Knowledge</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @keyframes pulse { |
| 0%, 100% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| } |
| .pulse-animation { |
| animation: pulse 1.5s infinite; |
| } |
| .option-selected { |
| transform: scale(0.98); |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); |
| } |
| .progress-bar { |
| transition: width 0.5s ease-in-out; |
| } |
| .fade-in { |
| animation: fadeIn 0.5s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body class="bg-gradient-to-br from-blue-50 to-purple-50 min-h-screen font-sans"> |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> |
| |
| <header class="text-center mb-12 fade-in"> |
| <h1 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 mb-2"> |
| <i class="fas fa-brain mr-2"></i>BrainyQuiz |
| </h1> |
| <p class="text-gray-600 text-lg">Test your general knowledge with our challenging quiz!</p> |
| </header> |
|
|
| |
| <div id="quiz-container" class="bg-white rounded-xl shadow-xl overflow-hidden transition-all duration-300"> |
| |
| <div id="start-screen" class="p-8 text-center fade-in"> |
| <div class="w-24 h-24 mx-auto mb-6 bg-blue-100 rounded-full flex items-center justify-center"> |
| <i class="fas fa-question text-blue-500 text-4xl"></i> |
| </div> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Ready to Challenge Yourself?</h2> |
| <p class="text-gray-600 mb-8">This quiz contains 10 questions from various general knowledge categories. Try to answer as many as you can correctly!</p> |
| |
| <div class="mb-8"> |
| <label for="difficulty" class="block text-gray-700 font-medium mb-2">Select Difficulty:</label> |
| <select id="difficulty" class="w-full md:w-64 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> |
| <option value="easy">Easy</option> |
| <option value="medium" selected>Medium</option> |
| <option value="hard">Hard</option> |
| </select> |
| </div> |
| |
| <button id="start-btn" class="px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-semibold rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105 pulse-animation"> |
| Start Quiz <i class="fas fa-play ml-2"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="quiz-screen" class="hidden p-6 md:p-8"> |
| |
| <div class="mb-6"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm font-medium text-gray-600">Question <span id="current-question">1</span>/<span id="total-questions">10</span></span> |
| <span class="text-sm font-medium text-gray-600"><span id="score">0</span> points</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> |
| <div id="progress-bar" class="progress-bar bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="question-container" class="mb-8"> |
| <h2 id="question" class="text-xl md:text-2xl font-semibold text-gray-800 mb-6"></h2> |
| |
| |
| <div id="options-container" class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-8"> |
| |
| </div> |
| </div> |
|
|
| |
| <div class="flex justify-between"> |
| <button id="prev-btn" class="px-6 py-2 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
| <i class="fas fa-arrow-left mr-2"></i> Previous |
| </button> |
| <button id="next-btn" class="px-6 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition"> |
| Next <i class="fas fa-arrow-right ml-2"></i> |
| </button> |
| <button id="submit-btn" class="px-6 py-2 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 transition hidden"> |
| Submit <i class="fas fa-check ml-2"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="results-screen" class="hidden p-8 text-center"> |
| <div class="w-32 h-32 mx-auto mb-6 rounded-full flex items-center justify-center" id="result-icon-container"> |
| |
| </div> |
| <h2 class="text-3xl font-bold text-gray-800 mb-4" id="result-title"></h2> |
| <p class="text-xl text-gray-600 mb-6">You scored <span id="final-score" class="font-bold text-blue-600">0</span> out of <span id="max-score" class="font-bold">10</span></p> |
| |
| <div class="bg-gray-100 rounded-lg p-4 mb-8 text-left max-w-md mx-auto"> |
| <h3 class="font-semibold text-gray-700 mb-2">Quiz Summary:</h3> |
| <p class="text-sm text-gray-600"><span id="correct-answers" class="font-medium text-green-600">0</span> correct answers</p> |
| <p class="text-sm text-gray-600"><span id="wrong-answers" class="font-medium text-red-600">0</span> wrong answers</p> |
| <p class="text-sm text-gray-600">Difficulty: <span id="played-difficulty" class="font-medium text-blue-600">Medium</span></p> |
| </div> |
| |
| <div class="flex justify-center gap-4"> |
| <button id="retry-btn" class="px-6 py-2 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition"> |
| <i class="fas fa-redo mr-2"></i> Try Again |
| </button> |
| <button id="new-quiz-btn" class="px-6 py-2 bg-purple-500 text-white font-medium rounded-lg hover:bg-purple-600 transition"> |
| <i class="fas fa-list mr-2"></i> New Quiz |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="mt-12 text-center text-gray-500 text-sm"> |
| <p>© 2023 BrainyQuiz. All rights reserved.</p> |
| <p class="mt-1">Test your knowledge and challenge your friends!</p> |
| </footer> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const startScreen = document.getElementById('start-screen'); |
| const quizScreen = document.getElementById('quiz-screen'); |
| const resultsScreen = document.getElementById('results-screen'); |
| const startBtn = document.getElementById('start-btn'); |
| const prevBtn = document.getElementById('prev-btn'); |
| const nextBtn = document.getElementById('next-btn'); |
| const submitBtn = document.getElementById('submit-btn'); |
| const retryBtn = document.getElementById('retry-btn'); |
| const newQuizBtn = document.getElementById('new-quiz-btn'); |
| const questionElement = document.getElementById('question'); |
| const optionsContainer = document.getElementById('options-container'); |
| const currentQuestionElement = document.getElementById('current-question'); |
| const totalQuestionsElement = document.getElementById('total-questions'); |
| const scoreElement = document.getElementById('score'); |
| const progressBar = document.getElementById('progress-bar'); |
| const finalScoreElement = document.getElementById('final-score'); |
| const maxScoreElement = document.getElementById('max-score'); |
| const correctAnswersElement = document.getElementById('correct-answers'); |
| const wrongAnswersElement = document.getElementById('wrong-answers'); |
| const playedDifficultyElement = document.getElementById('played-difficulty'); |
| const resultTitleElement = document.getElementById('result-title'); |
| const resultIconContainer = document.getElementById('result-icon-container'); |
| const difficultySelect = document.getElementById('difficulty'); |
| |
| |
| let currentQuestionIndex = 0; |
| let score = 0; |
| let questions = []; |
| let userAnswers = []; |
| let quizCompleted = false; |
| |
| |
| const questionsData = { |
| easy: [ |
| { |
| question: "What is the capital of France?", |
| options: ["Berlin", "Madrid", "Paris", "Rome"], |
| answer: "Paris", |
| points: 1 |
| }, |
| { |
| question: "Which planet is known as the Red Planet?", |
| options: ["Venus", "Mars", "Jupiter", "Saturn"], |
| answer: "Mars", |
| points: 1 |
| }, |
| { |
| question: "What is the largest mammal in the world?", |
| options: ["Elephant", "Blue Whale", "Giraffe", "Polar Bear"], |
| answer: "Blue Whale", |
| points: 1 |
| }, |
| { |
| question: "Who painted the Mona Lisa?", |
| options: ["Vincent van Gogh", "Pablo Picasso", "Leonardo da Vinci", "Michelangelo"], |
| answer: "Leonardo da Vinci", |
| points: 1 |
| }, |
| { |
| question: "What is the chemical symbol for gold?", |
| options: ["Go", "Gd", "Au", "Ag"], |
| answer: "Au", |
| points: 1 |
| }, |
| { |
| question: "Which country is home to the kangaroo?", |
| options: ["New Zealand", "South Africa", "Australia", "Brazil"], |
| answer: "Australia", |
| points: 1 |
| }, |
| { |
| question: "What is the largest ocean on Earth?", |
| options: ["Atlantic Ocean", "Indian Ocean", "Arctic Ocean", "Pacific Ocean"], |
| answer: "Pacific Ocean", |
| points: 1 |
| }, |
| { |
| question: "How many continents are there on Earth?", |
| options: ["5", "6", "7", "8"], |
| answer: "7", |
| points: 1 |
| }, |
| { |
| question: "What is the main ingredient in guacamole?", |
| options: ["Tomato", "Avocado", "Onion", "Pepper"], |
| answer: "Avocado", |
| points: 1 |
| }, |
| { |
| question: "Which year did World War II end?", |
| options: ["1943", "1945", "1947", "1950"], |
| answer: "1945", |
| points: 1 |
| } |
| ], |
| medium: [ |
| { |
| question: "Which element has the atomic number 1?", |
| options: ["Helium", "Hydrogen", "Oxygen", "Carbon"], |
| answer: "Hydrogen", |
| points: 2 |
| }, |
| { |
| question: "Who wrote 'Romeo and Juliet'?", |
| options: ["Charles Dickens", "William Shakespeare", "Jane Austen", "Mark Twain"], |
| answer: "William Shakespeare", |
| points: 2 |
| }, |
| { |
| question: "What is the largest organ in the human body?", |
| options: ["Liver", "Brain", "Skin", "Heart"], |
| answer: "Skin", |
| points: 2 |
| }, |
| { |
| question: "Which country is the largest by land area?", |
| options: ["Canada", "China", "United States", "Russia"], |
| answer: "Russia", |
| points: 2 |
| }, |
| { |
| question: "What is the currency of Japan?", |
| options: ["Yuan", "Won", "Yen", "Ringgit"], |
| answer: "Yen", |
| points: 2 |
| }, |
| { |
| question: "Which planet is closest to the Sun?", |
| options: ["Venus", "Mercury", "Earth", "Mars"], |
| answer: "Mercury", |
| points: 2 |
| }, |
| { |
| question: "Who discovered gravity?", |
| options: ["Albert Einstein", "Isaac Newton", "Galileo Galilei", "Nikola Tesla"], |
| answer: "Isaac Newton", |
| points: 2 |
| }, |
| { |
| question: "What is the tallest mountain in the world?", |
| options: ["K2", "Mount Everest", "Kangchenjunga", "Lhotse"], |
| answer: "Mount Everest", |
| points: 2 |
| }, |
| { |
| question: "Which language has the most native speakers?", |
| options: ["English", "Hindi", "Spanish", "Mandarin Chinese"], |
| answer: "Mandarin Chinese", |
| points: 2 |
| }, |
| { |
| question: "What is the largest desert in the world?", |
| options: ["Sahara Desert", "Arabian Desert", "Gobi Desert", "Antarctica"], |
| answer: "Antarctica", |
| points: 2 |
| } |
| ], |
| hard: [ |
| { |
| question: "Which country has the most time zones?", |
| options: ["United States", "Russia", "France", "China"], |
| answer: "France", |
| points: 3 |
| }, |
| { |
| question: "What is the only letter that doesn't appear in any US state name?", |
| options: ["Q", "Z", "X", "J"], |
| answer: "Q", |
| points: 3 |
| }, |
| { |
| question: "Which planet has the most moons?", |
| options: ["Jupiter", "Saturn", "Uranus", "Neptune"], |
| answer: "Saturn", |
| points: 3 |
| }, |
| { |
| question: "What is the only edible food that never goes bad?", |
| options: ["Salt", "Sugar", "Honey", "Rice"], |
| answer: "Honey", |
| points: 3 |
| }, |
| { |
| question: "Which country invented tea?", |
| options: ["India", "England", "China", "Japan"], |
| answer: "China", |
| points: 3 |
| }, |
| { |
| question: "What is the most spoken language in the world?", |
| options: ["English", "Mandarin Chinese", "Hindi", "Spanish"], |
| answer: "English", |
| points: 3 |
| }, |
| { |
| question: "Which animal has three hearts?", |
| options: ["Octopus", "Squid", "Cuttlefish", "Nautilus"], |
| answer: "Octopus", |
| points: 3 |
| }, |
| { |
| question: "What is the only continent without reptiles or snakes?", |
| options: ["Australia", "Antarctica", "Europe", "North America"], |
| answer: "Antarctica", |
| points: 3 |
| }, |
| { |
| question: "Which country has the most islands?", |
| options: ["Indonesia", "Philippines", "Sweden", "Canada"], |
| answer: "Sweden", |
| points: 3 |
| }, |
| { |
| question: "What is the smallest country in the world?", |
| options: ["Monaco", "Vatican City", "San Marino", "Liechtenstein"], |
| answer: "Vatican City", |
| points: 3 |
| } |
| ] |
| }; |
| |
| |
| startBtn.addEventListener('click', startQuiz); |
| |
| |
| nextBtn.addEventListener('click', () => { |
| if (currentQuestionIndex < questions.length - 1) { |
| currentQuestionIndex++; |
| showQuestion(); |
| } else if (currentQuestionIndex === questions.length - 1) { |
| showResults(); |
| } |
| }); |
| |
| |
| prevBtn.addEventListener('click', () => { |
| if (currentQuestionIndex > 0) { |
| currentQuestionIndex--; |
| showQuestion(); |
| } |
| }); |
| |
| |
| submitBtn.addEventListener('click', showResults); |
| |
| |
| retryBtn.addEventListener('click', () => { |
| startQuiz(difficultySelect.value); |
| }); |
| |
| |
| newQuizBtn.addEventListener('click', () => { |
| startScreen.classList.remove('hidden'); |
| quizScreen.classList.add('hidden'); |
| resultsScreen.classList.add('hidden'); |
| }); |
| |
| |
| function startQuiz() { |
| const difficulty = difficultySelect.value; |
| questions = [...questionsData[difficulty]]; |
| currentQuestionIndex = 0; |
| score = 0; |
| userAnswers = Array(questions.length).fill(null); |
| quizCompleted = false; |
| |
| startScreen.classList.add('hidden'); |
| quizScreen.classList.remove('hidden'); |
| resultsScreen.classList.add('hidden'); |
| |
| totalQuestionsElement.textContent = questions.length; |
| showQuestion(); |
| } |
| |
| |
| function showQuestion() { |
| const question = questions[currentQuestionIndex]; |
| questionElement.textContent = question.question; |
| |
| |
| optionsContainer.innerHTML = ''; |
| |
| |
| question.options.forEach((option, index) => { |
| const optionElement = document.createElement('button'); |
| optionElement.className = `option-btn p-4 text-left border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center ${ |
| userAnswers[currentQuestionIndex] === index ? 'bg-blue-100 option-selected' : '' |
| }`; |
| |
| optionElement.innerHTML = ` |
| <span class="w-8 h-8 flex items-center justify-center bg-blue-100 text-blue-700 rounded-full mr-3 font-medium">${String.fromCharCode(65 + index)}</span> |
| <span>${option}</span> |
| `; |
| |
| optionElement.addEventListener('click', () => selectOption(index)); |
| optionsContainer.appendChild(optionElement); |
| }); |
| |
| |
| currentQuestionElement.textContent = currentQuestionIndex + 1; |
| prevBtn.disabled = currentQuestionIndex === 0; |
| |
| if (currentQuestionIndex === questions.length - 1) { |
| nextBtn.classList.add('hidden'); |
| submitBtn.classList.remove('hidden'); |
| } else { |
| nextBtn.classList.remove('hidden'); |
| submitBtn.classList.add('hidden'); |
| } |
| |
| |
| const progressPercentage = ((currentQuestionIndex + 1) / questions.length) * 100; |
| progressBar.style.width = `${progressPercentage}%`; |
| |
| |
| scoreElement.textContent = score; |
| } |
| |
| |
| function selectOption(optionIndex) { |
| if (quizCompleted) return; |
| |
| const question = questions[currentQuestionIndex]; |
| const optionButtons = document.querySelectorAll('.option-btn'); |
| |
| |
| optionButtons.forEach(btn => { |
| btn.classList.remove('bg-blue-100', 'option-selected'); |
| }); |
| |
| |
| optionButtons[optionIndex].classList.add('bg-blue-100', 'option-selected'); |
| |
| |
| userAnswers[currentQuestionIndex] = optionIndex; |
| |
| |
| if (question.answer === question.options[optionIndex]) { |
| |
| if (userAnswers[currentQuestionIndex] === null) { |
| score += question.points; |
| scoreElement.textContent = score; |
| } |
| } else { |
| |
| if (userAnswers[currentQuestionIndex] !== null && |
| question.answer === question.options[userAnswers[currentQuestionIndex]]) { |
| score -= question.points; |
| scoreElement.textContent = score; |
| } |
| } |
| } |
| |
| |
| function showResults() { |
| quizCompleted = true; |
| |
| |
| let correctAnswers = 0; |
| questions.forEach((question, index) => { |
| if (userAnswers[index] !== null && |
| question.options[userAnswers[index]] === question.answer) { |
| correctAnswers++; |
| } |
| }); |
| |
| const maxScore = questions.reduce((sum, question) => sum + question.points, 0); |
| const percentage = (score / maxScore) * 100; |
| |
| |
| finalScoreElement.textContent = score; |
| maxScoreElement.textContent = maxScore; |
| correctAnswersElement.textContent = correctAnswers; |
| wrongAnswersElement.textContent = questions.length - correctAnswers; |
| playedDifficultyElement.textContent = difficultySelect.options[difficultySelect.selectedIndex].text; |
| |
| |
| let resultTitle, resultIcon, iconColor; |
| if (percentage >= 80) { |
| resultTitle = "Excellent!"; |
| resultIcon = "fa-trophy"; |
| iconColor = "bg-yellow-100 text-yellow-500"; |
| } else if (percentage >= 50) { |
| resultTitle = "Good Job!"; |
| resultIcon = "fa-thumbs-up"; |
| iconColor = "bg-blue-100 text-blue-500"; |
| } else { |
| resultTitle = "Try Again!"; |
| resultIcon = "fa-redo"; |
| iconColor = "bg-red-100 text-red-500"; |
| } |
| |
| resultTitleElement.textContent = resultTitle; |
| resultIconContainer.className = `w-32 h-32 mx-auto mb-6 rounded-full flex items-center justify-center ${iconColor}`; |
| resultIconContainer.innerHTML = `<i class="fas ${resultIcon} text-5xl"></i>`; |
| |
| |
| quizScreen.classList.add('hidden'); |
| resultsScreen.classList.remove('hidden'); |
| } |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ghost613/quiz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
