File size: 4,969 Bytes
2342027 3633c66 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!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>
|