Spaces:

eaglelandsonce
/

GenAI_MCP_FactOrFiction

Running

File size: 12,542 Bytes

f03763f

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>GenAI Fact or Fiction</title>

  <!-- Google Fonts -->
  <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);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-bottom: 2rem;
    }

    h1 {
      text-align: center;
      margin-top: 2rem;
      color: #333;
      font-weight: 600;
      letter-spacing: 1px;
    }

    .article-link {
      margin-top: 0.75rem;
      font-size: 0.95rem;
      color: #333;
      text-align: center;
    }

    .article-link a {
      color: #1b66c9;
      text-decoration: none;
      font-weight: 600;
    }

    .article-link a:hover {
      text-decoration: underline;
    }

    #game-container {
      background: #ffffffcc;
      width: 90%;
      max-width: 650px;
      margin: 1.5rem auto;
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #game-container:hover {
      transform: scale(1.01);
    }

    #statement {
      font-size: 1.25rem;
      margin-bottom: 1rem;
      min-height: 100px;
      text-align: center;
      color: #444;
      line-height: 1.5;
    }

    .btn-group {
      margin: 1rem 0;
    }

    button {
      margin: 0.5rem;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      cursor: pointer;
      border: none;
      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: 6px;
      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;
      border-radius: 6px;
      background-color: #f9f9f9;
      color: #555;
      display: none;
      width: 100%;
      line-height: 1.5;
    }

    #next-btn {
      background-color: #2ecc71;
    }

    #next-btn:hover {
      background-color: #27ae60;
    }

    #restart-btn {
      background-color: #ff7675;
      margin-top: 0.5rem;
    }

    #restart-btn:hover {
      background-color: #d63031;
    }

    .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;
    }

    .note {
      margin-top: 0.75rem;
      font-size: 0.85rem;
      color: #555;
      text-align: center;
      opacity: 0.9;
    }
  </style>
</head>

