|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<title>Fact or Faction AI</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); |
|
height: 100vh; |
|
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; |
|
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: 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>Fact or Faction AI</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 typically involve highly complex models requiring significant compute power.", |
|
isFact: false, |
|
explanation: "Fiction! Small-scale AI usually employs simpler models and less compute, which is often more manageable and cost-effective." |
|
}, |
|
{ |
|
text: "Large-scale AI projects often deal with multiple diverse data sources, leading to integration challenges.", |
|
isFact: true, |
|
explanation: "Fact! More extensive AI implementations typically involve numerous data sources that need careful integration." |
|
}, |
|
{ |
|
text: "Small-scale AI projects frequently face scalability challenges with distributed and high-compute systems.", |
|
isFact: false, |
|
explanation: "Fiction! These challenges are usually associated with larger AI implementations that process massive datasets." |
|
}, |
|
{ |
|
text: "Frequent deployments and model versioning complexity are more common in large-scale AI implementations.", |
|
isFact: true, |
|
explanation: "Fact! Large-scale AI systems often need to handle frequent updates and complex version management." |
|
}, |
|
{ |
|
text: "Cost management for small-scale AI projects is usually predictable with relatively low costs.", |
|
isFact: true, |
|
explanation: "Fact! Smaller AI initiatives typically have limited scope and more predictable budgeting." |
|
}, |
|
{ |
|
text: "Monitoring drift, bias, and system failures is typically a simple task in large-scale AI projects.", |
|
isFact: false, |
|
explanation: "Fiction! Large-scale systems need robust monitoring due to complexity, making it anything but simple." |
|
}, |
|
{ |
|
text: "Large-scale AI projects usually involve small teams handling end-to-end processes.", |
|
isFact: false, |
|
explanation: "Fiction! Large-scale projects typically require multiple teams or departments to handle different aspects." |
|
}, |
|
{ |
|
text: "Data integration is typically straightforward and involves few systems in small-scale AI projects.", |
|
isFact: true, |
|
explanation: "Fact! Smaller projects usually involve fewer data pipelines, reducing integration complexity." |
|
}, |
|
{ |
|
text: "Risk exposure in large-scale AI projects includes significant risks such as data breaches, downtime, and poor scalability.", |
|
isFact: true, |
|
explanation: "Fact! Bigger systems pose greater operational and security challenges." |
|
}, |
|
{ |
|
text: "Large-scale AI projects manage small-to-moderate data sizes that are easily stored and processed.", |
|
isFact: false, |
|
explanation: "Fiction! By definition, large-scale AI typically involves massive datasets requiring high storage and compute." |
|
} |
|
]; |
|
|
|
let currentIndex = 0; |
|
let score = 0; |
|
let answered = false; |
|
|
|
|
|
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 startGame() { |
|
shuffleArray(statements); |
|
currentIndex = 0; |
|
score = 0; |
|
answered = false; |
|
loadStatement(); |
|
updateScore(); |
|
updateProgressBar(); |
|
document.getElementById("restart-btn").style.display = "none"; |
|
} |
|
|
|
function loadStatement() { |
|
if (currentIndex >= statements.length) { |
|
endGame(); |
|
return; |
|
} |
|
let current = statements[currentIndex]; |
|
document.getElementById("statement").textContent = current.text; |
|
document.getElementById("result").style.display = "none"; |
|
document.getElementById("explanation").style.display = "none"; |
|
document.getElementById("next-btn").style.display = "none"; |
|
answered = false; |
|
updateProgressBar(); |
|
} |
|
|
|
function guessFact() { |
|
if (!answered) { |
|
checkAnswer(true); |
|
} |
|
} |
|
|
|
function guessFiction() { |
|
if (!answered) { |
|
checkAnswer(false); |
|
} |
|
} |
|
|
|
function checkAnswer(userGuess) { |
|
answered = true; |
|
let correctAnswer = statements[currentIndex].isFact; |
|
|
|
if (userGuess === correctAnswer) { |
|
document.getElementById("result").textContent = "Correct!"; |
|
document.getElementById("result").className = "correct"; |
|
score++; |
|
} else { |
|
document.getElementById("result").textContent = "Incorrect!"; |
|
document.getElementById("result").className = "incorrect"; |
|
} |
|
document.getElementById("result").style.display = "block"; |
|
|
|
document.getElementById("explanation").textContent = statements[currentIndex].explanation; |
|
document.getElementById("explanation").style.display = "block"; |
|
|
|
document.getElementById("next-btn").style.display = "inline-block"; |
|
|
|
updateScore(); |
|
} |
|
|
|
function nextStatement() { |
|
currentIndex++; |
|
if (currentIndex < statements.length) { |
|
loadStatement(); |
|
} else { |
|
endGame(); |
|
} |
|
} |
|
|
|
function updateScore() { |
|
document.getElementById("score").textContent = `Score: ${score} / ${statements.length}`; |
|
} |
|
|
|
function updateProgressBar() { |
|
let progress = (currentIndex / statements.length) * 100; |
|
document.getElementById("progress-bar").style.width = progress + "%"; |
|
} |
|
|
|
function endGame() { |
|
|
|
let percentage = Math.round((score / statements.length) * 100); |
|
document.getElementById("statement").textContent = "Game Over! You scored " + score + " out of " + statements.length + " (" + percentage + "%)."; |
|
|
|
document.getElementById("result").style.display = "none"; |
|
document.getElementById("explanation").style.display = "none"; |
|
document.getElementById("next-btn").style.display = "none"; |
|
|
|
document.getElementById("restart-btn").style.display = "inline-block"; |
|
|
|
document.getElementById("progress-bar").style.width = "100%"; |
|
} |
|
|
|
function restartGame() { |
|
startGame(); |
|
} |
|
|
|
|
|
startGame(); |
|
</script> |
|
</body> |
|
</html> |
|
|
