Spaces:

eaglelandsonce
/

AI_Big_Small_Fact_or_Fiction

Running

App Files Files Community

eaglelandsonce commited on 2 days ago

Commit

4362f8a

verified ·

1 Parent(s): e5360fa

Update index.html

Browse files

Files changed (1) hide show

index.html +146 -22

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>AI Big or Small Fact or Fiction</title>
   <link rel="preconnect" href="https://fonts.gstatic.com" />
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
   <style>
@@ -107,7 +107,7 @@
   </style>
 </head>
 <body>
-  <h1>AI Big or Small Fact or Fiction</h1>
   <div id="game-container">
     <div class="progress-container">
@@ -132,44 +132,168 @@
   <script>
     let statements = [
-      {text: "Small-scale AI projects usually deal with minimal inconsistency in data sources.", isFact: true, explanation: "Fact! Small projects typically handle fewer data sources, reducing complexity."},
-      {text: "Large-scale AI projects have manageable storage needs.", isFact: false, explanation: "Fiction! Large-scale projects face significant storage, processing, and latency challenges."},
-      {text: "Integration issues are minimal in large-scale AI projects.", isFact: false, explanation: "Fiction! Integration can be very complex due to frequent schema mismatches and synchronization issues."},
-      {text: "Model complexity in small-scale AI projects is usually limited.", isFact: true, explanation: "Fact! Small projects generally involve simpler models with fewer requirements."},
-      {text: "Infrastructure scalability is usually not an issue in large-scale AI projects.", isFact: false, explanation: "Fiction! Scalability is a significant challenge in large-scale AI."}
     ];
     let currentIndex = 0;
     let score = 0;
-    function shuffleArray(array) { return array.sort(() => Math.random() - 0.5); }
     function loadStatement() {
-      document.getElementById("statement").innerText = statements[currentIndex].text;
       document.getElementById("result").style.display = "none";
       document.getElementById("explanation").style.display = "none";
       document.getElementById("next-btn").style.display = "none";
       updateProgressBar();
-      updateScore();
     }
     function checkAnswer(userGuess) {
-      const correct = statements[currentIndex].isFact;
-      document.getElementById("result").innerText = userGuess === correct ? "Correct!" : "Incorrect!";
-      document.getElementById("result").className = userGuess === correct ? "correct" : "incorrect";
       document.getElementById("result").style.display = "block";
-      document.getElementById("explanation").innerText = statements[currentIndex].explanation;
       document.getElementById("explanation").style.display = "block";
-      if (userGuess === correct) score++;
       document.getElementById("next-btn").style.display = "inline-block";
       updateScore();
     }
-    function nextStatement() { currentIndex++; currentIndex < statements.length ? loadStatement() : endGame(); }
-    function updateScore() { document.getElementById("score").innerText = `Score: ${score}/${statements.length}`; }
-    function updateProgressBar() { document.getElementById("progress-bar").style.width = `${(currentIndex/statements.length)*100}%`; }
-    function endGame() { document.getElementById("statement").innerText = `Game Over! Final Score: ${score}/${statements.length}`; }
-    function restartGame() { currentIndex = 0; score = 0; shuffleArray(statements); loadStatement(); }
-    shuffleArray(statements);
-    loadStatement();
   </script>
 </body>
 </html>

 <html lang="en">
 <head>
   <meta charset="UTF-8" />
+  <title>Fact or Faction AI</title>
   <link rel="preconnect" href="https://fonts.gstatic.com" />
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet">
   <style>
   </style>
 </head>
 <body>
