Spaces:

karaltan
/

python-quiz

Running

File size: 27,627 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Quiz with Code Editor</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>
        .question-card {
            transition: all 0.3s ease;
        }
        .question-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .progress-bar {
            transition: width 0.5s ease-in-out;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f8f8f8;
            border-radius: 4px;
            padding: 10px;
            border-left: 3px solid #3b82f6;
        }
        #editorContainer {
            height: 300px;
            border: 1px solid #e5e7eb;
            border-radius: 0.375rem;
            overflow: hidden;
        }
        .output-container {
            background-color: #1e1e1e;
            color: #d4d4d4;
            font-family: monospace;
            padding: 10px;
            border-radius: 0.375rem;
            height: 100px;
            overflow-y: auto;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold text-blue-800 mb-2">Python Code Quiz</h1>
            <p class="text-lg text-gray-600">Write, test and submit your Python code directly in the editor</p>
            <div class="w-24 h-1 bg-blue-500 mx-auto mt-4 rounded-full"></div>
        </header>

        <div class="max-w-5xl mx-auto">
            <div id="quizContainer" class="bg-white rounded-xl shadow-lg p-6 mb-8 question-card">
                <div class="flex justify-between items-center mb-6">
                    <h2 class="text-xl font-semibold text-gray-800">Question</h2>
                    <span id="questionCounter" class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">1/10</span>
                </div>

                <div id="questionContent" class="mb-6">
                    <p id="questionText" class="text-gray-700 mb-4"></p>
                    <div id="codeExample" class="code-block mb-4 hidden">
                        <pre id="codeContent" class="whitespace-pre-wrap"></pre>
                    </div>
                </div>

                <div class="mb-4">
                    <div class="flex justify-between items-center mb-2">
                        <label class="block text-sm font-medium text-gray-700">Code Editor:</label>
                        <button id="runCodeBtn" class="px-3 py-1 bg-green-600 text-white text-sm rounded-md hover:bg-green-700 transition-colors duration-300">
                            <i class="fas fa-play mr-1"></i> Run Code
                        </button>
                    </div>
                    <div id="editorContainer"></div>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Output:</label>
                    <div id="outputContainer" class="output-container">
                        <div id="outputContent">Output will appear here...</div>
                    </div>
                </div>

                <div class="flex justify-between">
                    <button id="skipBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors duration-300">
                        <i class="fas fa-forward mr-2"></i>Skip
                    </button>
                    <button id="submitBtn" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-300">
                        <i class="fas fa-paper-plane mr-2"></i>Submit
                    </button>
                </div>
            </div>

            <div id="resultContainer" class="bg-white rounded-xl shadow-lg p-6 mb-8 hidden fade-in">
                <div class="text-center mb-6">
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">Your Result</h2>
                    <p id="resultMessage" class="text-gray-600"></p>
                </div>

                <div class="mb-6">
                    <div class="flex justify-between mb-1">
                        <span class="text-sm font-medium text-gray-700">Answer Similarity</span>
                        <span id="similarityPercent" class="text-sm font-medium text-gray-700">0%</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div id="similarityBar" class="progress-bar h-2.5 rounded-full bg-blue-600" style="width: 0%"></div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <h3 class="font-medium text-gray-700 mb-2">Your Solution:</h3>
                        <div class="code-block">
                            <pre id="displayStudentAnswer" class="whitespace-pre-wrap"></pre>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-medium text-gray-700 mb-2">Expected Solution:</h3>
                        <div class="code-block">
                            <pre id="displayCorrectAnswer" class="whitespace-pre-wrap"></pre>
                        </div>
                    </div>
                </div>

                <div id="feedbackTips" class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6 hidden">
                    <h3 class="font-medium text-blue-800 mb-2">Tips for improvement:</h3>
                    <p id="improvementTips" class="text-blue-700"></p>
                </div>

                <div class="text-center">
                    <button id="nextQuestionBtn" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-300">
                        <i class="fas fa-arrow-right mr-2"></i>Next Question
                    </button>
                </div>
            </div>

            <div id="quizComplete" class="bg-white rounded-xl shadow-lg p-8 text-center hidden fade-in">
                <div class="mb-6">
                    <i class="fas fa-trophy text-yellow-500 text-6xl mb-4"></i>
                    <h2 class="text-2xl font-bold text-gray-800 mb-2">Quiz Complete!</h2>
                    <p class="text-gray-600 mb-4">You've answered all the questions.</p>
                </div>

                <div class="bg-blue-50 rounded-lg p-6 mb-6 max-w-md mx-auto">
                    <h3 class="font-medium text-blue-800 mb-2">Your Final Score</h3>
                    <div class="text-4xl font-bold text-blue-600 mb-2" id="finalScore">0%</div>
                    <div class="w-full bg-gray-200 rounded-full h-2.5">
                        <div id="finalScoreBar" class="progress-bar h-2.5 rounded-full bg-blue-600" style="width: 0%"></div>
                    </div>
                </div>

                <div class="flex justify-center gap-4">
                    <button id="restartQuizBtn" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-300">
                        <i class="fas fa-redo mr-2"></i>Restart Quiz
                    </button>
                    <button id="reviewAnswersBtn" class="px-6 py-2 border border-blue-600 text-blue-600 rounded-md hover:bg-blue-50 transition-colors duration-300">
                        <i class="fas fa-list-ul mr-2"></i>Review Answers
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Load Monaco Editor -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
    <script>
        // Python questions database
        const pythonQuestions = [
            {
                question: "Write a function to calculate the factorial of a number.",
                codeExample: "def factorial(n):\n    # Your code here",
                answer: "def factorial(n):\n    if n == 0:\n        return 1\n    else:\n        return n * factorial(n-1)",
                tips: "Remember that factorial of 0 is 1. Use recursion for an elegant solution.",
                testCase: "print(factorial(5))  # Expected output: 120"
            },
            {
                question: "How would you reverse a string in Python?",
                codeExample: "my_string = 'hello'\n# Your code here",
                answer: "my_string = 'hello'\nreversed_string = my_string[::-1]",
                tips: "Python slicing is powerful. [::-1] means start at end of string and move backwards.",
                testCase: "print(reversed_string)  # Expected output: olleh"
            },
            {
                question: "Write a list comprehension to get squares of even numbers from 1 to 10.",
                codeExample: "# Your list comprehension here",
                answer: "[x**2 for x in range(1, 11) if x % 2 == 0]",
                tips: "List comprehensions have three parts: output expression, input sequence, and optional condition.",
                testCase: "print(squares)  # Expected output: [4, 16, 36, 64, 100]"
            },
            {
                question: "How do you check if a key exists in a dictionary?",
                codeExample: "my_dict = {'a': 1, 'b': 2}\n# Your code here",
                answer: "my_dict = {'a': 1, 'b': 2}\nif 'a' in my_dict:\n    print('Key exists')",
                tips: "The 'in' keyword is the Pythonic way to check for key existence in dictionaries.",
                testCase: "# Should print 'Key exists' if 'a' is in my_dict"
            },
            {
                question: "Write a lambda function to add 10 to a given number.",
                codeExample: "# Your lambda function here",
                answer: "add_ten = lambda x: x + 10",
                tips: "Lambda functions are anonymous functions defined with the lambda keyword.",
                testCase: "print(add_ten(5))  # Expected output: 15"
            },
            {
                question: "How would you handle exceptions in Python?",
                codeExample: "# Your exception handling code here",
                answer: "try:\n    # Code that might raise an exception\n    x = 1 / 0\nexcept ZeroDivisionError:\n    print('Cannot divide by zero')\nexcept Exception as e:\n    print(f'An error occurred: {e}')",
                tips: "Always catch specific exceptions before more general ones. Use 'as' to access the exception object.",
                testCase: "# Should print 'Cannot divide by zero'"
            },
            {
                question: "Write a function to check if a number is prime.",
                codeExample: "def is_prime(n):\n    # Your code here",
                answer: "def is_prime(n):\n    if n <= 1:\n        return False\n    for i in range(2, int(n**0.5) + 1):\n        if n % i == 0:\n            return False\n    return True",
                tips: "Optimize by checking divisors only up to the square root of the number.",
                testCase: "print(is_prime(7))  # Expected output: True\nprint(is_prime(4))  # Expected output: False"
            },
            {
                question: "How would you merge two dictionaries in Python?",
                codeExample: "dict1 = {'a': 1, 'b': 2}\ndict2 = {'c': 3, 'd': 4}\n# Your code here",
                answer: "dict1 = {'a': 1, 'b': 2}\ndict2 = {'c': 3, 'd': 4}\nmerged = {**dict1, **dict2}",
                tips: "In Python 3.5+, you can use the ** operator to unpack dictionaries. For older versions, use the update() method.",
                testCase: "print(merged)  # Expected output: {'a': 1, 'b': 2, 'c': 3, 'd': 4}"
            },
            {
                question: "Write a generator function to yield Fibonacci numbers.",
                codeExample: "def fibonacci():\n    # Your code here",
                answer: "def fibonacci():\n    a, b = 0, 1\n    while True:\n        yield a\n        a, b = b, a + b",
                tips: "Generators use yield instead of return. They maintain their state between calls.",
                testCase: "fib = fibonacci()\nprint([next(fib) for _ in range(10)])  # Expected output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]"
            },
            {
                question: "How would you remove duplicates from a list while preserving order?",
                codeExample: "my_list = [1, 2, 2, 3, 4, 4, 5]\n# Your code here",
                answer: "my_list = [1, 2, 2, 3, 4, 4, 5]\nunique_list = []\nseen = set()\nfor item in my_list:\n    if item not in seen:\n        unique_list.append(item)\n        seen.add(item)",
                tips: "Using a set for tracking seen items provides O(1) lookup time, making the solution efficient.",
                testCase: "print(unique_list)  # Expected output: [1, 2, 3, 4, 5]"
            }
        ];

        // Quiz state variables
        let currentQuestionIndex = 0;
        let shuffledQuestions = [];
        let userAnswers = [];
        let scores = [];
        let editor = null;

        // DOM elements
        const quizContainer = document.getElementById('quizContainer');
        const resultContainer = document.getElementById('resultContainer');
        const quizComplete = document.getElementById('quizComplete');
        const questionText = document.getElementById('questionText');
        const codeExample = document.getElementById('codeExample');
        const codeContent = document.getElementById('codeContent');
        const submitBtn = document.getElementById('submitBtn');
        const skipBtn = document.getElementById('skipBtn');
        const nextQuestionBtn = document.getElementById('nextQuestionBtn');
        const questionCounter = document.getElementById('questionCounter');
        const displayStudentAnswer = document.getElementById('displayStudentAnswer');
        const displayCorrectAnswer = document.getElementById('displayCorrectAnswer');
        const similarityPercent = document.getElementById('similarityPercent');
        const similarityBar = document.getElementById('similarityBar');
        const feedbackTips = document.getElementById('feedbackTips');
        const improvementTips = document.getElementById('improvementTips');
        const resultMessage = document.getElementById('resultMessage');
        const finalScore = document.getElementById('finalScore');
        const finalScoreBar = document.getElementById('finalScoreBar');
        const restartQuizBtn = document.getElementById('restartQuizBtn');
        const reviewAnswersBtn = document.getElementById('reviewAnswersBtn');
        const runCodeBtn = document.getElementById('runCodeBtn');
        const outputContent = document.getElementById('outputContent');

        // Initialize Monaco Editor
        function initEditor() {
            require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs' }});
            
            require(['vs/editor/editor.main'], function() {
                editor = monaco.editor.create(document.getElementById('editorContainer'), {
                    value: '',
                    language: 'python',
                    theme: 'vs-dark',
                    automaticLayout: true,
                    minimap: {
                        enabled: false
                    },
                    fontSize: 14,
                    scrollBeyondLastLine: false,
                    renderWhitespace: 'selection',
                    roundedSelection: true,
                    autoIndent: 'full',
                    tabSize: 4
                });
            });
        }

        // Initialize the quiz
        function initQuiz() {
            // Shuffle questions
            shuffledQuestions = [...pythonQuestions].sort(() => Math.random() - 0.5);
            currentQuestionIndex = 0;
            userAnswers = [];
            scores = [];
            
            // Show first question
            showQuestion();
            quizContainer.classList.remove('hidden');
            resultContainer.classList.add('hidden');
            quizComplete.classList.add('hidden');
            
            // Initialize editor if not already done
            if (!editor) {
                initEditor();
            }
        }

        // Display current question
        function showQuestion() {
            if (currentQuestionIndex >= shuffledQuestions.length) {
                showQuizComplete();
                return;
            }

            const question = shuffledQuestions[currentQuestionIndex];
            questionText.textContent = question.question;
            
            if (question.codeExample) {
                codeExample.classList.remove('hidden');
                codeContent.textContent = question.codeExample;
            } else {
                codeExample.classList.add('hidden');
            }

            // Set initial editor content
            if (editor) {
                editor.setValue(question.codeExample || '# Write your solution here');
            }

            // Clear output
            outputContent.textContent = 'Output will appear here...';
            
            questionCounter.textContent = `${currentQuestionIndex + 1}/${shuffledQuestions.length}`;
        }

        // Run Python code in the editor
        function runPythonCode() {
            if (!editor) return;
            
            const code = editor.getValue();
            outputContent.textContent = 'Running code...';
            
            // In a real implementation, you would send this to a Python backend
            // For this demo, we'll simulate execution with the test case
            setTimeout(() => {
                const question = shuffledQuestions[currentQuestionIndex];
                if (question.testCase) {
                    outputContent.textContent = `>>> ${question.testCase}\n${getExpectedOutput(question)}`;
                } else {
                    outputContent.textContent = "Code executed (simulated). Check your solution against the expected output when you submit.";
                }
            }, 1000);
        }

        // Helper function to get expected output for demo purposes
        function getExpectedOutput(question) {
            switch(currentQuestionIndex) {
                case 0: return "120";
                case 1: return "olleh";
                case 2: return "[4, 16, 36, 64, 100]";
                case 3: return "Key exists";
                case 4: return "15";
                case 5: return "Cannot divide by zero";
                case 6: return "True\nFalse";
                case 7: return "{'a': 1, 'b': 2, 'c': 3, 'd': 4}";
                case 8: return "[0, 1, 1, 2, 3, 5, 8, 13, 21, 34]";
                case 9: return "[1, 2, 3, 4, 5]";
                default: return "Expected output";
            }
        }

        // Calculate similarity between two strings (simple version)
        function calculateSimilarity(str1, str2) {
            // Remove whitespace and make lowercase for comparison
            const cleanStr1 = str1.replace(/\s+/g, '').toLowerCase();
            const cleanStr2 = str2.replace(/\s+/g, '').toLowerCase();
            
            // If strings are identical
            if (cleanStr1 === cleanStr2) return 100;
            
            // If one string is empty
            if (cleanStr1.length === 0 || cleanStr2.length === 0) return 0;
            
            // Calculate Levenshtein distance
            const distance = levenshteinDistance(cleanStr1, cleanStr2);
            
            // Calculate similarity percentage
            const maxLength = Math.max(cleanStr1.length, cleanStr2.length);
            const similarity = (1 - distance / maxLength) * 100;
            
            return Math.max(0, Math.min(100, similarity.toFixed(1)));
        }

        // Levenshtein distance algorithm
        function levenshteinDistance(a, b) {
            const matrix = [];
            
            // Increment along the first column of each row
            for (let i = 0; i <= b.length; i++) {
                matrix[i] = [i];
            }
            
            // Increment each column in the first row
            for (let j = 0; j <= a.length; j++) {
                matrix[0][j] = j;
            }
            
            // Fill in the rest of the matrix
            for (let i = 1; i <= b.length; i++) {
                for (let j = 1; j <= a.length; j++) {
                    if (b.charAt(i - 1) === a.charAt(j - 1)) {
                        matrix[i][j] = matrix[i - 1][j - 1];
                    } else {
                        matrix[i][j] = Math.min(
                            matrix[i - 1][j - 1] + 1, // substitution
                            matrix[i][j - 1] + 1,     // insertion
                            matrix[i - 1][j] + 1      // deletion
                        );
                    }
                }
            }
            
            return matrix[b.length][a.length];
        }

        // Show result after submission
        function showResult() {
            if (!editor) return;
            
            const question = shuffledQuestions[currentQuestionIndex];
            const userAnswer = editor.getValue().trim();
            const correctAnswer = question.answer;
            
            // Calculate similarity score
            const similarityScore = calculateSimilarity(userAnswer, correctAnswer);
            
            // Store user answer and score
            userAnswers.push({
                question: question.question,
                userAnswer: userAnswer,
                correctAnswer: correctAnswer,
                score: similarityScore,
                output: outputContent.textContent
            });
            scores.push(similarityScore);
            
            // Display results
            displayStudentAnswer.textContent = userAnswer || "No answer provided";
            displayCorrectAnswer.textContent = correctAnswer;
            similarityPercent.textContent = `${similarityScore}%`;
            similarityBar.style.width = `${similarityScore}%`;
            
            // Set color based on score
            if (similarityScore >= 80) {
                similarityBar.classList.remove('bg-red-600', 'bg-yellow-500');
                similarityBar.classList.add('bg-green-500');
                resultMessage.textContent = "Excellent! Your answer is very close to the expected solution.";
            } else if (similarityScore >= 50) {
                similarityBar.classList.remove('bg-green-500', 'bg-red-600');
                similarityBar.classList.add('bg-yellow-500');
                resultMessage.textContent = "Good try! Your answer has some similarities with the expected solution.";
            } else {
                similarityBar.classList.remove('bg-green-500', 'bg-yellow-500');
                similarityBar.classList.add('bg-red-600');
                resultMessage.textContent = "Keep practicing! Review the expected solution to improve.";
            }
            
            // Show improvement tips if available
            if (question.tips) {
                improvementTips.textContent = question.tips;
                feedbackTips.classList.remove('hidden');
            } else {
                feedbackTips.classList.add('hidden');
            }
            
            // Switch to result view
            quizContainer.classList.add('hidden');
            resultContainer.classList.remove('hidden');
        }

        // Move to next question
        function nextQuestion() {
            currentQuestionIndex++;
            if (currentQuestionIndex < shuffledQuestions.length) {
                showQuestion();
                quizContainer.classList.remove('hidden');
                resultContainer.classList.add('hidden');
            } else {
                showQuizComplete();
            }
        }

        // Show quiz completion screen
        function showQuizComplete() {
            // Calculate average score
            const averageScore = scores.reduce((a, b) => a + b, 0) / scores.length;
            
            // Display final score
            finalScore.textContent = `${averageScore.toFixed(1)}%`;
            finalScoreBar.style.width = `${averageScore}%`;
            
            // Set color based on score
            if (averageScore >= 80) {
                finalScoreBar.classList.remove('bg-red-600', 'bg-yellow-500');
                finalScoreBar.classList.add('bg-green-500');
            } else if (averageScore >= 50) {
                finalScoreBar.classList.remove('bg-green-500', 'bg-red-600');
                finalScoreBar.classList.add('bg-yellow-500');
            } else {
                finalScoreBar.classList.remove('bg-green-500', 'bg-yellow-500');
                finalScoreBar.classList.add('bg-red-600');
            }
            
            // Show completion screen
            quizContainer.classList.add('hidden');
            resultContainer.classList.add('hidden');
            quizComplete.classList.remove('hidden');
        }

        // Event listeners
        submitBtn.addEventListener('click', showResult);
        skipBtn.addEventListener('click', nextQuestion);
        nextQuestionBtn.addEventListener('click', nextQuestion);
        restartQuizBtn.addEventListener('click', initQuiz);
        runCodeBtn.addEventListener('click', runPythonCode);
        
        // Review answers button would typically show a summary of all questions and answers
        reviewAnswersBtn.addEventListener('click', () => {
            let reviewContent = "Review of your answers:\n\n";
            userAnswers.forEach((answer, index) => {
                reviewContent += `Question ${index + 1}: ${answer.question}\n`;
                reviewContent += `Your Answer:\n${answer.userAnswer}\n\n`;
                reviewContent += `Score: ${answer.score}%\n\n`;
                reviewContent += "--------------------------------\n\n";
            });
            
            alert(reviewContent);
        });

        // Initialize the quiz when page loads
        document.addEventListener('DOMContentLoaded', () => {
            initEditor();
            initQuiz();
        });
    </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=karaltan/python-quiz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>