<body>
  <h1>GenAI Fact or Fiction</h1>

  <div class="article-link">
    Read the article:
    <a href="https://www.linkedin.com/pulse/genai-mcp-michael-lively-jhguc/" target="_blank" rel="noopener noreferrer">
      GenAI + MCP (LinkedIn)
    </a>
  </div>

  <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 class="note">10 questions • 5 Facts + 5 Fictions • Even (alternating) random spread each play</div>
  </div>

  <script>
    const masterStatements = [
      // ===== FACTS (5) =====
      {
        text: "The 'Agent Delusion' is the mistake of thinking a successful AI agent is mostly about picking the best LLM or prompt, while ignoring the problem environment.",
        isFact: true,
        explanation: "Fact! The article says the 'Agent Delusion' happens when teams focus too narrowly on the model or prompt and ignore the world the agent must navigate."
      },
      {
        text: "In the PEAS framework, a good performance measure should evaluate the external state of the environment, not just count the agent’s internal actions.",
        isFact: true,
        explanation: "Fact! The article stresses that performance should be measured by real-world outcomes, not internal activity like miles driven or gears shifted."
      },
      {
        text: "Partially observable environments often require agents to maintain memory or an internal world model, because they cannot see everything at once.",
        isFact: true,
        explanation: "Fact! The article contrasts fully observable environments like chess with partially observable ones like driving, where memory and internal models are needed."
      },
      {
        text: "A utility-based agent can balance conflicting goals like speed, safety, and cost by quantifying trade-offs between outcomes.",
        isFact: true,
        explanation: "Fact! The article places utility-based agents at the top of the ladder because they can weigh competing preferences and find the most useful path."
      },
      {
        text: "MCP is described as the 'USB-C port' of AI applications because it creates a universal, interoperable way for AI systems to connect to tools and context.",
        isFact: true,
        explanation: "Fact! The article explicitly compares MCP to USB-C because it standardizes how AI applications connect to external tools and resources."
      },

      // ===== FICTIONS (5) =====
      {
        text: "The best way to define AI success is to track how many internal steps the agent performs, because more activity always means better results.",
        isFact: false,
        explanation: "Fiction! The article warns against measuring internal actions and says success must be based on the external state of the world."
      },
      {
        text: "A simple reflex agent is the ideal design for partially observable environments because it never needs memory or an internal model.",
        isFact: false,
        explanation: "Fiction! The article says simple reflex agents are vulnerable in partially observable environments and that model-based agents are needed to handle hidden state."
      },
      {
        text: "The article argues that users naturally treat AI agents as purely mechanical tools, so social design and transparency are not major concerns.",
        isFact: false,
        explanation: "Fiction! The article highlights the 'Social Being' paradox and says users often treat agents like social beings, making trust and transparency essential."
      },
      {
        text: "MCP keeps models tightly coupled to one vendor’s API, which makes toolsets harder to reuse across different clients and platforms.",
        isFact: false,
        explanation: "Fiction! The article says MCP does the opposite: it decouples models from implementations and supports portability across compliant environments."
      },
      {
        text: "According to the article, chatbots and AI agents are basically the same because both are rigid systems that cannot interact with live data or execute actions.",
        isFact: false,
        explanation: "Fiction! The article draws a sharp distinction: chatbots are rigid and limited, while AI agents are learning, autonomous, adaptive, and can act through tools."
      }
    ];

    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 buildBalancedDeck(items) {
      const facts = items.filter(x => x.isFact);
      const fictions = items.filter(x => !x.isFact);

      shuffleArray(facts);
      shuffleArray(fictions);

      const startWithFact = Math.random() < 0.5;
      const deck = [];

      for (let i = 0; i < Math.max(facts.length, fictions.length); i++) {
        if (startWithFact) {
          if (facts[i]) deck.push(facts[i]);
          if (fictions[i]) deck.push(fictions[i]);
        } else {
          if (fictions[i]) deck.push(fictions[i]);
          if (facts[i]) deck.push(facts[i]);
        }
      }

      return deck;
    }

    let statements = [];
    let currentIndex = 0;
    let score = 0;
    let answered = false;

    const statementDiv = document.getElementById("statement");
    const resultDiv = document.getElementById("result");
    const explanationDiv = document.getElementById("explanation");
    const nextBtn = document.getElementById("next-btn");
    const restartBtn = document.getElementById("restart-btn");
    const scoreDiv = document.getElementById("score");
    const progressBar = document.getElementById("progress-bar");

    startGame();

    function startGame() {
      statements = buildBalancedDeck(masterStatements);
      currentIndex = 0;
      score = 0;
      answered = false;
      restartBtn.style.display = "none";
      loadStatement();
    }

    function loadStatement() {
      if (currentIndex >= statements.length) {
        endGame();
        return;
      }

      const current = statements[currentIndex];
      statementDiv.textContent = current.text;

      resultDiv.textContent = "";
      resultDiv.className = "";
      resultDiv.style.display = "none";

      explanationDiv.textContent = "";
      explanationDiv.style.display = "none";

      nextBtn.style.display = "none";
      answered = false;

      const progressPercent = (currentIndex / statements.length) * 100;
      progressBar.style.width = progressPercent + "%";
      scoreDiv.textContent = `Score: ${score} / ${statements.length}`;
    }

    function guessFact() {
      if (!answered) checkAnswer(true);
    }

    function guessFiction() {
      if (!answered) checkAnswer(false);
    }

    function checkAnswer(userGuess) {
      answered = true;
      const correctAnswer = statements[currentIndex].isFact;

      if (userGuess === correctAnswer) {
        score++;
        resultDiv.textContent = "Correct!";
        resultDiv.className = "correct";
      } else {
        resultDiv.textContent = "Incorrect!";
        resultDiv.className = "incorrect";
      }

      resultDiv.style.display = "block";
      explanationDiv.textContent = statements[currentIndex].explanation;
      explanationDiv.style.display = "block";

      scoreDiv.textContent = `Score: ${score} / ${statements.length}`;
      const progressPercent = ((currentIndex + 1) / statements.length) * 100;
      progressBar.style.width = progressPercent + "%";

      if (currentIndex === statements.length - 1) {
        nextBtn.style.display = "none";
        endGame();
      } else {
        nextBtn.style.display = "inline-block";
      }
    }

    function nextStatement() {
      currentIndex++;
      loadStatement();
    }

    function endGame() {
      statementDiv.textContent = "Game Over!";
      resultDiv.textContent = `You scored ${score} out of ${statements.length}!`;
      resultDiv.className = "correct";
      resultDiv.style.display = "block";

      explanationDiv.innerHTML = `
        Want to review? Open the article here:
        <a href="https://www.linkedin.com/pulse/genai-mcp-michael-lively-jhguc/" target="_blank" rel="noopener noreferrer">
          GenAI + MCP (LinkedIn)
        </a>
      `;
      explanationDiv.style.display = "block";

      nextBtn.style.display = "none";
      restartBtn.style.display = "inline-block";
      progressBar.style.width = "100%";
    }

    function restartGame() {
      startGame();
    }
  </script>
</body>
</html>