Spaces:

eaglelandsonce
/

Python_Week_1

Running

App Files Files Community

eaglelandsonce commited on 6 days ago

Commit

c3ae09d

verified ·

1 Parent(s): 6f3693c

Update index.html

Browse files

Files changed (1) hide show

index.html +100 -178

index.html CHANGED Viewed

@@ -1,86 +1,34 @@
 <!DOCTYPE html>
 <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-color: #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-color: #000;
-      border: 4px solid #000;
-      width: 90%;
-    }
-    .category {
-      background-color: #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-color: #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 0.3s;
-    }
-    .card:hover { background-color: #005a9e; }
-    .card.disabled { background-color: #cccccc; 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-color: #0078D4; color: #fff;
-      font-weight: bold; transition: background-color 0.3s, color 0.3s;
-    }
-    .answer-btn:hover { background-color: #005a9e; color: #f0f0f0; }
-    .answer-btn.disabled { background-color: #cccccc; color: #666; cursor: not-allowed; }
-    .feedback { margin-top: 10px; font-size: 18px; font-weight: bold; }
   </style>
 </head>
 <body>
   <h1>Week 1 Python Questions</h1>
-  <p>
-    <strong>Learn More:</strong>
-    <a href="https://chatgpt.com/g/g-67d5c827fc7c81919c5397d969d78a90-python-buddy-and-joke-teller" target="_blank">
-      Python Buddy and Joke Teller
-    </a>
-  </p>
   <div id="game-board">
-    <!-- Category Headers -->
     <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>
-    <!-- Question Cards will be created dynamically below the headers -->
   </div>
   <div id="question-display"></div>
   <div id="score">Score: 0</div>
@@ -94,130 +42,116 @@
       "Functions"
     ];
     const questions = [
       // Variables & Data Structures
       [
         {
-          q: "Which of the following is true regarding variables in Python?",
           a: [
-            "Values assigned to variables can be modified",
-            "Variables can store data structures such as arrays and dictionaries",
-            "Variables can only store integer and floats",
-            "Variables can store integer, floats, strings and booleans"
           ],
-          correct: 3
         },
         {
-          q: "Which of the following data structures in Python are mutable (can be modified after creation)?",
-          a: ["Only List", "Tuple and Dictionary", "List and Tuple", "List and Dictionary"],
-          correct: 3
         },
         {
-          q: "Which of the following will retrieve the two middle elements from the list?\n\nmy_list = [1, \"two\", 3.5, \"four\", 5, 6.0, \"seven\", 8.2]",
-          a: ["my_list[3:5]", "my_list[4:6]", "my_list[-5:-3]", "my_list[-4:-6]"],
           correct: 0
         }
       ],
       // Operators
       [
         {
-          q: "Which of the following combinations accurately matches mathematical symbols with their respective operations?",
-          a: [
-            "+ for addition, - for subtraction",
-            "* for exponentiation, / for modulus",
-            "% for multiplication, ** for division",
-            "** for multiplication, % for subtraction"
-          ],
           correct: 0
         },
         {
-          q: "What is the output of the expression 2 + 3 * 4 in Python?",
-          a: ["14", "20", "24", "18"],
           correct: 0
         },
         {
-          q: "Which operator is used for exponentiation in Python?",
-          a: ["^", "**", "pow", "exp"],
-          correct: 1
         }
       ],
       // Conditional Statements
       [
         {
-          q: "Which statement accurately describes the behavior of the 'elif' construct in Python?",
           a: [
-            "\"elif\" is used to define a block of code to be executed if the preceding \"if\" or \"elif\" condition(s) evaluate to False.",
-            "\"elif\" is mandatory and must be included after every \"if\" statement.",
-            "\"elif\" is used only when there are multiple conditions and no \"else\" block is present.",
-            "\"elif\" is equivalent to \"else if\" and can be used interchangeably with the \"else\" statement."
           ],
           correct: 0
         },
         {
-          q: "What keyword is used in Python to start an alternative block if none of the preceding conditions are true?",
-          a: ["else", "otherwise", "default", "finally"],
           correct: 0
         },
         {
-          q: "Consider the following code snippet:\n\nif x > 10:\n    console.log(\"Greater\")\nelif x == 10:\n    console.log(\"Equal\")\nelse:\n    console.log(\"Less\")\n\nWhich block is executed when x is 10?",
-          a: ["if block", "elif block", "else block", "None of the above"],
-          correct: 1
         }
       ],
       // Looping Statements
       [
         {
-          q: "Which of the following statements is true regarding loops in Python?",
           a: [
-            "The \"for\" loop requires a condition to be evaluated before execution.",
-            "The \"for\" loop iterates through a sequence, executing on each element.",
-            "The \"while\" loop iterates through a sequence, executing on each element.",
-            "The \"while\" loop does not require a condition to be evaluated."
           ],
-          correct: 1
         },
         {
-          q: "What is the output of the following code?\n\nfor i in range(1, 4):\n    document.write(i + ' ');",
-          a: ["1 2 3", "1 2 3 4", "0 1 2", "1 3"],
           correct: 0
         },
         {
-          q: "Which loop structure is best suited for iterating over elements in a list when the number of iterations is known?",
-          a: ["while loop", "for loop", "do-while loop", "if-else loop"],
-          correct: 1
         }
       ],
       // Functions
       [
         {
-          q: "What is the primary purpose of functions in Python?",
           a: [
-            "To execute a specific task only once in a program.",
-            "To break code into modular chunks for reusability and organization.",
-            "To combine multiple variables into a single variable.",
-            "To declare built-in variables that are predefined."
           ],
-          correct: 1
         },
         {
-          q: "How do you define a user-defined function in Python?",
-          a: [
-            "function functionName(parameters):",
-            "def functionName(parameters):",
-            "func functionName(parameters):",
-            "define functionName(parameters):"
-          ],
-          correct: 1
         },
         {
-          q: "Which of the following statements about the return statement in Python is false?",
           a: [
-            "A function can have multiple return statements.",
-            "A function can return multiple values in a single return statement.",
-            "The return statement returns a value computed by the function.",
-            "A function must always include a return statement."
           ],
-          correct: 3
         }
       ]
     ];
@@ -229,11 +163,9 @@
     const questionDisplay = document.getElementById("question-display");
     const scoreDisplay = document.getElementById("score");
-    // Precompute an even distribution of correct positions (0,1,2) over 15 cards.
     const correctPositions = (() => {
-      const arr = [];
-      for (let i = 0; i < totalCards; i++) arr.push(i % 3); // five 0s, five 1s, five 2s
-      // Shuffle
       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]];
@@ -241,12 +173,11 @@
       return arr;
     })();
