Spaces:

casv
/

pythonquizgenerator

Running

App Files Files Community

casv commited on Jul 6

Commit

7c1cbb9

verified ·

1 Parent(s): a84ed95

Fix issues and it's not working - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +583 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Pythonquizgenerator
-emoji: 😻
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: pythonquizgenerator
+emoji: 🐳
+colorFrom: purple
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,583 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Python Quiz Generator</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">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'python-blue': '#306998',
+                        'python-yellow': '#FFD43B',
+                        'python-light': '#4B8BBE',
+                    },
+                    animation: {
+                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'bounce-slow': 'bounce 2s infinite',
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap');
+        body {
+            font-family: 'Source Code Pro', monospace;
+            background: linear-gradient(135deg, #1a2a6c, #2c3e50);
+            min-height: 100vh;
+        }
+        .python-logo {
+            animation: spin 20s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .option-card {
+            transition: all 0.3s ease;
+            transform: scale(1);
+        }
+        .option-card:hover {
+            transform: scale(1.03);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        }
+        .correct-answer {
+            animation: correct-pulse 0.5s ease;
+            box-shadow: 0 0 0 4px rgba(72, 187, 120, 0.5);
+        }
+        .incorrect-answer {
+            animation: shake 0.5s ease;
+            box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.5);
+        }
+        @keyframes correct-pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-5px); }
+            75% { transform: translateX(5px); }
+        }
+        .progress-bar {
+            transition: width 0.5s ease;
+        }
+        .snake-animation {
+            animation: snake-move 8s linear infinite;
+        }
+        @keyframes snake-move {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        .code-block {
+            font-family: 'Source Code Pro', monospace;
+            background: #2d3748;
+            border-left: 4px solid #4B8BBE;
+        }
+    </style>
+</head>
+<body class="text-gray-100">
+    <!-- Main Container -->
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <div class="flex justify-center mb-4">
+                <div class="python-logo bg-python-blue rounded-full w-24 h-24 flex items-center justify-center">
+                    <div class="bg-python-yellow rounded-full w-16 h-16 flex items-center justify-center">
+                        <i class="fas fa-code text-python-blue text-3xl"></i>
+                    </div>
+                </div>
+            </div>
+            <h1 class="text-4xl md:text-5xl font-bold mb-2 bg-gradient-to-r from-python-yellow to-python-light bg-clip-text text-transparent">
+                Python Quiz Generator
+            </h1>
+            <p class="text-xl text-gray-300">Test your Python knowledge with interactive challenges!</p>
+        </header>
+        <!-- Quiz Controls -->
+        <div class="bg-gray-800 rounded-xl shadow-2xl p-6 mb-8">
+            <div class="flex flex-wrap justify-between items-center gap-4">
+                <div>
+                    <h2 class="text-2xl font-bold mb-2">Quiz Settings</h2>
+                    <p class="text-gray-400">Customize your quiz experience</p>
+                </div>
+                <div class="flex flex-wrap gap-3">
+                    <div class="flex items-center">
+                        <label class="mr-2">Questions:</label>
+                        <select id="questionCount" class="bg-gray-700 text-white rounded px-3 py-1">
+                            <option>5</option>
+                            <option selected>10</option>
+                            <option>15</option>
+                            <option>20</option>
+                        </select>
+                    </div>
+                    <div class="flex items-center">
+                        <label class="mr-2">Difficulty:</label>
+                        <select id="difficulty" class="bg-gray-700 text-white rounded px-3 py-1">
+                            <option>Beginner</option>
+                            <option selected>Intermediate</option>
+                            <option>Advanced</option>
+                        </select>
+                    </div>
+                    <button id="generateBtn" class="bg-python-blue hover:bg-python-light text-white font-bold py-2 px-6 rounded-lg transition-all transform hover:scale-105 flex items-center">
+                        <i class="fas fa-bolt mr-2"></i> Generate Quiz
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Quiz Container -->
+        <div id="quizContainer" class="hidden">
+            <!-- Progress Bar -->
+            <div class="mb-6">
+                <div class="flex justify-between mb-2">
+                    <div class="text-lg font-bold">
+                        Question <span id="currentQuestion">1</span> of <span id="totalQuestions">10</span>
+                    </div>
+                    <div class="text-lg font-bold">
+                        Score: <span id="score">0</span>
+                    </div>
+                </div>
+                <div class="h-3 bg-gray-700 rounded-full overflow-hidden">
+                    <div id="progressBar" class="h-full bg-python-blue rounded-full progress-bar" style="width: 10%"></div>
+                </div>
+            </div>
+            <!-- Question Area -->
+            <div class="bg-gray-800 rounded-xl shadow-2xl p-6 mb-6">
+                <div class="flex items-start mb-6">
+                    <div class="bg-python-blue text-python-yellow rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
+                        <i class="fas fa-question"></i>
+                    </div>
+                    <div>
+                        <h3 id="questionText" class="text-xl font-bold mb-2">What is the output of the following Python code?</h3>
+                        <div class="code-block p-4 rounded-lg mt-3">
+                            <pre id="questionCode" class="text-green-400">print(2 + 2 * 3)</pre>
+                        </div>
+                    </div>
+                </div>
+                <!-- Options -->
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
+                    <div class="option-card bg-gray-700 rounded-lg p-4 cursor-pointer">
+                        <div class="flex items-center">
+                            <div class="bg-gray-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">A</div>
+                            <span class="option-text">8</span>
+                        </div>
+                    </div>
+                    <div class="option-card bg-gray-700 rounded-lg p-4 cursor-pointer">
+                        <div class="flex items-center">
+                            <div class="bg-gray-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">B</div>
+                            <span class="option-text">10</span>
+                        </div>
+                    </div>
+                    <div class="option-card bg-gray-700 rounded-lg p-4 cursor-pointer">
+                        <div class="flex items-center">
+                            <div class="bg-gray-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">C</div>
+                            <span class="option-text">12</span>
+                        </div>
+                    </div>
+                    <div class="option-card bg-gray-700 rounded-lg p-4 cursor-pointer">
+                        <div class="flex items-center">
+                            <div class="bg-gray-600 rounded-full w-8 h-8 flex items-center justify-center mr-3">D</div>
+                            <span class="option-text">6</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Explanation -->
+            <div id="explanation" class="hidden bg-gray-800 rounded-xl shadow-2xl p-6 mb-6">
+                <div class="flex items-start">
+                    <div class="bg-green-500 text-white rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0">
+                        <i class="fas fa-lightbulb"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold mb-2">Explanation</h3>
+                        <p id="explanationText" class="text-gray-300">In Python, multiplication has higher precedence than addition. So 2 * 3 is calculated first (resulting in 6), then 2 + 6 is calculated, giving 8.</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Navigation -->
+            <div class="flex justify-between">
+                <button id="prevBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-6 rounded-lg transition-all">
+                    <i class="fas fa-arrow-left mr-2"></i> Previous
+                </button>
+                <button id="nextBtn" class="bg-python-blue hover:bg-python-light text-white font-bold py-2 px-6 rounded-lg transition-all transform hover:scale-105">
+                    Next <i class="fas fa-arrow-right ml-2"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Snake Animation Decoration -->
+        <div class="relative h-4 my-12 overflow-hidden">
+            <div class="snake-animation absolute top-0 left-0 w-full">
+                <div class="flex">
+                    <div class="w-4 h-4 bg-python-blue rounded-full mx-1"></div>
+                    <div class="w-4 h-4 bg-python-yellow rounded-full mx-1"></div>
+                    <div class="w-4 h-4 bg-python-light rounded-full mx-1"></div>
+                    <div class="w-4 h-4 bg-python-blue rounded-full mx-1"></div>
+                    <div class="w-4 h-4 bg-python-yellow rounded-full mx-1"></div>
+                    <div class="w-4 h-4 bg-python-light rounded-full mx-1"></div>
+                </div>
+            </div>
+        </div>
+        <!-- Results Container -->
+        <div id="resultsContainer" class="hidden bg-gray-800 rounded-xl shadow-2xl p-8 text-center">
+            <div class="flex justify-center mb-6">
+                <div class="bg-gradient-to-br from-python-blue to-python-light rounded-full w-24 h-24 flex items-center justify-center">
+                    <i class="fas fa-trophy text-white text-4xl"></i>
+                </div>
+            </div>
+            <h2 class="text-3xl font-bold mb-4">Quiz Completed!</h2>
+            <div class="text-5xl font-bold mb-6 bg-gradient-to-r from-python-yellow to-python-light bg-clip-text text-transparent">
+                <span id="finalScore">8</span>/<span id="finalTotal">10</span>
+            </div>
+            <p id="resultMessage" class="text-xl mb-8">Great job! You have a solid understanding of Python fundamentals.</p>
+            <div class="flex justify-center gap-4">
+                <button id="restartBtn" class="bg-python-blue hover:bg-python-light text-white font-bold py-3 px-8 rounded-lg transition-all transform hover:scale-105">
+                    <i class="fas fa-redo mr-2"></i> Try Again
+                </button>
+                <button id="newQuizBtn" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-8 rounded-lg transition-all">
+                    <i class="fas fa-plus mr-2"></i> New Quiz
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Quiz questions database
+        const questions = [
+            {
+                question: "What is the output of the following Python code?",
+                code: "print(2 + 2 * 3)",
+                options: ["8", "10", "12", "6"],
+                answer: 0,
+                explanation: "In Python, multiplication has higher precedence than addition. So 2 * 3 is calculated first (resulting in 6), then 2 + 6 is calculated, giving 8."
+            },
+            {
+                question: "Which of the following is used to create a virtual environment in Python?",
+                code: "",
+                options: ["venv", "virtualenv", "pipenv", "All of the above"],
+                answer: 3,
+                explanation: "All of these tools can be used to create virtual environments in Python. venv is built into Python 3, virtualenv is a third-party tool, and pipenv combines virtual environment management with package management."
+            },
+            {
+                question: "What does the 'yield' keyword do in Python?",
+                code: "",
+                options: [
+                    "Returns a value and terminates the function",
+                    "Pauses the function and returns a generator object",
+                    "Used for exception handling",
+                    "Defines a static method"
+                ],
+                answer: 1,
+                explanation: "The yield keyword is used in generator functions to pause execution and return a value. When called again, the function resumes where it left off."
+            },
+            {
+                question: "What is the output of the following code?",
+                code: "x = [1, 2, 3]\ny = x\ny.append(4)\nprint(x)",
+                options: ["[1, 2, 3]", "[1, 2, 3, 4]", "[4]", "Error"],
+                answer: 1,
+                explanation: "When we assign y = x, both variables point to the same list in memory. So modifying y also modifies x."
+            },
+            {
+                question: "Which method would you use to remove the last element from a list?",
+                code: "",
+                options: ["list.remove()", "list.pop()", "list.delete()", "list.cut()"],
+                answer: 1,
+                explanation: "The pop() method removes and returns the last element by default. You can also specify an index to remove an element at a specific position."
+            },
+            {
+                question: "What is the purpose of __init__ in a Python class?",
+                code: "",
+                options: [
+                    "To initialize the class object",
+                    "To create class methods",
+                    "To define class variables",
+                    "To terminate the class instance"
+                ],
+                answer: 0,
+                explanation: "The __init__ method is called when a new instance of a class is created. It's used to initialize the object's attributes."
+            },
+            {
+                question: "What does the 'with' statement do?",
+                code: "",
+                options: [
+                    "Creates a loop",
+                    "Handles exceptions",
+                    "Manages resources and ensures cleanup",
+                    "Defines a context for variable scope"
+                ],
+                answer: 2,
+                explanation: "The 'with' statement simplifies resource management by ensuring that setup and cleanup operations are performed automatically."
+            },
+            {
+                question: "What is the output of the following code?",
+                code: "print([i for i in range(10) if i % 2 == 0])",
+                options: [
+                    "[0, 2, 4, 6, 8]",
+                    "[2, 4, 6, 8]",
+                    "[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]",
+                    "[1, 3, 5, 7, 9]"
+                ],
+                answer: 0,
+                explanation: "This list comprehension generates numbers from 0 to 9, but only includes even numbers (where i % 2 == 0)."
+            },
+            {
+                question: "Which of these is NOT a valid variable name?",
+                code: "",
+                options: ["_private", "2nd_variable", "variable_name", "camelCase"],
+                answer: 1,
+                explanation: "Variable names cannot start with a number. They must start with a letter or underscore."
+            },
+            {
+                question: "What is the purpose of the 'pass' statement?",
+                code: "",
+                options: [
+                    "To terminate the program",
+                    "To skip the current iteration in a loop",
+                    "As a placeholder where syntax requires a statement",
+                    "To pass arguments to a function"
+                ],
+                answer: 2,
+                explanation: "The pass statement is a null operation - it does nothing. It's used when a statement is required syntactically but no action is needed."
+            }
+        ];
+        // DOM Elements
+        const quizContainer = document.getElementById('quizContainer');
+        const resultsContainer = document.getElementById('resultsContainer');
+        const generateBtn = document.getElementById('generateBtn');
+        const questionText = document.getElementById('questionText');
+        const questionCode = document.getElementById('questionCode');
+        const optionElements = document.querySelectorAll('.option-card');
+        const optionTexts = document.querySelectorAll('.option-text');
+        const explanation = document.getElementById('explanation');
+        const explanationText = document.getElementById('explanationText');
+        const currentQuestionEl = document.getElementById('currentQuestion');
+        const totalQuestionsEl = document.getElementById('totalQuestions');
+        const scoreEl = document.getElementById('score');
+        const progressBar = document.getElementById('progressBar');
+        const prevBtn = document.getElementById('prevBtn');
+        const nextBtn = document.getElementById('nextBtn');
+        const finalScore = document.getElementById('finalScore');
+        const finalTotal = document.getElementById('finalTotal');
+        const resultMessage = document.getElementById('resultMessage');
+        const restartBtn = document.getElementById('restartBtn');
+        const newQuizBtn = document.getElementById('newQuizBtn');
+        // Quiz state
+        let currentQuestionIndex = 0;
+        let score = 0;
+        let userAnswers = [];
+        let quizQuestions = [];
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            generateBtn.addEventListener('click', startQuiz);
+            optionElements.forEach((option, index) => {
+                option.addEventListener('click', () => selectAnswer(index));
+            });
+            nextBtn.addEventListener('click', nextQuestion);
+            prevBtn.addEventListener('click', prevQuestion);
+            restartBtn.addEventListener('click', restartQuiz);
+            newQuizBtn.addEventListener('click', () => {
+                resultsContainer.classList.add('hidden');
+                document.querySelector('.container').classList.remove('hidden');
+            });
+        });
+        // Start quiz
+        function startQuiz() {
+            const questionCount = parseInt(document.getElementById('questionCount').value);
+            const difficulty = document.getElementById('difficulty').value;
+            // Select random questions based on count
+            quizQuestions = [...questions].sort(() => 0.5 - Math.random()).slice(0, questionCount);
+            // Reset state
+            currentQuestionIndex = 0;
+            score = 0;
+            userAnswers = [];
+            // Update UI
+            quizContainer.classList.remove('hidden');
+            document.querySelector('.container > div:nth-child(2)').classList.add('hidden'); // Hide settings
+            totalQuestionsEl.textContent = quizQuestions.length;
+            scoreEl.textContent = score;
+            updateQuestion();
+        }
+        // Update question display
+        function updateQuestion() {
+            const question = quizQuestions[currentQuestionIndex];
+            questionText.textContent = question.question;
+            questionCode.textContent = question.code || "";
+            questionCode.parentElement.style.display = question.code ? "block" : "none";
+            optionTexts.forEach((option, index) => {
+                option.textContent = question.options[index];
+            });
+            currentQuestionEl.textContent = currentQuestionIndex + 1;
+            scoreEl.textContent = score;
+            progressBar.style.width = `${((currentQuestionIndex + 1) / quizQuestions.length) * 100}%`;
+            // Reset option styles
+            optionElements.forEach(option => {
+                option.classList.remove('correct-answer', 'incorrect-answer');
+                option.style.pointerEvents = 'auto';
+            });
+            explanation.classList.add('hidden');
+            prevBtn.disabled = currentQuestionIndex === 0;
+            // Hide next button until answer is selected
+            nextBtn.classList.add('hidden');
+        }
+        // Handle answer selection
+        function selectAnswer(selectedIndex) {
+            const question = quizQuestions[currentQuestionIndex];
+            const correctIndex = question.answer;
+            // Only allow one selection
+            if (userAnswers[currentQuestionIndex] !== undefined) return;
+            // Disable further selections
+            optionElements.forEach(option => {
+                option.style.pointerEvents = 'none';
+            });
+            // Mark correct answer
+            optionElements[correctIndex].classList.add('correct-answer');
+            // Store user answer
+            userAnswers[currentQuestionIndex] = selectedIndex;
+            // Check if answer is correct
+            if (selectedIndex === correctIndex) {
+                score++;
+                scoreEl.textContent = score;
+            } else {
+                // Mark incorrect answer
+                optionElements[selectedIndex].classList.add('incorrect-answer');
+            }
+            // Show explanation
+            explanationText.textContent = question.explanation;
+            explanation.classList.remove('hidden');
+            // Show next button if not last question
+            if (currentQuestionIndex < quizQuestions.length - 1) {
+                nextBtn.classList.remove('hidden');
+            } else {
+                nextBtn.textContent = "Finish Quiz";
+                nextBtn.classList.remove('hidden');
+            }
+        }
+        // Navigate to next question
+        function nextQuestion() {
+            if (currentQuestionIndex < quizQuestions.length - 1) {
+                currentQuestionIndex++;
+                updateQuestion();
+            } else {
+                // Only show results if all questions answered
+                if (userAnswers.length === quizQuestions.length) {
+                    showResults();
+                }
+            }
+        }
+        // Navigate to previous question
+        function prevQuestion() {
+            if (currentQuestionIndex > 0) {
+                currentQuestionIndex--;
+                updateQuestion();
+                // Reapply answer state if already answered
+                if (userAnswers[currentQuestionIndex] !== undefined) {
+                    const question = quizQuestions[currentQuestionIndex];
+                    const correctIndex = question.answer;
+                    const userAnswer = userAnswers[currentQuestionIndex];
+                    optionElements.forEach(option => {
+                        option.style.pointerEvents = 'none';
+                    });
+                    optionElements[correctIndex].classList.add('correct-answer');
+                    if (userAnswer !== correctIndex) {
+                        optionElements[userAnswer].classList.add('incorrect-answer');
+                    }
+                    explanationText.textContent = question.explanation;
+                    explanation.classList.remove('hidden');
+                    nextBtn.classList.remove('hidden');
+                }
+            }
+        }
+        // Show results
+        function showResults() {
+            quizContainer.classList.add('hidden');
+            resultsContainer.classList.remove('hidden');
+            finalScore.textContent = score;
+            finalTotal.textContent = quizQuestions.length;
+            // Custom message based on score
+            const percentage = (score / quizQuestions.length) * 100;
+            if (percentage >= 90) {
+                resultMessage.textContent = "Python Master! Your skills are exceptional.";
+            } else if (percentage >= 70) {
+                resultMessage.textContent = "Great job! You have a strong understanding of Python.";
+            } else if (percentage >= 50) {
+                resultMessage.textContent = "Good effort! Keep practicing to improve your skills.";
+            } else {
+                resultMessage.textContent = "Keep learning! Review the basics and try again.";
+            }
+        }
+        // Restart quiz
+        function restartQuiz() {
+            resultsContainer.classList.add('hidden');
+            quizContainer.classList.remove('hidden');
+            document.querySelector('.container > div:nth-child(2)').classList.remove('hidden');
+            // Reset to first question
+            currentQuestionIndex = 0;
+            score = 0;
+            userAnswers = [];
+            updateQuestion();
+            nextBtn.textContent = "Next";
+        }
+    </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=casv/pythonquizgenerator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>