Spaces:

edgemindroboticslabs
/

Quiz

No application file

App Files Files Community

krish arul meiyappan commited on Aug 11, 2025

Commit

15bae52

verified ·

1 Parent(s): 1221d4a

Create app.py

Browse files

Files changed (1) hide show

app.py +479 -0

app.py ADDED Viewed

	@@ -0,0 +1,479 @@

+<!DOCTYPE html>
+<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>