|
<!DOCTYPE html> |
|
<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> |
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
background: linear-gradient(120deg, #ade0f4, #f2cfff); |
|
height: 100vh; |
|
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; |
|
padding: 0.75rem 1.5rem; |
|
font-size: 1rem; |
|
cursor: pointer; |
|
border: none; |
|
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> |
|
</html> |
|
|
