Spaces:

ssmita25
/

ai-quiz-with-deepsite

Running

File size: 54,923 Bytes

fb518ea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI-Powered Data Science Quiz</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Roboto+Mono:wght@400;700&display=swap');
        
        :root {
            --easy-color: #4CAF50;
            --medium-color: #FF9800;
            --hard-color: #F44336;
            --primary-bg: #f8f9fa;
            --card-bg: #ffffff;
            --text-color: #333333;
            --hover-color: #f1f1f1;
            --correct-color: #8BC34A;
            --incorrect-color: #FF5252;
            --loading-color: #2196F3;
            --api-color: #9C27B0;
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--primary-bg);
            color: var(--text-color);
            line-height: 1.6;
            padding: 20px;
            transition: background-color 0.3s;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            animation: fadeIn 0.6s ease-in-out;
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #3F51B5;
            font-weight: 700;
        }
        
        .subtitle {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 20px;
        }
        
        .difficulty-selector {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .difficulty-btn {
            padding: 12px 25px;
            border: none;
            border-radius: 30px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
        }
        
        .difficulty-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .easy {
            background-color: var(--easy-color);
            color: white;
        }
        
        .medium {
            background-color: var(--medium-color);
            color: white;
        }
        
        .hard {
            background-color: var(--hard-color);
            color: white;
        }
        
        .difficulty-btn.loading::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent
            );
            animation: loading 1.5s infinite;
        }
        
        .difficulty-btn.active {
            transform: scale(1.05);
            box-shadow: 0 0 0 3px rgba(0,0,0,0.2);
        }
        
        .quiz-container {
            background-color: var(--card-bg);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            padding: 30px;
            margin-bottom: 30px;
            display: none;
            animation: slideIn 0.5s ease-out;
        }
        
        .quiz-container.active {
            display: block;
        }
        
        .question-counter {
            font-family: 'Roboto Mono', monospace;
            color: #666;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .question-text {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 25px;
            color: #2c3e50;
            line-height: 1.4;
            min-height: 80px;
        }
        
        .options-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
        }
        
        .option {
            padding: 15px 20px;
            background-color: var(--card-bg);
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1rem;
            display: flex;
            align-items: center;
            min-height: 70px;
        }
        
        .option:hover {
            background-color: var(--hover-color);
            border-color: #bdbdbd;
        }
        
        .option.selected {
            background-color: #E3F2FD;
            border-color: #2196F3;
        }
        
        .option.correct {
            background-color: var(--correct-color);
            border-color: var(--correct-color);
            color: white;
        }
        
        .option.incorrect {
            background-color: var(--incorrect-color);
            border-color: var(--incorrect-color);
            color: white;
        }
        
        .option-letter {
            font-weight: bold;
            margin-right: 15px;
            min-width: 20px;
            font-size: 1.1rem;
        }
        
        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
        
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 30px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            background-color: #3F51B5;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .btn:disabled {
            background-color: #BDBDBD;
            cursor: not-allowed;
            opacity: 0.7;
        }
        
        .btn:hover:not(:disabled) {
            background-color: #303F9F;
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
        
        .results-container {
            background-color: var(--card-bg);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            padding: 30px;
            text-align: center;
            display: none;
        }
        
        .results-container.active {
            display: block;
            animation: fadeIn 0.6s ease-in-out;
        }
        
        .results-title {
            font-size: 2rem;
            margin-bottom: 20px;
            color: #3F51B5;
        }
        
        .score {
            font-size: 3rem;
            font-weight: 700;
            margin: 20px 0;
            color: #4CAF50;
        }
        
        .score-text {
            margin-bottom: 20px;
            font-size: 1.1rem;
        }
        
        .retry-btn {
            padding: 12px 25px;
            background-color: #3F51B5;
            color: white;
            border: none;
            border-radius: 30px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 20px;
        }
        
        .retry-btn:hover {
            background-color: #303F9F;
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
        
        .progress-container {
            width: 100%;
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            margin-bottom: 30px;
            overflow: hidden;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideIn {
            from { 
                opacity: 0;
                transform: translateY(20px);
            }
            to { 
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes loading {
            0% {
                transform: translateX(-100%);
            }
            100% {
                transform: translateX(100%);
            }
        }
        
        .difficulty-tag {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 10px;
            vertical-align: middle;
        }
        
        .difficulty-tag.easy {
            background-color: #E8F5E9;
            color: var(--easy-color);
        }
        
        .difficulty-tag.medium {
            background-color: #FFF3E0;
            color: var(--medium-color);
        }
        
        .difficulty-tag.hard {
            background-color: #FFEBEE;
            color: var(--hard-color);
        }
        
        .explanation {
            margin-top: 20px;
            padding: 15px;
            background-color: #E3F2FD;
            border-radius: 8px;
            font-size: 0.9rem;
            line-height: 1.6;
            display: none;
        }
        
        .explanation-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: #0D47A1;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            color: #666;
            font-size: 0.9rem;
        }
        
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 300px;
            gap: 20px;
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: var(--loading-color);
            animation: spin 1s linear infinite;
        }
        
        .loading-text {
            color: var(--loading-color);
            font-weight: 600;
        }
        
        .api-count {
            display: inline-block;
            margin-left: 10px;
            padding: 2px 8px;
            background-color: var(--api-color);
            color: white;
            border-radius: 10px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .json-format {
            width: 100%;
            height: 120px;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid #ddd;
            font-family: 'Roboto Mono', monospace;
            font-size: 0.85rem;
            margin-bottom: 20px;
            resize: none;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .difficulty-selector {
                flex-direction: column;
                align-items: center;
            }
            
            .difficulty-btn {
                width: 100%;
            }
            
            .quiz-container, .results-container {
                padding: 20px 15px;
            }
            
            .question-text {
                min-height: auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>AI-Powered Data Science Quiz <span class="api-count">GPT API</span></h1>
            <p class="subtitle">Dynamic questions generated by AI based on selected difficulty</p>
        </header>
        
        <div class="difficulty-selector">
            <button class="difficulty-btn easy" data-difficulty="easy">
                <i class="fas fa-seedling"></i> Beginner
            </button>
            <button class="difficulty-btn medium" data-difficulty="medium">
                <i class="fas fa-brain"></i> Intermediate
            </button>
            <button class="difficulty-btn hard" data-difficulty="hard">
                <i class="fas fa-rocket"></i> Advanced
            </button>
        </div>
        
        <div class="quiz-container" id="quiz-container">
            <div class="loading-container" id="loading-container">
                <div class="spinner"></div>
                <div class="loading-text">Generating questions with AI...</div>
            </div>
            
            <div id="quiz-content" style="display: none;">
                <div class="progress-container">
                    <div class="progress-bar" id="progress-bar"></div>
                </div>
                
                <div class="question-counter" id="question-counter">Question 1 of 5</div>
                <div class="question-text" id="question-text"></div>
                
                <div class="options-container" id="options-container">
                    <!-- Options will be added dynamically -->
                </div>
                
                <div class="explanation" id="explanation">
                    <div class="explanation-title">Explanation:</div>
                    <p id="explanation-text"></p>
                </div>
                
                <div class="navigation">
                    <button class="btn" id="prev-btn" disabled>
                        <i class="fas fa-arrow-left"></i> Previous
                    </button>
                    <button class="btn" id="next-btn">
                        Next <i class="fas fa-arrow-right"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="results-container" id="results-container">
            <h2 class="results-title">Quiz Completed!</h2>
            <div class="score" id="score">0%</div>
            <p class="score-text" id="score-text"></p>
            <button class="retry-btn" id="retry-btn">
                <i class="fas fa-redo"></i> Try Another Difficulty
            </button>
        </div>
        
        <footer>
            <p>AI-Powered Data Science Quiz &copy; 2023 | Questions generated with OpenAI API</p>
        </footer>
    </div>
    
    <script>
        // DOM elements
        const difficultyBtns = document.querySelectorAll('.difficulty-btn');
        const quizContainer = document.getElementById('quiz-container');
        const quizContent = document.getElementById('quiz-content');
        const loadingContainer = document.getElementById('loading-container');
        const resultsContainer = document.getElementById('results-container');
        const questionCounter = document.getElementById('question-counter');
        const questionText = document.getElementById('question-text');
        const optionsContainer = document.getElementById('options-container');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const retryBtn = document.getElementById('retry-btn');
        const scoreElement = document.getElementById('score');
        const scoreText = document.getElementById('score-text');
        const progressBar = document.getElementById('progress-bar');
        const explanation = document.getElementById('explanation');
        const explanationText = document.getElementById('explanation-text');
        
        // Quiz state variables
        let currentDifficulty = null;
        let quizQuestions = [];
        let currentQuestionIndex = 0;
        let score = 0;
        let userAnswers = [];
        let apiKey = ''; // You should set this or get it from user input
        
        // Event listeners for difficulty selection
        difficultyBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const difficulty = btn.dataset.difficulty;
                
                // Set loading state
                difficultyBtns.forEach(b => {
                    b.disabled = true;
                    if (b !== btn) b.classList.add('disabled');
                });
                btn.classList.add('loading');
                
                // Start quiz with selected difficulty
                generateQuestions(difficulty)
                    .then(() => {
                        startQuiz(difficulty);
                        
                        // Reset button states
                        difficultyBtns.forEach(b => {
                            b.disabled = false;
                            if (b !== btn) b.classList.remove('disabled');
                        });
                        btn.classList.remove('loading');
                        
                        // Update active button style
                        difficultyBtns.forEach(b => b.classList.remove('active'));
                        btn.classList.add('active');
                    })
                    .catch(error => {
                        console.error('Error generating questions:', error);
                        alert('Failed to generate questions. Please try again.');
                        
                        // Reset button states
                        difficultyBtns.forEach(b => {
                            b.disabled = false;
                            b.classList.remove('disabled', 'loading');
                        });
                    });
            });
        });
        
        // Event listeners for navigation buttons
        prevBtn.addEventListener('click', showPreviousQuestion);
        nextBtn.addEventListener('click', showNextQuestion);
        retryBtn.addEventListener('click', resetQuiz);
        
        // Generate questions using OpenAI API
        async function generateQuestions(difficulty) {
            // Show loading state
            quizContainer.classList.add('active');
            loadingContainer.style.display = 'flex';
            quizContent.style.display = 'none';
            
            // Define prompt based on difficulty
            let prompt;
            switch(difficulty) {
                case 'easy':
                    prompt = `Generate 5 basic data science multiple-choice questions (MCQs) for beginners. 
                    Each question should have 4 options with clear correct answers. 
                    Include explanations for each answer. Return as a JSON array with this structure:
                    [{
                        "question": "question text",
                        "options": ["option1", "option2", "option3", "option4"],
                        "correct": 0, // index of correct option
                        "explanation": "detailed explanation"
                    }]`;
                    break;
                case 'medium':
                    prompt = `Generate 5 intermediate data science multiple-choice questions (MCQs) covering topics 
                    like data cleaning, visualization, basic statistics, and machine learning concepts. 
                    Each question should have 4 challenging options with one clearly correct answer. 
                    Include detailed explanations. Return as a JSON array with this structure:
                    [{
                        "question": "question text",
                        "options": ["option1", "option2", "option3", "option4"],
                        "correct": 0, // index of correct option
                        "explanation": "detailed explanation"
                    }]`;
                    break;
                case 'hard':
                    prompt = `Generate 5 advanced data science multiple-choice questions (MCQs) covering 
                    complex topics like deep learning, optimization, advanced statistics, 
                    and real-world implementation challenges. Each question should have 4 
                    subtle options with one correct answer that tests nuanced understanding. 
                    Include in-depth explanations. Return as a JSON array with this structure:
                    [{
                        "question": "question text",
                        "options": ["option1", "option2", "option3", "option4"],
                        "correct": 0, // index of correct option
                        "explanation": "detailed explanation"
                    }]`;
                    break;
            }
            
            try {
                // In a production environment, you would call your backend API here
                // which would then call OpenAI's API with proper authentication
                
                // For demonstration purposes, we'll simulate an API call with a delay
                await new Promise(resolve => setTimeout(resolve, 2000));
                
                // Simulated response - in a real app, this would come from the API
                let simulatedResponse;
                switch(difficulty) {
                    case 'easy':
                        simulatedResponse = [
                            {
                                "question": "Which Python library is primarily used for data manipulation and analysis?",
                                "options": [
                                    "Matplotlib",
                                    "Pandas",
                                    "Scikit-learn",
                                    "TensorFlow"
                                ],
                                "correct": 1,
                                "explanation": "Pandas is the primary Python library for data manipulation and analysis. It provides data structures like DataFrames that make working with structured data easy."
                            },
                            {
                                "question": "What does CSV stand for in data science?",
                                "options": [
                                    "Character Separated Values",
                                    "Comma Separated Values",
                                    "Columnar Structured Variables",
                                    "Computer System Verification"
                                ],
                                "correct": 1,
                                "explanation": "CSV stands for Comma Separated Values, which is a simple file format used to store tabular data. Each line represents a row, with values separated by commas."
                            },
                            {
                                "question": "Which of these is NOT a supervised learning algorithm?",
                                "options": [
                                    "Linear Regression",
                                    "Decision Trees",
                                    "K-Means Clustering",
                                    "Random Forest"
                                ],
                                "correct": 2,
                                "explanation": "K-Means Clustering is an unsupervised learning algorithm that groups similar data points together. Unlike supervised learning, it doesn't require labeled training data."
                            },
                            {
                                "question": "What's the purpose of the .head() method in Pandas?",
                                "options": [
                                    "Display the first few rows of a DataFrame",
                                    "Calculate the average of each column",
                                    "Remove missing values from the DataFrame",
                                    "Round numbers to the nearest integer"
                                ],
                                "correct": 0,
                                "explanation": "The .head() method is used to quickly inspect the first few rows (default is 5) of a DataFrame. This is useful for getting a sense of your data's structure and content."
                            },
                            {
                                "question": "Which tool would you use to create a 2D plot of your data?",
                                "options": [
                                    "NumPy",
                                    "Matplotlib",
                                    "Pandas",
                                    "SciPy"
                                ],
                                "correct": 1,
                                "explanation": "Matplotlib is Python's primary 2D plotting library. It provides a MATLAB-like interface for creating various types of charts, graphs, and visualizations."
                            }
                        ];
                        break;
                    case 'medium':
                        simulatedResponse = [
                            {
                                "question": "What is the primary purpose of one-hot encoding?",
                                "options": [
                                    "To normalize numerical features",
                                    "To convert categorical variables into binary vectors",
                                    "To reduce dimensionality of numerical data",
                                    "To handle missing values in a dataset"
                                ],
                                "correct": 1,
                                "explanation": "One-hot encoding converts categorical variables into a binary matrix representation where each category becomes a binary feature. This is necessary because most machine learning algorithms work with numerical data."
                            },
                            {
                                "question": "Which evaluation metric would be most appropriate for an imbalanced classification problem?",
                                "options": [
                                    "Accuracy",
                                    "Mean Squared Error",
                                    "F1 Score",
                                    "R-squared"
                                ],
                                "correct": 2,
                                "explanation": "The F1 score is the harmonic mean of precision and recall, making it a better metric than accuracy for imbalanced datasets where one class significantly outnumbers the others."
                            },
                            {
                                "question": "In feature selection, what does the Pearson correlation coefficient measure between two variables?",
                                "options": [
                                    "Causal relationship",
                                    "Proportion of variance explained",
                                    "Linear relationship",
                                    "Statistical significance"
                                ],
                                "correct": 2,
                                "explanation": "Pearson correlation measures the linear relationship between two continuous variables, ranging from -1 (perfect negative correlation) to +1 (perfect positive correlation)."
                            },
                            {
                                "question": "What does the term 'overfitting' refer to in machine learning?",
                                "options": [
                                    "Model learns the training data too well including noise",
                                    "Model fails to capture patterns in the training data",
                                    "Model takes too long to train",
                                    "Model performs differently on different hardware"
                                ],
                                "correct": 0,
                                "explanation": "Overfitting occurs when a model learns the detail and noise in the training data to the extent that it negatively impacts the performance of the model on new data."
                            },
                            {
                                "question": "Which technique would you use to identify clusters in unlabeled data?",
                                "options": [
                                    "Linear Regression",
                                    "Principal Component Analysis",
                                    "K-Means Clustering",
                                    "Logistic Regression"
                                ],
                                "correct": 2,
                                "explanation": "K-Means is an unsupervised learning algorithm that groups similar data points into clusters. It works well for identifying natural groupings in unlabeled data."
                            }
                        ];
                        break;
                    case 'hard':
                        simulatedResponse = [
                            {
                                "question": "What is the primary purpose of a dropout layer in a neural network?",
                                "options": [
                                    "To accelerate forward propagation",
                                    "To regularize the model by randomly deactivating neurons",
                                    "To reduce the dimensionality of the input",
                                    "To convert the output to probabilities"
                                ],
                                "correct": 1,
                                "explanation": "Dropout is a regularization technique where randomly selected neurons are ignored during training. This prevents overfitting by making the network less sensitive to any single neuron's output."
                            },
                            {
                                "question": "In the attention mechanism of transformers, what does the query-key-value computation achieve?",
                                "options": [
                                    "It determines the degree of focus on different parts of the input",
                                    "It compresses the model parameters to fit memory constraints",
                                    "It converts discrete tokens to continuous embeddings",
                                    "It normalizes the gradients during backpropagation"
                                ],
                                "correct": 0,
                                "explanation": "The query-key-value computation in attention mechanisms determines how much focus to place on different parts of the input sequence by computing attention scores as the dot product of queries and keys."
                            },
                            {
                                "question": "What is the main advantage of using a ROC curve for binary classification evaluation?",
                                "options": [
                                    "It's threshold-independent",
                                    "It shows performance at perfect precision",
                                    "It works better than PR curves for balanced datasets",
                                    "It directly optimizes for model accuracy"
                                ],
                                "correct": 0,
                                "explanation": "The ROC curve plots true positive rate vs false positive rate at various classification thresholds, providing a comprehensive view of model performance across all possible thresholds."
                            },
                            {
                                "question": "In Bayesian optimization, what is the role of the acquisition function?",
                                "options": [
                                    "To model the objective function's probability distribution",
                                    "To determine the next set of hyperparameters to evaluate",
                                    "To regularize the complexity of the surrogate model",
                                    "To handle categorical variables in the search space"
                                ],
                                "correct": 1,
                                "explanation": "The acquisition function balances exploration and exploitation to suggest the most promising hyperparameters to evaluate next, based on the surrogate model's predictions."
                            },
                            {
                                "question": "What differentiates a variational autoencoder (VAE) from a standard autoencoder?",
                                "options": [
                                    "VAEs use convolutional layers exclusively",
                                    "VAEs learn a latent probability distribution rather than discrete encodings",
                                    "VAEs require labeled data for training",
                                    "VAEs are restricted to binary classification tasks"
                                ],
                                "correct": 1,
                                "explanation": "VAEs learn the parameters of a probability distribution representing the data in latent space, enabling generative capabilities through sampling, unlike standard autoencoders which learn deterministic encodings."
                            }
                        ];
                        break;
                }
                
                return simulatedResponse;
                
            } catch (error) {
                console.error('Error generating questions:', error);
                throw error;
            }
        }
        
        // Initialize quiz with generated questions
        function startQuiz(difficulty) {
            currentDifficulty = difficulty;
            quizQuestions = window.quizData[difficulty]; // In a real app, use the generated questions
            currentQuestionIndex = 0;
            score = 0;
            userAnswers = Array(quizQuestions.length).fill(null);
            
            // Show quiz content
            loadingContainer.style.display = 'none';
            quizContent.style.display = 'block';
            
            // Reset UI
            quizContainer.classList.add('active');
            resultsContainer.classList.remove('active');
            
            showQuestion();
            updateProgressBar();
        }
        
        // Display current question
        function showQuestion() {
            const question = quizQuestions[currentQuestionIndex];
            
            // Update question counter
            questionCounter.textContent = `Question ${currentQuestionIndex + 1} of ${quizQuestions.length}`;
            
            // Update question text
            questionText.textContent = question.question;
            
            // Clear previous options
            optionsContainer.innerHTML = '';
            
            // Add new options with letters (A, B, C, D)
            const optionLetters = ['A', 'B', 'C', 'D'];
            question.options.forEach((option, index) => {
                const optionElement = document.createElement('div');
                optionElement.className = 'option';
                
                // Add letter indicator
                const letterSpan = document.createElement('span');
                letterSpan.className = 'option-letter';
                letterSpan.textContent = optionLetters[index];
                optionElement.appendChild(letterSpan);
                
                // Add option text
                const textSpan = document.createElement('span');
                textSpan.textContent = option;
                optionElement.appendChild(textSpan);
                
                // Add click event
                optionElement.addEventListener('click', () => selectOption(index));
                
                // Highlight if previously selected
                if (userAnswers[currentQuestionIndex] === index) {
                    optionElement.classList.add('selected');
                    
                    // Show correct/incorrect if reviewing
                    if (userAnswers[currentQuestionIndex] !== null) {
                        if (index === question.correct) {
                            optionElement.classList.add('correct');
                        } else {
                            optionElement.classList.add('incorrect');
                        }
                        
                        // Highlight correct answer if wrong
                        if (userAnswers[currentQuestionIndex] !== question.correct) {
                            const correctOption = optionsContainer.children[question.correct];
                            correctOption.classList.add('correct');
                        }
                        
                        // Show explanation
                        explanation.style.display = 'block';
                        explanationText.textContent = question.explanation;
                    }
                }
                
                optionsContainer.appendChild(optionElement);
            });
            
            // Hide explanation initially for new questions
            if (userAnswers[currentQuestionIndex] === null) {
                explanation.style.display = 'none';
            }
            
            // Update navigation buttons
            prevBtn.disabled = currentQuestionIndex === 0;
            nextBtn.textContent = currentQuestionIndex === quizQuestions.length - 1 ? 
                                 'Submit' : 'Next';
        }
        
        // Handle option selection
        function selectOption(optionIndex) {
            // If already answered (review mode), don't allow changes
            if (userAnswers[currentQuestionIndex] !== null) return;
            
            const question = quizQuestions[currentQuestionIndex];
            
            // Clear previous selection
            const options = document.querySelectorAll('.option');
            options.forEach(opt => opt.classList.remove('selected'));
            
            // Highlight selected option
            options[optionIndex].classList.add('selected');
            
            // Store user answer
            userAnswers[currentQuestionIndex] = optionIndex;
            
            // Show explanation
            explanation.style.display = 'block';
            explanationText.textContent = question.explanation;
            
            // Update score if correct
            if (optionIndex === question.correct) {
                score++;
            }
            
            // Highlight correct/incorrect if reviewing
            if (userAnswers[currentQuestionIndex] !== null) {
                if (optionIndex === question.correct) {
                    options[optionIndex].classList.add('correct');
                } else {
                    options[optionIndex].classList.add('incorrect');
                    
                    // Highlight correct answer
                    const correctOption = options[question.correct];
                    correctOption.classList.add('correct');
                }
            }
            
            // Update progress bar
            updateProgressBar();
            
            // Automatically proceed after short delay if not last question
            if (currentQuestionIndex < quizQuestions.length - 1) {
                setTimeout(() => {
                    currentQuestionIndex++;
                    showQuestion();
                }, 1500);
            }
        }
        
        // Show next question
        function showNextQuestion() {
            // If on last question and answered, show results
            if (currentQuestionIndex === quizQuestions.length - 1 && 
                userAnswers[currentQuestionIndex] !== null) {
                showResults();
                return;
            }
            
            // Require answer before proceeding unless on review
            if (userAnswers[currentQuestionIndex] === null) {
                alert('Please select an answer before proceeding.');
                return;
            }
            
            if (currentQuestionIndex < quizQuestions.length - 1) {
                currentQuestionIndex++;
                showQuestion();
            } else {
                showResults();
            }
        }
        
        // Show previous question
        function showPreviousQuestion() {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                showQuestion();
            }
        }
        
        // Display final results
        function showResults() {
            quizContainer.classList.remove('active');
            resultsContainer.classList.add('active');
            
            const percentage = Math.round((score / quizQuestions.length) * 100);
            scoreElement.textContent = `${percentage}%`;
            
            // Dynamic score message
            let message;
            if (percentage >= 90) {
                message = `Outstanding! You really know your ${currentDifficulty === 'easy' ? 'basics' : currentDifficulty === 'medium' ? 'intermediate concepts' : 'advanced topics'}!`;
            } else if (percentage >= 70) {
                message = `Good job! You have solid ${currentDifficulty === 'easy' ? 'basic' : currentDifficulty === 'medium' ? 'intermediate' : 'advanced'} knowledge.`;
            } else if (percentage >= 50) {
                message = `Not bad! You've got some ${currentDifficulty === 'easy' ? 'basic' : currentDifficulty === 'medium' ? 'intermediate' : 'advanced'} understanding.`;
            } else {
                message = `Keep practicing! You'll improve your ${currentDifficulty === 'easy' ? 'basic' : currentDifficulty === 'medium' ? 'intermediate' : 'advanced'} skills with time.`;
            }
            
            scoreText.textContent = `${message} You answered ${score} out of ${quizQuestions.length} questions correctly.`;
        }
        
        // Reset quiz to initial state
        function resetQuiz() {
            resultsContainer.classList.remove('active');
            quizContainer.classList.remove('active');
            difficultyBtns.forEach(btn => {
                btn.classList.remove('active');
                btn.disabled = false;
            });
        }
        
        // Update progress bar
        function updateProgressBar() {
            const answeredCount = userAnswers.filter(answer => answer !== null).length;
            const progress = (answeredCount / quizQuestions.length) * 100;
            progressBar.style.width = `${progress}%`;
        }
        
        // Store the simulated response as quiz data
        window.quizData = {
            easy: [
                {
                    "question": "Which Python library is primarily used for data manipulation and analysis?",
                    "options": [
                        "Matplotlib",
                        "Pandas",
                        "Scikit-learn",
                        "TensorFlow"
                    ],
                    "correct": 1,
                    "explanation": "Pandas is the primary Python library for data manipulation and analysis. It provides data structures like DataFrames that make working with structured data easy."
                },
                {
                    "question": "What does CSV stand for in data science?",
                    "options": [
                        "Character Separated Values",
                        "Comma Separated Values",
                        "Columnar Structured Variables",
                        "Computer System Verification"
                    ],
                    "correct": 1,
                    "explanation": "CSV stands for Comma Separated Values, which is a simple file format used to store tabular data. Each line represents a row, with values separated by commas."
                },
                {
                    "question": "Which of these is NOT a supervised learning algorithm?",
                    "options": [
                        "Linear Regression",
                        "Decision Trees",
                        "K-Means Clustering",
                        "Random Forest"
                    ],
                    "correct": 2,
                    "explanation": "K-Means Clustering is an unsupervised learning algorithm that groups similar data points together. Unlike supervised learning, it doesn't require labeled training data."
                },
                {
                    "question": "What's the purpose of the .head() method in Pandas?",
                    "options": [
                        "Display the first few rows of a DataFrame",
                        "Calculate the average of each column",
                        "Remove missing values from the DataFrame",
                        "Round numbers to the nearest integer"
                    ],
                    "correct": 0,
                    "explanation": "The .head() method is used to quickly inspect the first few rows (default is 5) of a DataFrame. This is useful for getting a sense of your data's structure and content."
                },
                {
                    "question": "Which tool would you use to create a 2D plot of your data?",
                    "options": [
                        "NumPy",
                        "Matplotlib",
                        "Pandas",
                        "SciPy"
                    ],
                    "correct": 1,
                    "explanation": "Matplotlib is Python's primary 2D plotting library. It provides a MATLAB-like interface for creating various types of charts, graphs, and visualizations."
                }
            ],
            medium: [
                {
                    "question": "What is the primary purpose of one-hot encoding?",
                    "options": [
                        "To normalize numerical features",
                        "To convert categorical variables into binary vectors",
                        "To reduce dimensionality of numerical data",
                        "To handle missing values in a dataset"
                    ],
                    "correct": 1,
                    "explanation": "One-hot encoding converts categorical variables into a binary matrix representation where each category becomes a binary feature. This is necessary because most machine learning algorithms work with numerical data."
                },
                {
                    "question": "Which evaluation metric would be most appropriate for an imbalanced classification problem?",
                    "options": [
                        "Accuracy",
                        "Mean Squared Error",
                        "F1 Score",
                        "R-squared"
                    ],
                    "correct": 2,
                    "explanation": "The F1 score is the harmonic mean of precision and recall, making it a better metric than accuracy for imbalanced datasets where one class significantly outnumbers the others."
                },
                {
                    "question": "In feature selection, what does the Pearson correlation coefficient measure between two variables?",
                    "options": [
                        "Causal relationship",
                        "Proportion of variance explained",
                        "Linear relationship",
                        "Statistical significance"
                    ],
                    "correct": 2,
                    "explanation": "Pearson correlation measures the linear relationship between two continuous variables, ranging from -1 (perfect negative correlation) to +1 (perfect positive correlation)."
                },
                {
                    "question": "What does the term 'overfitting' refer to in machine learning?",
                    "options": [
                        "Model learns the training data too well including noise",
                        "Model fails to capture patterns in the training data",
                        "Model takes too long to train",
                        "Model performs differently on different hardware"
                    ],
                    "correct": 0,
                    "explanation": "Overfitting occurs when a model learns the detail and noise in the training data to the extent that it negatively impacts the performance of the model on new data."
                },
                {
                    "question": "Which technique would you use to identify clusters in unlabeled data?",
                    "options": [
                        "Linear Regression",
                        "Principal Component Analysis",
                        "K-Means Clustering",
                        "Logistic Regression"
                    ],
                    "correct": 2,
                    "explanation": "K-Means is an unsupervised learning algorithm that groups similar data points into clusters. It works well for identifying natural groupings in unlabeled data."
                }
            ],
            hard: [
                {
                    "question": "What is the primary purpose of a dropout layer in a neural network?",
                    "options": [
                        "To accelerate forward propagation",
                        "To regularize the model by randomly deactivating neurons",
                        "To reduce the dimensionality of the input",
                        "To convert the output to probabilities"
                    ],
                    "correct": 1,
                    "explanation": "Dropout is a regularization technique where randomly selected neurons are ignored during training. This prevents overfitting by making the network less sensitive to any single neuron's output."
                },
                {
                    "question": "In the attention mechanism of transformers, what does the query-key-value computation achieve?",
                    "options": [
                        "It determines the degree of focus on different parts of the input",
                        "It compresses the model parameters to fit memory constraints",
                        "It converts discrete tokens to continuous embeddings",
                        "It normalizes the gradients during backpropagation"
                    ],
                    "correct": 0,
                    "explanation": "The query-key-value computation in attention mechanisms determines how much focus to place on different parts of the input sequence by computing attention scores as the dot product of queries and keys."
                },
                {
                    "question": "What is the main advantage of using a ROC curve for binary classification evaluation?",
                    "options": [
                        "It's threshold-independent",
                        "It shows performance at perfect precision",
                        "It works better than PR curves for balanced datasets",
                        "It directly optimizes for model accuracy"
                    ],
                    "correct": 0,
                    "explanation": "The ROC curve plots true positive rate vs false positive rate at various classification thresholds, providing a comprehensive view of model performance across all possible thresholds."
                },
                {
                    "question": "In Bayesian optimization, what is the role of the acquisition function?",
                    "options": [
                        "To model the objective function's probability distribution",
                        "To determine the next set of hyperparameters to evaluate",
                        "To regularize the complexity of the surrogate model",
                        "To handle categorical variables in the search space"
                    ],
                    "correct": 1,
                    "explanation": "The acquisition function balances exploration and exploitation to suggest the most promising hyperparameters to evaluate next, based on the surrogate model's predictions."
                },
                {
                    "question": "What differentiates a variational autoencoder (VAE) from a standard autoencoder?",
                    "options": [
                        "VAEs use convolutional layers exclusively",
                        "VAEs learn a latent probability distribution rather than discrete encodings",
                        "VAEs require labeled data for training",
                        "VAEs are restricted to binary classification tasks"
                    ],
                    "correct": 1,
                    "explanation": "VAEs learn the parameters of a probability distribution representing the data in latent space, enabling generative capabilities through sampling, unlike standard autoencoders which learn deterministic encodings."
                }
            ]
        };
    </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=ssmita25/ai-quiz-with-deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>