| | <!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> |
