quiz / index.html
ghost613's picture
Add 2 files
51bd93f verified
<!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 -->
<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>
<!-- Quiz Container -->
<div id="quiz-container" class="bg-white rounded-xl shadow-xl overflow-hidden transition-all duration-300">
<!-- Start Screen -->
<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>
<!-- Quiz Screen -->
<div id="quiz-screen" class="hidden p-6 md:p-8">
<!-- Progress Bar -->
<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>
<!-- Question -->
<div id="question-container" class="mb-8">
<h2 id="question" class="text-xl md:text-2xl font-semibold text-gray-800 mb-6"></h2>
<!-- Options -->
<div id="options-container" class="grid grid-cols-1 md:grid-cols-2 gap-3 mb-8">
<!-- Options will be inserted here by JavaScript -->
</div>
</div>
<!-- Navigation -->
<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>
<!-- Results Screen -->
<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">
<!-- Icon will be inserted here by JavaScript -->
</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 -->
<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() {
// DOM Elements
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');
// Quiz Variables
let currentQuestionIndex = 0;
let score = 0;
let questions = [];
let userAnswers = [];
let quizCompleted = false;
// Questions Data (can be expanded or fetched from an API)
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
}
]
};
// Start Quiz
startBtn.addEventListener('click', startQuiz);
// Next Question
nextBtn.addEventListener('click', () => {
if (currentQuestionIndex < questions.length - 1) {
currentQuestionIndex++;
showQuestion();
} else if (currentQuestionIndex === questions.length - 1) {
showResults();
}
});
// Previous Question
prevBtn.addEventListener('click', () => {
if (currentQuestionIndex > 0) {
currentQuestionIndex--;
showQuestion();
}
});
// Submit Quiz
submitBtn.addEventListener('click', showResults);
// Retry Quiz
retryBtn.addEventListener('click', () => {
startQuiz(difficultySelect.value);
});
// New Quiz
newQuizBtn.addEventListener('click', () => {
startScreen.classList.remove('hidden');
quizScreen.classList.add('hidden');
resultsScreen.classList.add('hidden');
});
// Start Quiz Function
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();
}
// Show Question Function
function showQuestion() {
const question = questions[currentQuestionIndex];
questionElement.textContent = question.question;
// Clear previous options
optionsContainer.innerHTML = '';
// Create new options
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);
});
// Update navigation buttons
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');
}
// Update progress bar
const progressPercentage = ((currentQuestionIndex + 1) / questions.length) * 100;
progressBar.style.width = `${progressPercentage}%`;
// Update score
scoreElement.textContent = score;
}
// Select Option Function
function selectOption(optionIndex) {
if (quizCompleted) return;
const question = questions[currentQuestionIndex];
const optionButtons = document.querySelectorAll('.option-btn');
// Remove selected class from all options
optionButtons.forEach(btn => {
btn.classList.remove('bg-blue-100', 'option-selected');
});
// Add selected class to clicked option
optionButtons[optionIndex].classList.add('bg-blue-100', 'option-selected');
// Store user answer
userAnswers[currentQuestionIndex] = optionIndex;
// Check if answer is correct (only if not already answered)
if (question.answer === question.options[optionIndex]) {
// Only add points if this question wasn't answered before
if (userAnswers[currentQuestionIndex] === null) {
score += question.points;
scoreElement.textContent = score;
}
} else {
// If changing from correct to wrong answer, subtract points
if (userAnswers[currentQuestionIndex] !== null &&
question.answer === question.options[userAnswers[currentQuestionIndex]]) {
score -= question.points;
scoreElement.textContent = score;
}
}
}
// Show Results Function
function showResults() {
quizCompleted = true;
// Calculate final score and correct answers
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;
// Set results content
finalScoreElement.textContent = score;
maxScoreElement.textContent = maxScore;
correctAnswersElement.textContent = correctAnswers;
wrongAnswersElement.textContent = questions.length - correctAnswers;
playedDifficultyElement.textContent = difficultySelect.options[difficultySelect.selectedIndex].text;
// Set result title and icon based on performance
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>`;
// Show results screen
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>