Spaces:
Running
Running
| <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 © 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> |