-    // Persist per-question generated choices and correct index.
-    const questionMeta = new Map(); // key: "c-d" -> { choices: string[3], correctIndex: 0|1|2 }
-    function getQuestionIndex(category, difficulty) {
-      // Stable mapping 0..14: group by category columns, each with 3 rows
-      return category * 3 + difficulty;
     }
     function createBoard() {
@@ -254,48 +185,42 @@
         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 prepareThreeChoices(category, difficulty) {
       const key = `${category}-${difficulty}`;
       if (questionMeta.has(key)) return questionMeta.get(key);
       const q = questions[category][difficulty];
-      const all = q.a;
-      const correctIdxInAll = q.correct;
-      const correctText = all[correctIdxInAll];
-      // Collect indices of wrong answers
-      const wrongIdxs = all.map((_, i) => i).filter(i => i !== correctIdxInAll);
-      // Pick 2 wrong answers at random
-      for (let i = wrongIdxs.length - 1; i > 0; i--) {
         const j = Math.floor(Math.random() * (i + 1));
-        [wrongIdxs[i], wrongIdxs[j]] = [wrongIdxs[j], wrongIdxs[i]];
       }
-      const chosenWrongs = wrongIdxs.slice(0, 2).map(i => all[i]);
-      // Place correct answer at preassigned position for this question
-      const pos = correctPositions[getQuestionIndex(category, difficulty)];
-      const slots = [null, null, null];
-      slots[pos] = correctText;
-      // Fill remaining slots with the two wrong answers (random order)
-      const shuffledWrongs = [...chosenWrongs];
-      if (Math.random() < 0.5) shuffledWrongs.reverse();
-      let wi = 0;
-      for (let s = 0; s < 3; s++) {
-        if (slots[s] === null) {
-          slots[s] = shuffledWrongs[wi++];
-        }
       }
-      const meta = { choices: slots, correctIndex: pos };
       questionMeta.set(key, meta);
       return meta;
     }
@@ -304,17 +229,17 @@
       if (cardElement.classList.contains("disabled")) return;
       const q = questions[category][difficulty];
-      const { choices, correctIndex } = prepareThreeChoices(category, difficulty);
       const answerHtml = choices
-        .map((answer, index) =>
-          `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`
         )
         .join("");
       questionDisplay.innerHTML = `
         <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>
-        <p>${q.q}</p>
         <div class="answer-container">${answerHtml}</div>`;
       cardElement.classList.add("disabled");
@@ -325,22 +250,21 @@
     function checkAnswer(category, difficulty, selectedIndex) {
       const key = `${category}-${difficulty}`;
       const meta = questionMeta.get(key);
-      const q = questions[category][difficulty];
-      const correctText = meta.choices[meta.correctIndex];
       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;
-        questionDisplay.innerHTML += `<p class="feedback" style="color: red;">Wrong! You lost $${value}. The correct answer was: ${correctText}</p>`;
       }
       scoreDisplay.textContent = "Score: " + score;
@@ -351,9 +275,7 @@
       questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;
     }
-    // Expose functions needed by inline onclick handlers
     window.checkAnswer = checkAnswer;
     createBoard();
   </script>
 </body>

 <!DOCTYPE html>
 <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>
       "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
         }
       ]
     ];
     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 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;
     }
       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");
     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;
       questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;
     }
     window.checkAnswer = checkAnswer;
     createBoard();
   </script>
 </body>