| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>GenAI 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> |
| * { 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 = [ |
| |
| { |
| 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." |
| }, |
| |
| |
| { |
| 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> |
