Spaces:

dwellnick
/

python-knowledge-test

Running

File size: 32,308 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Knowledge Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #3776ab;
            --secondary-color: #ffd43b;
            --dark-color: #306998;
            --light-color: #f8f9fa;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --warning-color: #ffc107;
            --info-color: #17a2b8;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            padding: 20px 0;
            text-align: center;
            border-radius: 8px 8px 0 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }

        header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .python-icon {
            font-size: 3rem;
            margin-bottom: 10px;
            color: var(--secondary-color);
        }

        .quiz-container {
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 2rem;
        }

        .question-counter {
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .progress-bar {
            height: 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
            flex-grow: 1;
            margin-left: 20px;
        }

        .progress {
            height: 100%;
            background-color: var(--primary-color);
            width: 0%;
            transition: width 0.3s ease;
        }

        .question {
            font-size: 1.2rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
        }

        .options {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 1.5rem;
        }

        .option {
            background-color: var(--light-color);
            padding: 15px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            display: flex;
            align-items: center;
        }

        .option:hover {
            background-color: #e2e6ea;
            transform: translateY(-2px);
        }

        .option.selected {
            background-color: #e3f2fd;
            border-color: var(--primary-color);
        }

        .option.correct {
            background-color: #d4edda;
            border-color: var(--success-color);
        }

        .option.incorrect {
            background-color: #f8d7da;
            border-color: var(--danger-color);
        }

        .option input {
            margin-right: 10px;
            cursor: pointer;
        }

        .option-label {
            font-weight: 500;
            flex-grow: 1;
        }

        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 2rem;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--dark-color);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background-color: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background-color: #5a6268;
            transform: translateY(-2px);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }

        .result-container {
            display: none;
            background-color: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .result-icon {
            font-size: 5rem;
            margin-bottom: 20px;
        }

        .excellent {
            color: var(--success-color);
        }

        .good {
            color: var(--primary-color);
        }

        .average {
            color: var(--warning-color);
        }

        .poor {
            color: var(--danger-color);
        }

        h2 {
            margin-bottom: 20px;
            color: var(--primary-color);
        }

        .score {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .assessment {
            font-size: 1.2rem;
            margin-bottom: 25px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .restart-btn {
            background-color: var(--primary-color);
            color: white;
            padding: 12px 30px;
            border-radius: 6px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
        }

        .restart-btn i {
            margin-right: 8px;
        }

        .restart-btn:hover {
            background-color: var(--dark-color);
            transform: translateY(-2px);
        }

        .explanation {
            background-color: #f8f9fa;
            border-left: 4px solid var(--primary-color);
            padding: 15px;
            margin-top: 20px;
            border-radius: 0 6px 6px 0;
            display: none;
        }

        .explanation-title {
            font-weight: bold;
            margin-bottom: 8px;
            color: var(--primary-color);
        }

        .wrong-answers {
            margin-top: 20px;
            text-align: left;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .wrong-answers-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--danger-color);
        }

        .wrong-answer-item {
            margin-bottom: 8px;
            padding: 8px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            header h1 {
                font-size: 2rem;
            }

            .quiz-container, .result-container {
                padding: 20px;
            }

            .question {
                font-size: 1.1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="python-icon">
                <i class="fab fa-python"></i>
            </div>
            <h1>Python Knowledge Test</h1>
            <p>Test your Python programming skills with this 20-question quiz</p>
        </header>

        <div class="quiz-container" id="quiz">
            <div class="question-counter">
                <span>Question <span id="current-question">1</span> of 20</span>
                <div class="progress-bar">
                    <div class="progress" id="progress"></div>
                </div>
            </div>

            <div class="question" id="question"></div>

            <div class="options" id="options"></div>

            <div class="explanation" id="explanation">
                <div class="explanation-title">
                    <i class="fas fa-info-circle"></i> Explanation
                </div>
                <div id="explanation-text"></div>
            </div>

            <div class="navigation">
                <button class="btn btn-secondary" id="prev-btn" disabled>
                    <i class="fas fa-arrow-left"></i> Previous
                </button>
                <button class="btn btn-primary" id="next-btn">
                    Next <i class="fas fa-arrow-right"></i>
                </button>
                <button class="btn btn-primary" id="submit-btn" style="display: none;">
                    Submit <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>

        <div class="result-container" id="result-container">
            <div class="result-icon" id="result-icon">
                <i class="fas fa-trophy"></i>
            </div>
            <h2>Your Results</h2>
            <div class="score" id="score"></div>
            <div class="assessment" id="assessment"></div>
            
            <div class="wrong-answers" id="wrong-answers">
                <div class="wrong-answers-title">
                    <i class="fas fa-times-circle"></i> Incorrect Answers
                </div>
                <div id="wrong-answers-list"></div>
            </div>
            
            <button class="restart-btn" id="restart-btn">
                <i class="fas fa-redo"></i> Take Again
            </button>
        </div>
    </div>

    <script>
        // Questions array with options, correct answer, and explanations
        const questions = [
            {
                question: "Which of the following is the correct way to declare a variable in Python?",
                options: [
                    "var name = 'John'",
                    "name := 'John'",
                    "name = 'John'",
                    "let name = 'John'"
                ],
                correct: 2,
                explanation: "In Python, variables are declared by simply assigning a value to a name using the equals sign (=). The other syntax shown is used in other languages like JavaScript or more recent Python versions for different purposes."
            },
            {
                question: "What does the 'range()' function return in Python 3?",
                options: [
                    "A list of numbers",
                    "A tuple of numbers",
                    "A range object",
                    "A set of numbers"
                ],
                correct: 2,
                explanation: "In Python 3, range() returns an immutable sequence type (range object), not a list. This is more memory efficient as it generates numbers on demand rather than storing them all in memory."
            },
            {
                question: "Which of these collection types in Python is immutable?",
                options: [
                    "List",
                    "Dictionary",
                    "Set",
                    "Tuple"
                ],
                correct: 3,
                explanation: "Tuples are immutable in Python, meaning they cannot be changed after creation. Lists, dictionaries, and sets are all mutable types."
            },
            {
                question: "What is the output of '3 * 'ab' + 'ba' in Python?",
                options: [
                    "'abababba'",
                    "'3abba'",
                    "'abababa'",
                    "Error"
                ],
                correct: 0,
                explanation: "In Python, multiplying a string by an integer n concatenates the string with itself n times. So 3 * 'ab' becomes 'ababab', then adding 'ba' gives 'abababba'."
            },
            {
                question: "What is the purpose of the '__init__' method in Python classes?",
                options: [
                    "To destroy an object",
                    "To initialize the object's attributes",
                    "To create a new class",
                    "To import modules"
                ],
                correct: 1,
                explanation: "The __init__ method is the constructor in Python classes. It's automatically called when an object is created and is used to initialize the object's state (attributes)."
            },
            {
                question: "Which statement is used for exception handling in Python?",
                options: [
                    "try-catch",
                    "try-except",
                    "try-exception",
                    "try-handle"
                ],
                correct: 1,
                explanation: "Python uses try-except blocks for exception handling, unlike some other languages that use try-catch. The except block captures and handles exceptions that occur in the try block."
            },
            {
                question: "What is the output of 'bool('False')' in Python?",
                options: [
                    "False",
                    "True",
                    "Error",
                    "None"
                ],
                correct: 1,
                explanation: "The bool() function converts values to boolean. Any non-empty string evaluates to True in Python, even if the string is 'False'. Only empty strings evaluate to False."
            },
            {
                question: "Which method would you use to remove an item from a list and return it?",
                options: [
                    "remove()",
                    "delete()",
                    "pop()",
                    "discard()"
                ],
                correct: 2,
                explanation: "The pop() method removes and returns an item at the given index (or the last item if no index is specified). remove() deletes the first matching value, delete is a keyword, and discard() is a set method."
            },
            {
                question: "What does the 'pass' statement do in Python?",
                options: [
                    "Throws an error",
                    "Exits the program",
                    "Does nothing, acts as a placeholder",
                    "Continues to the next iteration in a loop"
                ],
                correct: 2,
                explanation: "The pass statement is a null operation in Python - it does nothing. It's used when syntax requires a statement but no action is needed, often as a placeholder in empty functions, classes, or conditionals."
            },
            {
                question: "How do you open a file for both reading and writing in Python?",
                options: [
                    "open('file.txt', 'r')",
                    "open('file.txt', 'w')",
                    "open('file.txt', 'rw')",
                    "open('file.txt', 'r+')"
                ],
                correct: 3,
                explanation: "The 'r+' mode opens a file for both reading and writing. 'r' is read-only, 'w' is write-only (overwrites file), and 'rw' is not a valid mode."
            },
            {
                question: "What is the output of '[n**2 for n in range(5)]'?",
                options: [
                    "[0, 1, 4, 9, 16]",
                    "[1, 2, 3, 4, 5]",
                    "[0, 1, 4, 9, 16, 25]",
                    "[1, 4, 9, 16, 25]"
                ],
                correct: 0,
                explanation: "This is a list comprehension that squares each number in range(5), which produces numbers 0 to 4. The result is [0, 1, 4, 9, 16]."
            },
            {
                question: "Which decorator is commonly used to define a method as a class method?",
                options: [
                    "@staticmethod",
                    "@classmethod",
                    "@method",
                    "@property"
                ],
                correct: 1,
                explanation: "The @classmethod decorator is used to define a method as a class method. It receives the class as the first argument (cls) rather than the instance (self)."
            },
            {
                question: "What does the 'yield' keyword do in Python?",
                options: [
                    "Returns a value from a function",
                    "Pauses function execution and returns a value",
                    "Terminates a function",
                    "Raises an exception"
                ],
                correct: 1,
                explanation: "The yield keyword pauses function execution and returns a value to the caller, but retains enough state to resume where it left off. Functions containing yield are generator functions."
            },
            {
                question: "How do you create a virtual environment in Python?",
                options: [
                    "python -m venv myenv",
                    "python create virtualenv myenv",
                    "python -m virtualenv create myenv",
                    "python environment myenv"
                ],
                correct: 0,
                explanation: "The standard way to create a virtual environment in Python is using 'python -m venv myenv'. This creates a new virtual environment in the 'myenv' directory."
            },
            {
                question: "What is the purpose of the '__name__' variable in Python?",
                options: [
                    "Stores the name of the current user",
                    "Holds the name of the current function",
                    "Contains the name of the module being executed",
                    "Is always '__main__'"
                ],
                correct: 2,
                explanation: "The __name__ variable holds the name of the current module. When a module is run directly (not imported), __name__ is set to '__main__', which is a common pattern for code that should only run when the script is executed directly."
            },
            {
                question: "Which of these is NOT a valid dictionary key in Python?",
                options: [
                    "Integer",
                    "String",
                    "Tuple",
                    "List"
                ],
                correct: 3,
                explanation: "In Python, dictionary keys must be immutable types. Lists are mutable and cannot be used as dictionary keys. Integers, strings, and tuples (if they contain only immutable elements) can be dictionary keys."
            },
            {
                question: "What does the '//' operator do in Python?",
                options: [
                    "Performs integer (floor) division",
                    "Is used for comments",
                    "Performs floating point division",
                    "Is the exponentiation operator"
                ],
                correct: 0,
                explanation: "The // operator performs floor division, returning the largest integer less than or equal to the division result. For example, 5 // 2 returns 2, not 2.5."
            },
            {
                question: "How do you check if an object is an instance of a particular class?",
                options: [
                    "isinstance()",
                    "type()",
                    "classof()",
                    "Both isinstance() and type()"
                ],
                correct: 0,
                explanation: "The isinstance() function checks if an object is an instance of a class or its subclasses, which is the preferred way to check types in Python. type() returns the exact type but doesn't account for inheritance."
            },
            {
                question: "What is the output of 'print('Hello, World!'[::-1])'?",
                options: [
                    "'Hello, World!'",
                    "'!dlroW ,olleH'",
                    "Error",
                    "'Hello, World!' printed multiple times"
                ],
                correct: 1,
                explanation: "The [::-1] slicing creates a reversed copy of the string by stepping backward through the string. So 'Hello, World!' reversed is '!dlroW ,olleH'."
            },
            {
                question: "Which module would you use for working with dates and times in Python?",
                options: [
                    "datetime",
                    "time",
                    "cal",
                    "All of the above"
                ],
                correct: 0,
                explanation: "The datetime module is the primary module for working with dates and times in Python. While the time module exists, it's lower-level, and there is no standard 'cal' module."
            }
        ];

        // Quiz state
        let currentQuestion = 0;
        let score = 0;
        let selectedOption = null;
        let userAnswers = Array(questions.length).fill(null);

        // DOM elements
        const quizContainer = document.getElementById('quiz');
        const resultContainer = document.getElementById('result-container');
        const questionElement = document.getElementById('question');
        const optionsElement = document.getElementById('options');
        const currentQuestionElement = document.getElementById('current-question');
        const progressElement = document.getElementById('progress');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const submitBtn = document.getElementById('submit-btn');
        const explanationElement = document.getElementById('explanation');
        const explanationTextElement = document.getElementById('explanation-text');
        const scoreElement = document.getElementById('score');
        const assessmentElement = document.getElementById('assessment');
        const resultIconElement = document.getElementById('result-icon');
        const restartBtn = document.getElementById('restart-btn');
        const wrongAnswersList = document.getElementById('wrong-answers-list');

        // Initialize the quiz
        function initQuiz() {
            showQuestion();
            updateNavigationButtons();
        }

        // Display the current question
        function showQuestion() {
            const question = questions[currentQuestion];
            questionElement.textContent = question.question;
            optionsElement.innerHTML = '';
            
            currentQuestionElement.textContent = currentQuestion + 1;
            progressElement.style.width = `${((currentQuestion + 1) / questions.length) * 100}%`;

            // Create options
            question.options.forEach((option, index) => {
                const optionElement = document.createElement('div');
                optionElement.className = 'option';
                if (userAnswers[currentQuestion] === index) {
                    optionElement.classList.add('selected');
                    selectedOption = index;
                }
                
                const input = document.createElement('input');
                input.type = 'radio';
                input.name = 'option';
                input.id = `option-${index}`;
                input.value = index;
                input.checked = userAnswers[currentQuestion] === index;
                input.addEventListener('change', () => selectOption(index));

                const label = document.createElement('label');
                label.className = 'option-label';
                label.htmlFor = `option-${index}`;
                label.textContent = option;

                optionElement.appendChild(input);
                optionElement.appendChild(label);
                optionsElement.appendChild(optionElement);
            });

            // Show explanation if this question was already answered
            if (userAnswers[currentQuestion] !== null) {
                showExplanation();
            } else {
                hideExplanation();
            }
        }

        // Handle option selection
        function selectOption(index) {
            // Remove selected class from all options
            document.querySelectorAll('.option').forEach(option => {
                option.classList.remove('selected');
            });

            // Add selected class to clicked option
            const selectedOptionElement = document.querySelector(`.option input[value="${index}"]`).parentNode;
            selectedOptionElement.classList.add('selected');
            
            selectedOption = index;
            userAnswers[currentQuestion] = index;
            
            // If it's the last question, show the submit button
            if (currentQuestion === questions.length - 1 && userAnswers[currentQuestion] !== null) {
                nextBtn.style.display = 'none';
                submitBtn.style.display = 'inline-block';
            } else {
                nextBtn.style.display = 'inline-block';
                submitBtn.style.display = 'none';
            }

            showExplanation();
        }

        // Show explanation for the current question
        function showExplanation() {
            if (userAnswers[currentQuestion] !== null) {
                explanationTextElement.textContent = questions[currentQuestion].explanation;
                explanationElement.style.display = 'block';
            }
        }

        // Hide the explanation
        function hideExplanation() {
            explanationElement.style.display = 'none';
        }

        // Update navigation buttons state
        function updateNavigationButtons() {
            prevBtn.disabled = currentQuestion === 0;
            
            // For the last question, show submit button if answered
            if (currentQuestion === questions.length - 1) {
                nextBtn.style.display = userAnswers[currentQuestion] === null ? 'inline-block' : 'none';
                submitBtn.style.display = userAnswers[currentQuestion] !== null ? 'inline-block' : 'none';
            } else {
                nextBtn.style.display = 'inline-block';
                submitBtn.style.display = 'none';
            }
        }

        // Go to the next question
        function nextQuestion() {
            if (currentQuestion < questions.length - 1) {
                currentQuestion++;
                selectedOption = null;
                showQuestion();
                updateNavigationButtons();
            }
        }

        // Go to the previous question
        function prevQuestion() {
            if (currentQuestion > 0) {
                currentQuestion--;
                selectedOption = userAnswers[currentQuestion];
                showQuestion();
                updateNavigationButtons();
            }
        }

        // Submit the quiz and show results
        function submitQuiz() {
            // Calculate score and collect wrong answers
            score = 0;
            const wrongAnswers = [];
            
            questions.forEach((question, index) => {
                if (userAnswers[index] === question.correct) {
                    score++;
                } else if (userAnswers[index] !== null) {
                    wrongAnswers.push({
                        questionNumber: index + 1,
                        question: question.question,
                        yourAnswer: question.options[userAnswers[index]],
                        correctAnswer: question.options[question.correct]
                    });
                }
            });
            
            // Display results
            quizContainer.style.display = 'none';
            resultContainer.style.display = 'block';
            scoreElement.textContent = `${score}/${questions.length}`;
            
            // Calculate percentage
            const percentage = (score / questions.length) * 100;
            
            // Determine assessment
            let assessment, iconClass, feedback;
            
            if (percentage >= 90) {
                assessment = "Python Expert!";
                iconClass = "excellent";
                feedback = "Outstanding! Your Python knowledge is comprehensive and detailed. You've demonstrated a deep understanding of Python concepts and syntax. Consider sharing your expertise with others!";
            } else if (percentage >= 75) {
                assessment = "Advanced Python User";
                iconClass = "good";
                feedback = "Great job! You have strong Python knowledge with just a few gaps. With a bit more practice, you'll master all the advanced concepts. Consider working on more complex projects to refine your skills.";
            } else if (percentage >= 50) {
                assessment = "Intermediate Python Programmer";
                iconClass = "average";
                feedback = "Good effort! You understand the basics and some intermediate concepts of Python. Focus on learning about functions, classes, and Python's standard library to improve your skills.";
            } else {
                assessment = "Python Beginner";
                iconClass = "poor";
                feedback = "You're just starting your Python journey! Focus on the fundamentals first - variables, data types, loops, and functions. Practice writing simple programs and gradually increase complexity.";
            }
            
            assessmentElement.textContent = feedback;
            document.querySelector('#assessment').previousElementSibling.textContent = assessment;
            document.querySelector('.result-icon i').className = `fas ${percentage >= 90 ? 'fa-trophy' : percentage >= 75 ? 'fa-award' : percentage >= 50 ? 'fa-star' : 'fa-book'}`;
            resultIconElement.className = `result-icon ${iconClass}`;
            
            // Display wrong answers if any
            if (wrongAnswers.length > 0) {
                wrongAnswersList.innerHTML = '';
                wrongAnswers.forEach(item => {
                    const wrongAnswerElement = document.createElement('div');
                    wrongAnswerElement.className = 'wrong-answer-item';
                    wrongAnswerElement.innerHTML = `
                        <strong>Question ${item.questionNumber}:</strong> ${item.question}<br>
                        <span style="color: var(--danger-color);">Your answer: ${item.yourAnswer}</span><br>
                        <span style="color: var(--success-color);">Correct answer: ${item.correctAnswer}</span>
                    `;
                    wrongAnswersList.appendChild(wrongAnswerElement);
                });
                document.getElementById('wrong-answers').style.display = 'block';
            } else {
                document.getElementById('wrong-answers').style.display = 'none';
            }
        }

        // Restart the quiz
        function restartQuiz() {
            currentQuestion = 0;
            score = 0;
            selectedOption = null;
            userAnswers = Array(questions.length).fill(null);
            
            quizContainer.style.display = 'block';
            resultContainer.style.display = 'none';
            
            showQuestion();
            updateNavigationButtons();
        }

        // Event listeners
        nextBtn.addEventListener('click', nextQuestion);
        prevBtn.addEventListener('click', prevQuestion);
        submitBtn.addEventListener('click', submitQuiz);
        restartBtn.addEventListener('click', restartQuiz);

        // Initialize the quiz when the page loads
        window.addEventListener('DOMContentLoaded', initQuiz);
    </script>
</body>
</html>