Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Week 1 Python Questions</title> | |
| <style> | |
| body{font-family:Arial,sans-serif;display:flex;flex-direction:column;align-items:center;background:#f0f0f0;margin:0} | |
| h1{color:#0078D4} | |
| #game-board{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:100px;gap:2px;margin:20px 0;background:#000;border:4px solid #000;width:90%} | |
| .category{background:#005a9e;color:#fff;font-weight:bold;display:flex;justify-content:center;align-items:center;text-align:center;font-size:18px;border:1px solid #000} | |
| .card{background:#0078D4;color:#fff;display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:bold;cursor:pointer;border:1px solid #000;text-align:center;transition:background-color .3s} | |
| .card:hover{background:#005a9e} | |
| .card.disabled{background:#ccc;cursor:default} | |
| #question-display{width:80%;text-align:center;margin-bottom:20px} | |
| #score{font-size:24px;font-weight:bold;color:#0078D4} | |
| .answer-container{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px} | |
| .answer-btn{margin:5px;padding:10px 15px;font-size:18px;cursor:pointer;text-align:center;border:2px solid #005a9e;border-radius:5px;background:#0078D4;color:#fff;font-weight:bold;transition:background-color .3s,color .3s} | |
| .answer-btn:hover{background:#005a9e;color:#f0f0f0} | |
| .answer-btn.disabled{background:#ccc;color:#666;cursor:not-allowed} | |
| .feedback{margin-top:10px;font-size:18px;font-weight:bold} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Week 1 Python Questions</h1> | |
| <div id="game-board"> | |
| <div class="category">Variables & Data Structures</div> | |
| <div class="category">Operators</div> | |
| <div class="category">Conditional Statements</div> | |
| <div class="category">Looping Statements</div> | |
| <div class="category">Functions</div> | |
| </div> | |
| <div id="question-display"></div> | |
| <div id="score">Score: 0</div> | |
| <script> | |
| const categories = [ | |
| "Variables & Data Structures", | |
| "Operators", | |
| "Conditional Statements", | |
| "Looping Statements", | |
| "Functions" | |
| ]; | |
| // ✅ Cleaned questions: Python-correct code, unique correct answers, 3 options each | |
| const questions = [ | |
| // Variables & Data Structures | |
| [ | |
| { | |
| q: "Which statement best describes Python variables?", | |
| a: [ | |
| "They are names bound to objects; names can be rebound", | |
| "They must be declared with a type keyword before use", | |
| "They can only reference numbers and strings" | |
| ], | |
| correct: 0 | |
| }, | |
| { | |
| q: "Which Python data structures are mutable?", | |
| a: ["List and Dictionary", "Tuple and String", "Set and Tuple"], | |
| correct: 0 | |
| }, | |
| { | |
| q: "Which slice returns ['four', 5] from my_list = [1, 'two', 3.5, 'four', 5, 6.0, 'seven', 8.2]?", | |
| a: ["my_list[3:5]", "my_list[2:4]", "my_list[-4:-2]"], | |
| correct: 0 | |
| } | |
| ], | |
| // Operators | |
| [ | |
| { | |
| q: "Which pairing correctly matches Python operators with operations?", | |
| a: ["+ for addition, - for subtraction", "** for modulus, % for exponentiation", "% for division, / for multiplication"], | |
| correct: 0 | |
| }, | |
| { | |
| q: "What is the result of 2 + 3 * 4 in Python?", | |
| a: ["14", "20", "24"], | |
| correct: 0 | |
| }, | |
| { | |
| q: "Which operator performs exponentiation in Python?", | |
| a: ["**", "^", "exp()"], | |
| correct: 0 | |
| } | |
| ], | |
| // Conditional Statements | |
| [ | |
| { | |
| q: "What does 'elif' do in Python?", | |
| a: [ | |
| "Tests another condition if previous tests were False", | |
| "Runs when the preceding 'if' was True", | |
| "Is mandatory after every 'if'" | |
| ], | |
| correct: 0 | |
| }, | |
| { | |
| q: "Which keyword begins the fallback block when no prior condition was True?", | |
| a: ["else", "otherwise", "default"], | |
| correct: 0 | |
| }, | |
| { | |
| q: "Given: if x > 10: print('Greater')\nelif x == 10: print('Equal')\nelse: print('Less')\nWhat prints when x == 10?", | |
| a: ["Equal", "Greater", "Less"], | |
| correct: 0 | |
| } | |
| ], | |
| // Looping Statements | |
| [ | |
| { | |
| q: "Which is true of Python's 'for' loop?", | |
| a: [ | |
| "It iterates over items of an iterable", | |
| "It repeats while a condition is True", | |
| "It requires a manual counter only" | |
| ], | |
| correct: 0 | |
| }, | |
| { | |
| q: "What does this print?\nfor i in range(1, 4):\n print(i, end=' ')", | |
| a: ["1 2 3 ", "0 1 2 ", "1 2 3 4 "], | |
| correct: 0 | |
| }, | |
| { | |
| q: "Best loop for iterating a list when the number of passes is known?", | |
| a: ["for loop", "while loop", "do-while loop"], | |
| correct: 0 | |
| } | |
| ], | |
| // Functions | |
| [ | |
| { | |
| q: "Primary purpose of functions in Python?", | |
| a: [ | |
| "Encapsulate reusable logic into named blocks", | |
| "Declare compile-time constants", | |
| "Only execute once per program" | |
| ], | |
| correct: 0 | |
| }, | |
| { | |
| q: "How do you define a function?", | |
| a: ["def my_func(params):", "function my_func(params):", "define my_func(params):"], | |
| correct: 0 | |
| }, | |
| { | |
| q: "Which statement about 'return' is false?", | |
| a: [ | |
| "Every function must include a 'return' statement", | |
| "A function can return multiple values", | |
| "A function may have multiple 'return' paths" | |
| ], | |
| correct: 0 | |
| } | |
| ] | |
| ]; | |
| let score = 0; | |
| const totalCards = 15; | |
| let answeredCards = 0; | |
| const gameBoard = document.getElementById("game-board"); | |
| const questionDisplay = document.getElementById("question-display"); | |
| const scoreDisplay = document.getElementById("score"); | |
| // Even distribution of correct positions (0..2) across 15 questions | |
| const correctPositions = (() => { | |
| const arr = Array.from({ length: totalCards }, (_, i) => i % 3); // five of each | |
| for (let i = arr.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [arr[i], arr[j]] = [arr[j], arr[i]]; | |
| } | |
| return arr; | |
| })(); | |
| // Memo for per-question permuted choices | |
| const questionMeta = new Map(); // "c-d" -> { choices:[...3], correctIndex } | |
| function qIndex(category, difficulty) { | |
| return category * 3 + difficulty; // 0..14 | |
| } | |
| function createBoard() { | |
| for (let row = 0; row < 3; row++) { | |
| for (let col = 0; col < 5; col++) { | |
| const card = document.createElement("div"); | |
| card.className = "card"; | |
| card.textContent = "$" + (row + 1) * 100; | |
| card.onclick = () => showQuestion(col, row, card); | |
| gameBoard.appendChild(card); | |
| } | |
| } | |
| } | |
| function prepareChoices(category, difficulty) { | |
| const key = `${category}-${difficulty}`; | |
| if (questionMeta.has(key)) return questionMeta.get(key); | |
| const q = questions[category][difficulty]; | |
| const baseChoices = q.a.slice(); // already length 3 | |
| const origCorrect = q.correct; // index in baseChoices | |
| // Start with a random permutation | |
| const idxs = [0, 1, 2]; | |
| for (let i = idxs.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [idxs[i], idxs[j]] = [idxs[j], idxs[i]]; | |
| } | |
| // Ensure the correct answer ends up at the prescribed position | |
| const targetPos = correctPositions[qIndex(category, difficulty)]; | |
| const currentPosOfCorrect = idxs.indexOf(origCorrect); | |
| if (currentPosOfCorrect !== targetPos) { | |
| // swap positions | |
| const swapIdx = idxs[targetPos]; | |
| idxs[targetPos] = origCorrect; | |
| idxs[currentPosOfCorrect] = swapIdx; | |
| } | |
| const choices = idxs.map(i => baseChoices[i]); | |
| const correctIndex = targetPos; | |
| const meta = { choices, correctIndex }; | |
| questionMeta.set(key, meta); | |
| return meta; | |
| } | |
| function showQuestion(category, difficulty, cardElement) { | |
| if (cardElement.classList.contains("disabled")) return; | |
| const q = questions[category][difficulty]; | |
| const { choices } = prepareChoices(category, difficulty); | |
| const answerHtml = choices | |
| .map((answer, idx) => | |
| `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${idx})">${answer}</button>` | |
| ) | |
| .join(""); | |
| questionDisplay.innerHTML = ` | |
| <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2> | |
| <pre style="white-space:pre-wrap;text-align:left;background:#fff;border:1px solid #ddd;padding:10px;border-radius:6px">${q.q}</pre> | |
| <div class="answer-container">${answerHtml}</div>`; | |
| cardElement.classList.add("disabled"); | |
| cardElement.style.backgroundColor = "#cccccc"; | |
| answeredCards++; | |
| } | |
| function checkAnswer(category, difficulty, selectedIndex) { | |
| const key = `${category}-${difficulty}`; | |
| const meta = questionMeta.get(key); | |
| const isCorrect = selectedIndex === meta.correctIndex; | |
| const value = (difficulty + 1) * 100; | |
| document.querySelectorAll(".answer-btn").forEach(btn => { | |
| btn.disabled = true; | |
| btn.classList.add("disabled"); | |
| }); | |
| if (isCorrect) { | |
| score += value; | |
| questionDisplay.innerHTML += `<p class="feedback" style="color:green">Correct! You earned $${value}.</p>`; | |
| } else { | |
| score -= value; | |
| const correctText = meta.choices[meta.correctIndex]; | |
| questionDisplay.innerHTML += `<p class="feedback" style="color:red">Wrong! You lost $${value}. Correct answer: ${correctText}</p>`; | |
| } | |
| scoreDisplay.textContent = "Score: " + score; | |
| if (answeredCards === totalCards) endGame(); | |
| } | |
| function endGame() { | |
| questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`; | |
| } | |
| window.checkAnswer = checkAnswer; | |
| createBoard(); | |
| </script> | |
| </body> | |
| </html> | |