|
<!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> |