+  <h1>Fact or Faction AI</h1>
   <div id="game-container">
     <div class="progress-container">
   <script>
     let statements = [
+      {
+        text: "Small-scale AI projects typically involve highly complex models requiring significant compute power.",
+        isFact: false,
+        explanation: "Fiction! Small-scale AI usually employs simpler models and less compute, which is often more manageable and cost-effective."
+      },
+      {
+        text: "Large-scale AI projects often deal with multiple diverse data sources, leading to integration challenges.",
+        isFact: true,
+        explanation: "Fact! More extensive AI implementations typically involve numerous data sources that need careful integration."
+      },
+      {
+        text: "Small-scale AI projects frequently face scalability challenges with distributed and high-compute systems.",
+        isFact: false,
+        explanation: "Fiction! These challenges are usually associated with larger AI implementations that process massive datasets."
+      },
+      {
+        text: "Frequent deployments and model versioning complexity are more common in large-scale AI implementations.",
+        isFact: true,
+        explanation: "Fact! Large-scale AI systems often need to handle frequent updates and complex version management."
+      },
+      {
+        text: "Cost management for small-scale AI projects is usually predictable with relatively low costs.",
+        isFact: true,
+        explanation: "Fact! Smaller AI initiatives typically have limited scope and more predictable budgeting."
+      },
+      {
+        text: "Monitoring drift, bias, and system failures is typically a simple task in large-scale AI projects.",
+        isFact: false,
+        explanation: "Fiction! Large-scale systems need robust monitoring due to complexity, making it anything but simple."
+      },
+      {
+        text: "Large-scale AI projects usually involve small teams handling end-to-end processes.",
+        isFact: false,
+        explanation: "Fiction! Large-scale projects typically require multiple teams or departments to handle different aspects."
+      },
+      {
+        text: "Data integration is typically straightforward and involves few systems in small-scale AI projects.",
+        isFact: true,
+        explanation: "Fact! Smaller projects usually involve fewer data pipelines, reducing integration complexity."
+      },
+      {
+        text: "Risk exposure in large-scale AI projects includes significant risks such as data breaches, downtime, and poor scalability.",
+        isFact: true,
+        explanation: "Fact! Bigger systems pose greater operational and security challenges."
+      },
+      {
+        text: "Large-scale AI projects manage small-to-moderate data sizes that are easily stored and processed.",
+        isFact: false,
+        explanation: "Fiction! By definition, large-scale AI typically involves massive datasets requiring high storage and compute."
+      }
     ];
     let currentIndex = 0;
     let score = 0;
+    let answered = false;
+    // Shuffle the statements to randomize their order
+    function shuffleArray(arr) {
+      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;
+    }
+    function startGame() {
+      shuffleArray(statements);
+      currentIndex = 0;
+      score = 0;
+      answered = false;
+      loadStatement();
+      updateScore();
+      updateProgressBar();
+      document.getElementById("restart-btn").style.display = "none";
+    }
     function loadStatement() {
+      if (currentIndex >= statements.length) {
+        endGame();
+        return;
+      }
+      let current = statements[currentIndex];
+      document.getElementById("statement").textContent = current.text;
       document.getElementById("result").style.display = "none";
       document.getElementById("explanation").style.display = "none";
       document.getElementById("next-btn").style.display = "none";
+      answered = false;
       updateProgressBar();
     }
+    function guessFact() {
+      if (!answered) {
+        checkAnswer(true);
+      }
+    }
+    function guessFiction() {
+      if (!answered) {
+        checkAnswer(false);
+      }
+    }
     function checkAnswer(userGuess) {
+      answered = true;
+      let correctAnswer = statements[currentIndex].isFact;
+      // Show result
+      if (userGuess === correctAnswer) {
+        document.getElementById("result").textContent = "Correct!";
+        document.getElementById("result").className = "correct";
+        score++;
+      } else {
+        document.getElementById("result").textContent = "Incorrect!";
+        document.getElementById("result").className = "incorrect";
+      }
       document.getElementById("result").style.display = "block";
+      // Show explanation
+      document.getElementById("explanation").textContent = statements[currentIndex].explanation;
       document.getElementById("explanation").style.display = "block";
+      // Show Next button
       document.getElementById("next-btn").style.display = "inline-block";
+      // Update the score display
       updateScore();
     }
+    function nextStatement() {
+      currentIndex++;
+      if (currentIndex < statements.length) {
+        loadStatement();
+      } else {
+        endGame();
+      }
+    }
+    function updateScore() {
+      document.getElementById("score").textContent = `Score: ${score} / ${statements.length}`;
+    }
+    function updateProgressBar() {
+      let progress = (currentIndex / statements.length) * 100;
+      document.getElementById("progress-bar").style.width = progress + "%";
+    }
+    function endGame() {
+      // Display a final message with score and percentage
+      let percentage = Math.round((score / statements.length) * 100);
+      document.getElementById("statement").textContent = "Game Over! You scored " + score + " out of " + statements.length + " (" + percentage + "%).";
+      // Hide these elements
+      document.getElementById("result").style.display = "none";
+      document.getElementById("explanation").style.display = "none";
+      document.getElementById("next-btn").style.display = "none";
+      // Show the restart button
+      document.getElementById("restart-btn").style.display = "inline-block";
+      // Fill the progress bar to 100%
+      document.getElementById("progress-bar").style.width = "100%";
+    }
+    function restartGame() {
+      startGame();
+    }
+    // Start the game on load
+    startGame();
   </script>
 </body>
 </html>