Spaces:

eaglelandsonce
/

AI_Big_Small_Fact_or_Fiction

Running

App Files Files Community

eaglelandsonce commited on 2 days ago

Commit

e5360fa

verified ·

1 Parent(s): 2342027

Update index.html

Browse files

Files changed (1) hide show

index.html +115 -45

index.html CHANGED Viewed

@@ -6,6 +6,7 @@
   <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>
     body {
       font-family: 'Poppins', sans-serif;
       background: linear-gradient(120deg, #ade0f4, #f2cfff);
@@ -13,17 +14,35 @@
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
-      padding: 20px;
     }
     #game-container {
       background: #ffffffcc;
       width: 90%;
       max-width: 600px;
       padding: 2rem;
       border-radius: 12px;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
       text-align: center;
     }
     button {
       margin: 0.5rem;
@@ -34,71 +53,122 @@
       border-radius: 8px;
       background-color: #3498db;
       color: #fff;
     }
   </style>
 </head>
 <body>
   <div id="game-container">
-    <h1>AI Big or Small Fact or Fiction</h1>
-    <div id="statement">Loading...</div>
-    <button onclick="checkAnswer(true)">Fact</button>
-    <button onclick="checkAnswer(false)">Fiction</button>
     <div id="result"></div>
-    <button id="next" onclick="nextStatement()" style="display:none;">Next</button>
     <div id="score"></div>
   </div>
   <script>
-    const 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."},
-      {text: "Small-scale AI projects typically use advanced automated version control.", isFact: false, explanation: "Fiction! Small projects often have basic manual version control with infrequent deployments."},
-      {text: "Large-scale AI projects often require complex monitoring for drift and bias.", isFact: true, explanation: "Fact! Large-scale deployments require robust monitoring systems to detect and handle issues like drift and bias."},
-      {text: "Small AI teams typically handle end-to-end processes.", isFact: true, explanation: "Fact! Smaller teams usually manage the entire AI lifecycle themselves."},
-      {text: "Cost management in large-scale AI projects is usually simple and predictable.", isFact: false, explanation: "Fiction! Cost management in large-scale AI involves many stakeholders and is more complex."},
-      {text: "Risk exposure is higher in large-scale AI projects due to factors like downtime and data breaches.", isFact: true, explanation: "Fact! Larger AI projects face significant risks such as data breaches and scalability issues."}
     ];
-    let currentStatement = 0;
     let score = 0;
-    function shuffleArray(array) {
-      return array.sort(() => Math.random() - 0.5);
-    }
     function loadStatement() {
-      document.getElementById("result").innerText = '';
-      document.getElementById("next").style.display = 'none';
-      document.getElementById("statement").innerText = statements[currentStatement].text;
-      document.getElementById("score").innerText = `Score: ${score}/${statements.length}`;
     }
-    function checkAnswer(guess) {
-      const correct = statements[currentStatement].isFact;
-      if (guess === correct) {
-        document.getElementById("result").innerText = "Correct! " + statements[currentStatement].explanation;
-        score++;
-      } else {
-        document.getElementById("result").innerText = "Incorrect! " + statements[currentStatement].explanation;
-      }
-      document.getElementById("next").style.display = 'inline-block';
-    }
-    function nextStatement() {
-      currentStatement++;
-      if (currentStatement < statements.length) {
-        loadStatement();
-      } else {
-        document.getElementById("statement").innerText = `Game Over! Your final score: ${score}/${statements.length}`;
-        document.getElementById("next").style.display = 'none';
-        document.getElementById("result").innerText = "";
-      }
     }
-    statements.sort(() => Math.random() - 0.5);
     loadStatement();
   </script>
 </body>

   <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>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
     body {
       font-family: 'Poppins', sans-serif;
       background: linear-gradient(120deg, #ade0f4, #f2cfff);
       display: flex;
       flex-direction: column;
       align-items: center;
+      justify-content: flex-start;
+    }
+    h1 {
+      text-align: center;
+      margin-top: 2rem;
+      color: #333;
+      font-weight: 600;
     }
     #game-container {
       background: #ffffffcc;
       width: 90%;
       max-width: 600px;
+      margin: 2rem auto;
       padding: 2rem;
       border-radius: 12px;
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    #statement {
+      font-size: 1.3rem;
+      margin-bottom: 1rem;
+      min-height: 70px;
       text-align: center;
+      color: #444;
+    }
+    .btn-group {
+      margin: 1rem 0;
     }
     button {
       margin: 0.5rem;
       border-radius: 8px;
       background-color: #3498db;
       color: #fff;
+      transition: background-color 0.3s ease, transform 0.2s ease;
+    }
+    button:hover {
+      background-color: #2980b9;
+      transform: translateY(-2px);
+    }
+    #result {
+      margin-top: 1rem;
+      padding: 1rem;
+      border-radius: 4px;
+      font-weight: 600;
+      text-align: center;
+      width: 100%;
+      display: none;
+    }
+    #result.correct {
+      background-color: #d4edda;
+      color: #155724;
+      display: block;
+    }
+    #result.incorrect {
+      background-color: #f8d7da;
+      color: #721c24;
+      display: block;
+    }
+    #explanation {
+      margin-top: 0.5rem;
+      padding: 1rem;
+      background-color: #f9f9f9;
+      color: #555;
+      display: none;
+      border-radius: 4px;
+    }
+    .progress-container {
+      width: 100%;
+      background-color: #eeeeee;
+      border-radius: 50px;
+      overflow: hidden;
+      margin: 1rem 0;
+    }
+    .progress-bar {
+      height: 16px;
+      background-color: #3498db;
+      width: 0%;
+      transition: width 0.3s ease;
+    }
+    #score {
+      margin-top: 1rem;
+      font-weight: 600;
+      color: #333;
     }
   </style>
 </head>
 <body>
+  <h1>AI Big or Small Fact or Fiction</h1>
   <div id="game-container">
+    <div class="progress-container">
+      <div class="progress-bar" id="progress-bar"></div>
+    </div>
+    <div id="statement">Loading statement...</div>
+    <div class="btn-group">
+      <button onclick="guessFact()">Fact</button>
+      <button onclick="guessFiction()">Fiction</button>
+    </div>
     <div id="result"></div>
+    <div id="explanation"></div>
+    <button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button>
+    <button id="restart-btn" style="display:none;" onclick="restartGame()">Restart</button>
     <div id="score"></div>
   </div>
   <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>