index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Interview Prep</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
   
</head>
<body class="bg-gray-100 font-sans">
    <!-- Navigation Bar -->
    <nav class="bg-blue-600 text-white p-4 sticky top-0 z-50">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">Python Interview Prep</h1>
            <ul class="flex space-x-4">
                <li><a href="#home" class="hover:underline">Home</a></li>
                <li><a href="#practice" class="hover:underline">Practice</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="bg-blue-700 text-white py-20">
        <div class="container mx-auto text-center">
            <h2 class="text-4xl font-bold mb-4">Ace Your Python Interview</h2>
            <p class="text-lg mb-6">Practice 41 curated Python questions with a built-in compiler to prepare for your interview.</p>
            <a href="#practice" class="bg-white text-blue-700 px-6 py-3 rounded-full font-semibold hover:bg-gray-200">Start Practicing</a>
        </div>
    </section>

    <!-- Practice Section -->
    <section id="practice" class="py-12">
        <div class="container mx-auto flex">
            <!-- Sidebar -->
            <div class="w-1/4 sidebar bg-white p-4 rounded-lg shadow-md mr-4">
                <h3 class="text-xl font-semibold mb-4">Questions</h3>
                <ul id="question-list" class="space-y-2"></ul>
            </div>
            <!-- Question Content -->
            <div class="w-3/4 bg-white p-8 rounded-lg shadow-md">
                <div id="question-content">
                    <h2 class="text-3xl font-bold mb-4">Select a Question</h2>
                    <p class="text-gray-600">Choose a question from the sidebar to start practicing.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-blue-600 text-white text-center py-4">
        <p>© 2025 Python Mock Test. All rights reserved.</p>
    </footer>

    <script>
        let pyodide = null;
        let currentQuestion = null;

        // Question data
        const questions = [
            {
                id: 1,
                category: "Logic Building & Number Problems",
                title: "Even or Odd",
                description: "Write a Python program to check if a given number is even or odd. Return 'Even' or 'Odd' as a string.",
                sampleInput: "4\n7",
                sampleOutput: "Even\nOdd",
                template: `def is_even_odd(num):
    return "Even" if num % 2 == 0 else "Odd"

# Test (Enter input in the input box below, one number per line)
# Example input: 4
# Example output: Even`
            },
            {
                id: 2,
                category: "Logic Building & Number Problems",
                title: "Greatest among numbers",
                description: "Write a Python program to find the greatest among three numbers. Return the largest number.",
                sampleInput: "10 20 15",
                sampleOutput: "20",
                template: `def find_greatest(a, b, c):
    return max(a, b, c)

# Test (Enter input in the input box below, three numbers separated by spaces)
# Example input: 10 20 15
# Example output: 20`
            },
            {
                id: 3,
                category: "Logic Building & Number Problems",
                title: "Leap Year Check",
                description: "Write a Python program to check if a given year is a leap year. Return 'Leap Year' or 'Not a Leap Year'.",
                sampleInput: "2020\n2021",
                sampleOutput: "Leap Year\nNot a Leap Year",
                template: `def is_leap_year(year):
    if (year % 4 == 0 and year % 100 != 0) or (year % 400 == 0):
        return "Leap Year"
    return "Not a Leap Year"

# Test (Enter input in the input box below, one year per line)
# Example input: 2020
# Example output: Leap Year`
            },
            {
                id: 4,
                category: "Logic Building & Number Problems",
                title: "Prime Number",
                description: "Write a Python program to check if a number is prime. Return 'Prime' or 'Not Prime'.",
                sampleInput: "17\n4",
                sampleOutput: "Prime\nNot Prime",
                template: `def is_prime(num):
    if num < 2:
        return "Not Prime"
    for i in range(2, int(num ** 0.5) + 1):
        if num % i == 0:
            return "Not Prime"
    return "Prime"

# Test (Enter input in the input box below, one number per line)
# Example input: 17
# Example output: Prime`
            },
            // Placeholder for remaining 37 questions
            ...Array.from({ length: 37 }, (_, i) => ({
                id: i + 5,
                category: [
                    "Logic Building & Number Problems",
                    "String Manipulation",
                    "Data Structures / Algorithms",
                    "Swapping & Conversion",
                    "Pattern Printing"
                ][Math.floor((i % 41) / 8)],
                title: [
                    "Prime Numbers in Range", "Armstrong Number", "Armstrong Numbers in Range", "Palindrome Check",
                    "Sum of Digits", "Fibonacci Series", "Factorial (Using Recursion)", "LCM and GCD",
                    "Sum of First N Natural Numbers", "Positive, Negative, or Zero Check",
                    "Reverse a String", "Check if String is Palindrome", "Frequency of Each Character in String",
                    "Check if Two Strings are Anagrams", "Check if All Characters are Unique", "First Non-Repeating Character",
                    "Vowels Count in a String", "Second Largest in an Array", "Remove Duplicates from List", "Binary Search",
                    "Bubble Sort", "Reverse a Linked List", "Missing Numbers from 1 to N", "Implement Stack using List",
                    "Dictionary Group by First Letter and Count", "Merge Two Dictionaries", "List to Dictionary Conversion",
                    "Swap Two Variables", "Decimal to Binary, Octal, Hexadecimal", "Sum of Numbers in Range",
                    "Swap Two Variables for List", "Star Pyramid", "Inverted Pyramid", "Number Triangle", "Full Pyramid",
                    "Diamond Pattern", "Floyd’s Triangle"
                ][i % 37],
                description: `Write a Python program to ${[
                    "find all prime numbers in a given range", "check if a number is an Armstrong number",
                    "find all Armstrong numbers in a range", "check if a number or string is a palindrome",
                    "find the sum of digits of a number", "generate Fibonacci series up to n terms",
                    "calculate factorial using recursion", "find LCM and GCD of two numbers",
                    "find sum of first N natural numbers", "check if a number is positive, negative, or zero",
                    "reverse a string", "check if a string is a palindrome", "find frequency of each character in a string",
                    "check if two strings are anagrams", "check if all characters in a string are unique",
                    "find the first non-repeating character in a string", "count vowels in a string",
                    "find the second largest element in an array", "remove duplicates from a list", "implement binary search",
                    "implement bubble sort", "reverse a linked list", "find missing numbers from 1 to N",
                    "implement a stack using a list", "group words by first letter and count them", "merge two dictionaries",
                    "convert a list to a dictionary", "swap two variables with/without a temporary variable",
                    "convert a decimal number to binary, octal, and hexadecimal", "find the sum of numbers in a given range",
                    "swap two variables in a list", "print a star pyramid pattern", "print an inverted pyramid pattern",
                    "print a number triangle pattern", "print a full pyramid pattern", "print a diamond pattern",
                    "print Floyd’s triangle"
                ][i % 37]}.`,
                sampleInput: "Sample input",
                sampleOutput: "Sample output",
                template: `def ${[
                    "prime_in_range", "is_armstrong", "armstrong_in_range", "is_palindrome", "sum_digits", "fibonacci",
                    "factorial", "lcm_gcd", "sum_natural", "check_number", "reverse_string", "is_string_palindrome",
                    "char_frequency", "are_anagrams", "all_unique", "first_non_repeating", "count_vowels", "second_largest",
                    "remove_duplicates", "binary_search", "bubble_sort", "reverse_linked_list", "missing_numbers", "stack",
                    "group_by_letter", "merge_dicts", "list_to_dict", "swap_vars", "dec_to_base", "sum_range", "swap_list",
                    "star_pyramid", "inverted_pyramid", "number_triangle", "full_pyramid", "diamond", "floyd_triangle"
                ][i % 37]}():
    # Your code here
    pass

# Test (Enter input in the input box below)
# Example input: Sample input
# Example output: Sample output`
            }))
        ];

        // Initialize Pyodide
        async function initializePyodide() {
            try {
                pyodide = await loadPyodide();
                document.getElementById('question-content').innerHTML += '<p class="text-green-600 mt-2">Code compiler ready!</p>';
            } catch (error) {
                document.getElementById('question-content').innerHTML += `<p class="text-red-600 mt-2">Failed to load the compiler: ${error.message}</p>`;
                console.error('Pyodide initialization failed:', error);
            }
        }

        initializePyodide();

        // Populate sidebar
        function populateSidebar() {
            const questionList = document.getElementById('question-list');
            questionList.innerHTML = ''; // Clear existing content
            const categories = [...new Set(questions.map(q => q.category))];
            categories.forEach(category => {
                const li = document.createElement('li');
                li.innerHTML = `<h4 class="font-semibold text-lg mt-4">${category}</h4>`;
                questionList.appendChild(li);
                questions.filter(q => q.category === category).forEach(q => {
                    const qLi = document.createElement('li');
                    qLi.innerHTML = `<a href="#" class="block p-2 rounded question-link cursor-pointer" data-id="${q.id}">${q.title}</a>`;
                    questionList.appendChild(qLi);
                });
            });
            // Add click listeners
            document.querySelectorAll('.question-link').forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    const id = parseInt(e.target.dataset.id);
                    if (id) {
                        loadQuestion(id);
                    } else {
                        console.error('Invalid question ID:', e.target.dataset.id);
                    }
                });
            });
            console.log('Sidebar populated with', questions.length, 'questions');
        }

        populateSidebar();

        // Load question
        function loadQuestion(id) {
            const question = questions.find(q => q.id === id);
            if (!question) {
                console.error('Question not found for ID:', id);
                return;
            }
            currentQuestion = question;
            document.querySelectorAll('.question-link').forEach(link => {
                link.parentElement.classList.remove('active-question');
                if (parseInt(link.dataset.id) === id) {
                    link.parentElement.classList.add('active-question');
                }
            });
            document.getElementById('question-content').innerHTML = `
                <h2 class="text-3xl font-bold mb-4">${question.title}</h2>
                <p class="text-gray-600 mb-4">${question.description}</p>
                <div class="mb-4">
                    <h3 class="text-lg font-semibold">Sample Input:</h3>
                    <pre class="text-left bg-gray-100 p-3 rounded">${question.sampleInput}</pre>
                </div>
                <div class="mb-4">
                    <h3 class="text-lg font-semibold">Sample Output:</h3>
                    <pre class="text-left bg-gray-100 p-3 rounded">${question.sampleOutput}</pre>
                </div>
                <div class="mb-4">
                    <h3 class="text-lg font-semibold">Test Input:</h3>
                    <textarea id="input-box" class="input-box p-2" placeholder="Enter test input here (e.g., ${question.sampleInput})">${question.sampleInput}</textarea>
                    <p class="text-sm text-gray-500">Provide input as shown in the Sample Input section above.</p>
                </div>
                <textarea id="code-editor" class="code-editor mb-2">${question.template}</textarea>
                <button onclick="runCode()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Run Code</button>
                <div id="output" class="output-box mt-4"></div>
            `;
            window.scrollTo({ top: document.getElementById('practice').offsetTop, behavior: 'smooth' });
        }

        // Run Python code
        async function runCode() {
            if (!pyodide) {
                document.getElementById('output').innerText = 'Code compiler not loaded. Please wait or refresh the page.';
                return;
            }

            const code = document.getElementById('code-editor').value;
            const userInput = document.getElementById('input-box').value;
            const outputDiv = document.getElementById('output');
            outputDiv.innerText = 'Running Code...';

            try {
                // Set up input simulation
                await pyodide.runPythonAsync(`
                    import sys
                    from io import StringIO
                    sys.stdin = StringIO('''${userInput}''')
                    sys.stdout = StringIO()
                `);

                // Run user code
                await pyodide.runPythonAsync(code);

                // Capture output
                const output = await pyodide.runPythonAsync('sys.stdout.getvalue()');
                outputDiv.innerText = output || 'No output produced';

                // Reset stdin/stdout
                await pyodide.runPythonAsync(`
                    sys.stdin = sys.__stdin__
                    sys.stdout = sys.__stdout__
                `);
            } catch (error) {
                outputDiv.innerText = `Error: ${error.message}`;
                if (error.message.includes('read')) {
                    outputDiv.innerText += '\nHint: Ensure you have provided valid input in the Test Input box above.';
                }
            }
        }
    </script>
</body>
</html>