Spaces:
Build error
Build error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dynamic Quiz Website</title> | |
| <style> | |
| /* Basic styling */ | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f4f4f9; | |
| color: #333; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| h1 { | |
| font-size: 32px; | |
| margin-bottom: 20px; | |
| color: #007BFF; | |
| } | |
| .menu, .quiz, .score, .leaderboard { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #fff; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background-color: #007BFF; | |
| color: #fff; | |
| border: none; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| margin: 5px; | |
| } | |
| button:hover { | |
| background-color: #0056b3; | |
| } | |
| .question { | |
| margin-bottom: 20px; | |
| } | |
| .options { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .options button { | |
| width: 80%; | |
| margin: 5px 0; | |
| } | |
| .score { | |
| font-size: 24px; | |
| margin-top: 20px; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 10px; | |
| background-color: #e0e0e0; | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| } | |
| .progress { | |
| height: 100%; | |
| background-color: #007BFF; | |
| border-radius: 5px; | |
| } | |
| .timer { | |
| font-size: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .hint { | |
| color: #ff5722; | |
| cursor: pointer; | |
| margin-top: 10px; | |
| } | |
| .leaderboard { | |
| margin-top: 20px; | |
| } | |
| .leaderboard table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .leaderboard th, .leaderboard td { | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| } | |
| .leaderboard th { | |
| background-color: #007BFF; | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Main Menu --> | |
| <div id="menu" class="menu"> | |
| <h1>Dynamic Quiz Website</h1> | |
| <p>Choose a topic and difficulty to start the quiz:</p> | |
| <select id="difficulty"> | |
| <option value="easy">Easy</option> | |
| <option value="medium">Medium</option> | |
| <option value="hard">Hard</option> | |
| </select> | |
| <button onclick="startQuiz('math')">Math</button> | |
| <button onclick="startQuiz('chemistry')">Chemistry</button> | |
| <button onclick="startQuiz('biology')">Biology</button> | |
| <button onclick="startQuiz('science')">Science</button> | |
| <button onclick="startQuiz('history')">History/Social Studies</button> | |
| <button onclick="startQuiz('language')">Language</button> | |
| <button onclick="showLeaderboard()">Leaderboard</button> | |
| </div> | |
| <!-- Quiz Section --> | |
| <div id="quiz" class="quiz" style="display: none;"> | |
| <h1 id="quizTopic"></h1> | |
| <div class="progress-bar"> | |
| <div class="progress" id="progress"></div> | |
| </div> | |
| <div class="timer" id="timer">Time left: 10</div> | |
| <div class="question"> | |
| <p id="questionText"></p> | |
| </div> | |
| <div class="options" id="options"></div> | |
| <div class="hint" onclick="useHint()">Get a hint (-2 points)</div> | |
| <button onclick="backToMenu()">Back to Menu</button> | |
| </div> | |
| <!-- Score Section --> | |
| <div id="score" class="score" style="display: none;"> | |
| <h1>Your Score</h1> | |
| <p id="scoreText"></p> | |
| <button onclick="backToMenu()">Back to Menu</button> | |
| <button onclick="shareResult()">Share Result</button> | |
| </div> | |
| <!-- Leaderboard Section --> | |
| <div id="leaderboard" class="leaderboard" style="display: none;"> | |
| <h1>Leaderboard</h1> | |
| <table id="leaderboardTable"> | |
| <thead> | |
| <tr> | |
| <th>Rank</th> | |
| <th>Username</th> | |
| <th>Score</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <!-- Leaderboard data will be populated here --> | |
| </tbody> | |
| </table> | |
| <button onclick="backToMenu()">Back to Menu</button> | |
| </div> | |
| <script> | |
| let currentTopic = ""; | |
| let difficulty = "easy"; | |
| let score = 0; | |
| let questionCount = 0; | |
| let timer; | |
| let timeLeft = 10; | |
| let hintUsed = false; | |
| let currentHint = ""; | |
| let correctAnswers = 0; // Track correct answers | |
| // Leaderboard data (mock data for now) | |
| const leaderboardData = [ | |
| { username: "Alice", score: 95 }, | |
| { username: "Bob", score: 90 }, | |
| { username: "Charlie", score: 85 }, | |
| ]; | |
| // Function to generate random math questions based on difficulty | |
| function generateMathQuestion() { | |
| const num1 = Math.floor(Math.random() * (difficulty === "easy" ? 10 : difficulty === "medium" ? 20 : 50)) + 1; | |
| const num2 = Math.floor(Math.random() * (difficulty === "easy" ? 10 : difficulty === "medium" ? 20 : 50)) + 1; | |
| const operators = ["+", "-", "*"]; | |
| const operator = operators[Math.floor(Math.random() * operators.length)]; | |
| const question = `What is ${num1} ${operator} ${num2}?`; | |
| const answer = eval(`${num1} ${operator} ${num2}`).toString(); | |
| const options = [answer]; | |
| while (options.length < 4) { | |
| const randomOption = Math.floor(Math.random() * (difficulty === "easy" ? 20 : difficulty === "medium" ? 50 : 100)) + 1; | |
| if (!options.includes(randomOption.toString())) { | |
| options.push(randomOption.toString()); | |
| } | |
| } | |
| options.sort(() => Math.random() - 0.5); // Shuffle options | |
| // Hint for math question | |
| currentHint = "Think about the order of operations (PEMDAS/BODMAS)."; | |
| return { question, options, answer }; | |
| } | |
| // Function to generate random chemistry questions | |
| function generateChemistryQuestion() { | |
| const questions = [ | |
| { | |
| question: "What is the chemical formula for water?", | |
| answer: "H2O", | |
| options: ["H2O", "CO2", "O2", "NaCl"], | |
| hint: "This compound is essential for life and covers most of the Earth's surface." | |
| }, | |
| { | |
| question: "What is the common name for H2O?", | |
| answer: "Water", | |
| options: ["Water", "Carbon Dioxide", "Oxygen", "Sodium Chloride"], | |
| hint: "This compound is commonly found in lakes, rivers, and oceans." | |
| }, | |
| { | |
| question: "Which compound is a greenhouse gas?", | |
| answer: "CO2", | |
| options: ["H2O", "CO2", "O2", "NaCl"], | |
| hint: "This compound is released when fossil fuels are burned." | |
| }, | |
| { | |
| question: "Balance the equation: H2 + O2 → H2O.", | |
| answer: "2H2 + O2 → 2H2O", | |
| options: ["H2 + O2 → H2O", "2H2 + O2 → 2H2O", "H2 + 2O2 → 2H2O", "2H2 + 2O2 → 2H2O"], | |
| hint: "Remember that the number of atoms on both sides of the equation must be equal." | |
| } | |
| ]; | |
| const randomQuestion = questions[Math.floor(Math.random() * questions.length)]; | |
| currentHint = randomQuestion.hint; | |
| return randomQuestion; | |
| } | |
| // Function to generate random biology questions | |
| function generateBiologyQuestion() { | |
| const questions = [ | |
| { | |
| question: "Which organelle is known as the powerhouse of the cell?", | |
| answer: "Mitochondria", | |
| options: ["Nucleus", "Mitochondria", "Ribosome", "Chloroplast"], | |
| hint: "This organelle produces energy in the form of ATP." | |
| }, | |
| { | |
| question: "What is the function of the ribosome?", | |
| answer: "Protein synthesis", | |
| options: ["Energy production", "Protein synthesis", "DNA replication", "Waste removal"], | |
| hint: "This organelle is responsible for creating proteins." | |
| }, | |
| { | |
| question: "Which part of the human body is responsible for pumping blood?", | |
| answer: "Heart", | |
| options: ["Brain", "Heart", "Liver", "Lungs"], | |
| hint: "This organ is part of the circulatory system." | |
| }, | |
| { | |
| question: "What is the largest organ in the human body?", | |
| answer: "Skin", | |
| options: ["Liver", "Skin", "Brain", "Heart"], | |
| hint: "This organ protects the body from external damage." | |
| } | |
| ]; | |
| const randomQuestion = questions[Math.floor(Math.random() * questions.length)]; | |
| currentHint = randomQuestion.hint; | |
| return randomQuestion; | |
| } | |
| // Function to generate random history/social studies questions | |
| function generateHistoryQuestion() { | |
| const questions = [ | |
| { | |
| question: "Who was the first President of the United States?", | |
| answer: "George Washington", | |
| options: ["Thomas Jefferson", "George Washington", "Abraham Lincoln", "John Adams"], | |
| hint: "He is often referred to as the 'Father of His Country'." | |
| }, | |
| { | |
| question: "In which year did World War II end?", | |
| answer: "1945", | |
| options: ["1939", "1945", "1950", "1960"], | |
| hint: "The war ended after the surrender of Japan." | |
| }, | |
| { | |
| question: "Which document declared the independence of the United States?", | |
| answer: "Declaration of Independence", | |
| options: ["Constitution", "Declaration of Independence", "Bill of Rights", "Magna Carta"], | |
| hint: "This document was adopted on July 4, 1776." | |
| }, | |
| { | |
| question: "Who wrote 'The Communist Manifesto'?", | |
| answer: "Karl Marx and Friedrich Engels", | |
| options: ["Karl Marx and Friedrich Engels", "Vladimir Lenin", "Joseph Stalin", "Mao Zedong"], | |
| hint: "This book was published in 1848." | |
| } | |
| ]; | |
| const randomQuestion = questions[Math.floor(Math.random() * questions.length)]; | |
| currentHint = randomQuestion.hint; | |
| return randomQuestion; | |
| } | |
| // Function to generate random language questions | |
| function generateLanguageQuestion() { | |
| const questions = [ | |
| { | |
| question: "What is the past tense of 'go'?", | |
| answer: "Went", | |
| options: ["Goed", "Went", "Gone", "Going"], | |
| hint: "This verb is irregular and does not follow the standard past tense rules." | |
| }, | |
| { | |
| question: "What is the plural of 'child'?", | |
| answer: "Children", | |
| options: ["Childs", "Children", "Childen", "Childe"], | |
| hint: "This word is an irregular plural." | |
| }, | |
| { | |
| question: "Which word is a synonym for 'happy'?", | |
| answer: "Joyful", | |
| options: ["Sad", "Joyful", "Angry", "Bored"], | |
| hint: "This word means feeling or showing pleasure." | |
| }, | |
| { | |
| question: "What is the main verb in the sentence: 'She is reading a book.'?", | |
| answer: "Reading", | |
| options: ["She", "Is", "Reading", "Book"], | |
| hint: "This word describes the action in the sentence." | |
| } | |
| ]; | |
| const randomQuestion = questions[Math.floor(Math.random() * questions.length)]; | |
| currentHint = randomQuestion.hint; | |
| return randomQuestion; | |
| } | |
| // Function to start the quiz | |
| function startQuiz(topic) { | |
| currentTopic = topic; | |
| difficulty = document.getElementById("difficulty").value; | |
| score = 0; | |
| questionCount = 0; | |
| correctAnswers = 0; // Reset correct answers counter | |
| document.getElementById("menu").style.display = "none"; | |
| document.getElementById("quiz").style.display = "block"; | |
| document.getElementById("quizTopic").innerText = topic.charAt(0).toUpperCase() + topic.slice(1); | |
| timeLeft = 10; // Reset timeLeft | |
| document.getElementById("timer").innerText = `Time left: ${timeLeft}`; | |
| loadQuestion(); | |
| startTimer(); | |
| } | |
| // Function to load the next question | |
| function loadQuestion() { | |
| let questionData; | |
| switch (currentTopic) { | |
| case "math": | |
| questionData = generateMathQuestion(); | |
| break; | |
| case "chemistry": | |
| questionData = generateChemistryQuestion(); | |
| break; | |
| case "biology": | |
| questionData = generateBiologyQuestion(); | |
| break; | |
| case "history": | |
| questionData = generateHistoryQuestion(); | |
| break; | |
| case "language": | |
| questionData = generateLanguageQuestion(); | |
| break; | |
| default: | |
| questionData = { question: "No question available", options: [], answer: "" }; | |
| } | |
| document.getElementById("questionText").innerText = questionData.question; | |
| const optionsDiv = document.getElementById("options"); | |
| optionsDiv.innerHTML = ""; | |
| questionData.options.forEach(option => { | |
| const button = document.createElement("button"); | |
| button.innerText = option; | |
| button.onclick = () => checkAnswer(option, questionData.answer); | |
| optionsDiv.appendChild(button); | |
| }); | |
| updateProgressBar(); | |
| } | |
| // Function to check the answer | |
| function checkAnswer(selected, correct) { | |
| if (selected === correct) { | |
| correctAnswers++; // Increment correct answers counter | |
| score += hintUsed ? 1 : 2; // Deduct points if hint was used | |
| } | |
| hintUsed = false; | |
| questionCount++; | |
| if (questionCount % 10 === 0) { | |
| showScore(); | |
| } else { | |
| loadQuestion(); | |
| } | |
| } | |
| // Function to show the score | |
| function showScore() { | |
| clearInterval(timer); | |
| document.getElementById("quiz").style.display = "none"; | |
| document.getElementById("score").style.display = "block"; | |
| document.getElementById("scoreText").innerText = `You scored ${correctAnswers * 5} points!`; | |
| } | |
| // Function to go back to the main menu | |
| function backToMenu() { | |
| clearInterval(timer); | |
| document.getElementById("quiz").style.display = "none"; | |
| document.getElementById("score").style.display = "none"; | |
| document.getElementById("leaderboard").style.display = "none"; | |
| document.getElementById("menu").style.display = "block"; | |
| } | |
| // Function to start the timer | |
| function startTimer() { | |
| timer = setInterval(() => { | |
| timeLeft--; | |
| document.getElementById("timer").innerText = `Time left: ${timeLeft}`; | |
| if (timeLeft <= 0 || questionCount >= 10) { // Check if time is up OR 10 questions have been answered | |
| clearInterval(timer); | |
| showScore(); | |
| } | |
| }, 1000); | |
| } | |
| // Function to update the progress bar | |
| function updateProgressBar() { | |
| const progress = (questionCount / 10) * 100; | |
| document.getElementById("progress").style.width = `${progress}%`; | |
| } | |
| // Function to use a hint | |
| function useHint() { | |
| hintUsed = true; | |
| alert(`Hint: ${currentHint}`); | |
| } | |
| // Function to show the leaderboard | |
| function showLeaderboard() { | |
| document.getElementById("menu").style.display = "none"; | |
| document.getElementById("leaderboard").style.display = "block"; | |
| const leaderboardTable = document.getElementById("leaderboardTable").getElementsByTagName("tbody")[0]; | |
| leaderboardTable.innerHTML = ""; | |
| leaderboardData.sort((a, b) => b.score - a.score).forEach((entry, index) => { | |
| const row = leaderboardTable.insertRow(); | |
| row.insertCell().innerText = index + 1; | |
| row.insertCell().innerText = entry.username; | |
| row.insertCell().innerText = entry.score; | |
| }); | |
| } | |
| // Function to share the result on social media | |
| function shareResult() { | |
| const shareText = `I scored ${score} points on the Dynamic Quiz Website! Can you beat me?`; | |
| const shareUrl = window.location.href; | |
| window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`, '_blank'); | |
| } | |
| </script> | |
| </body> | |
| </html> | |