|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"/> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Microservices Strategies Jeopardy</title> |
|
|
<style> |
|
|
:root{ |
|
|
--blue:#0a49a6; |
|
|
--blue-dark:#073a84; |
|
|
--gold:#ffd24a; |
|
|
--board-gap:10px; |
|
|
--card-depth:28px; |
|
|
} |
|
|
*{box-sizing:border-box} |
|
|
body{ |
|
|
font-family: system-ui, Arial, sans-serif; |
|
|
display:flex;flex-direction:column;align-items:center; |
|
|
background: radial-gradient(1200px 700px at 50% -200px, #f2f6ff 0%, #e9efff 30%, #cfdafc 100%) fixed; |
|
|
margin:0; min-height:100vh; |
|
|
} |
|
|
h1{ color:#173e8c; margin:22px 0 6px; text-shadow:0 2px 0 #fff;} |
|
|
a.source{ font-size:14px; color:#334; margin-bottom:8px; text-decoration:none} |
|
|
a.source:hover{ text-decoration:underline } |
|
|
.topbar { |
|
|
width:min(1100px,95vw); |
|
|
display:flex; |
|
|
justify-content:space-between; |
|
|
align-items:center; |
|
|
gap:10px; |
|
|
margin-bottom:8px; |
|
|
} |
|
|
.btn-reset{ |
|
|
padding:8px 12px; border-radius:10px; font-weight:800; cursor:pointer; |
|
|
border:2px solid #0d3a85; color:#fff; background:linear-gradient(180deg,#1362ff,#0d3a85); |
|
|
box-shadow:0 8px 18px rgba(0,0,0,.25); |
|
|
} |
|
|
.btn-reset:hover{ transform: translateY(-1px) } |
|
|
.btn-reset:active{ transform: translateY(0) } |
|
|
.stage{ perspective: 1200px; width:min(1100px, 95vw); } |
|
|
#game-board{ |
|
|
display:grid; |
|
|
grid-template-columns: repeat(5, 1fr); |
|
|
grid-auto-rows: 120px; |
|
|
gap: var(--board-gap); |
|
|
padding: var(--board-gap); |
|
|
border-radius:18px; |
|
|
background: linear-gradient(180deg, #0e1a3a, #01060f); |
|
|
box-shadow: |
|
|
0 20px 45px rgba(0,0,0,.35), |
|
|
inset 0 0 0 4px #000; |
|
|
transform: rotateX(8deg); |
|
|
transform-origin: top center; |
|
|
} |
|
|
.category, .card{ |
|
|
position:relative; |
|
|
border-radius:14px; |
|
|
user-select:none; |
|
|
transform-style: preserve-3d; |
|
|
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; |
|
|
box-shadow: |
|
|
0 var(--card-depth) calc(var(--card-depth) + 12px) rgba(0,0,0,.35), |
|
|
inset 0 0 0 1px rgba(255,255,255,.15); |
|
|
} |
|
|
.category{ |
|
|
background: linear-gradient(180deg, #004fbf 0%, #003d93 60%, #003684 100%); |
|
|
color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:.3px; |
|
|
display:flex; justify-content:center; align-items:center; text-align:center; |
|
|
border:1px solid #00122c; |
|
|
text-shadow:0 2px 0 rgba(0,0,0,.35); |
|
|
padding:8px; |
|
|
} |
|
|
.card{ |
|
|
cursor:pointer; font-weight:900; color: var(--gold); |
|
|
background: |
|
|
radial-gradient(80% 80% at 50% 25%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%), |
|
|
linear-gradient(180deg, var(--blue) 0%, var(--blue-dark) 100%); |
|
|
border:1px solid #031b3f; |
|
|
display:flex; justify-content:center; align-items:center; text-align:center; |
|
|
font-size: clamp(16px, 2.4vw, 26px); |
|
|
text-shadow: 0 2px 0 #000, 0 0 10px rgba(255,210,74,.35); |
|
|
padding:10px; |
|
|
} |
|
|
.card.tilt:hover{ |
|
|
transform: translateZ(10px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); |
|
|
box-shadow: |
|
|
0 24px 48px rgba(0,0,0,.4), |
|
|
0 0 24px rgba(255,210,74,.15), |
|
|
inset 0 0 0 1px rgba(255,255,255,.18); |
|
|
filter: saturate(1.1); |
|
|
} |
|
|
.card:active{ transform: translateZ(0) scale(.985); box-shadow: 0 12px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); } |
|
|
.card.disabled{ cursor:default; color:#bfc7da; background: linear-gradient(180deg,#6b7aa6,#4e5b85); text-shadow:none; filter:grayscale(.2) brightness(.92); } |
|
|
#question-display{ width:min(1000px, 92vw); text-align:center; margin:16px 0 6px; } |
|
|
#question-display h2{ margin:8px 0 6px; color:#0d2b6f } |
|
|
#question-display p { font-size: 22px; line-height: 1.4; } |
|
|
#score{ font-size:24px; font-weight:800; color:#0d2b6f; margin:0 0 8px 0 } |
|
|
.answer-container{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:14px } |
|
|
.answer-btn{ |
|
|
margin:0; padding:10px 16px; font-size:18px; cursor:pointer; |
|
|
border:2px solid #0d3a85; border-radius:10px; font-weight:800; color:#fff; |
|
|
background: linear-gradient(180deg,#1362ff,#0d3a85); |
|
|
box-shadow: 0 8px 18px rgba(0,0,0,.25); |
|
|
transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; |
|
|
} |
|
|
.answer-btn:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.28) } |
|
|
.answer-btn:active{ transform: translateY(0); box-shadow:0 8px 18px rgba(0,0,0,.25) } |
|
|
.answer-btn.disabled{ background:#aab4cc; color:#445; cursor:not-allowed; border-color:#889 } |
|
|
.feedback{ margin-top:10px; font-size:18px; font-weight:800 } |
|
|
.dd-overlay{ |
|
|
position: fixed; inset:0; display:none; align-items:center; justify-content:center; |
|
|
z-index: 9999; pointer-events:none; |
|
|
background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7)); |
|
|
animation: dd-bg 1.2s ease-in-out 2; |
|
|
} |
|
|
.dd-text{ |
|
|
font-size: clamp(40px, 7vw, 120px); |
|
|
font-weight: 900; color:#ffe17a; letter-spacing:2px; |
|
|
text-shadow: |
|
|
0 0 12px rgba(255,225,122,.9), |
|
|
0 0 40px rgba(255,225,122,.6), |
|
|
0 6px 0 #000; |
|
|
animation: flash 1.2s steps(2, jump-none) 2, wobble .9s ease-in-out 2; |
|
|
} |
|
|
@keyframes flash{ 0%,49%{opacity:1;filter:drop-shadow(0 0 24px rgba(255,225,122,.85));} 50%,100%{opacity:0;filter:none;} } |
|
|
@keyframes wobble{ 0%{transform:scale(1) rotate(0)} 50%{transform:scale(1.06) rotate(-2deg)} 100%{transform:scale(1) rotate(0)} } |
|
|
@keyframes dd-bg{ 0%{background: radial-gradient(40% 40% at 50% 50%, rgba(255,255,255,.12), rgba(0,0,0,.9));} 100%{background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.08), rgba(0,0,0,.7));} } |
|
|
.flash-ring{ position:absolute; inset:-3px; border-radius:14px; pointer-events:none; box-shadow:0 0 0 3px rgba(255,225,122,.95), 0 0 30px 6px rgba(255,225,122,.6); animation: ring 1.2s ease-in-out 2; } |
|
|
@keyframes ring{ 0%{opacity:1;transform:scale(1)} 50%{opacity:.1;transform:scale(.96)} 100%{opacity:1;transform:scale(1)} } |
|
|
.daily-double-banner{ color:#b30000; font-weight:900; font-size:22px; margin:8px 0 } |
|
|
#review{ |
|
|
width:min(1000px, 92vw); |
|
|
margin:14px 0 24px 0; |
|
|
padding:12px; |
|
|
background:#fff; |
|
|
border:1px solid #ccd3e0; |
|
|
border-radius:12px; |
|
|
box-shadow:0 6px 20px rgba(0,0,0,.08); |
|
|
} |
|
|
#review h3{ margin:0 0 8px 0; color:#0d2b6f } |
|
|
.missed{ margin:8px 0; text-align:left } |
|
|
.missed .q{ font-weight:700 } |
|
|
.missed .a{ margin-left:8px } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Microservices Strategies Jeopardy</h1> |
|
|
<a class="source" href="https://www.linkedin.com/pulse/transitioning-microservices-challenges-strategies-emerging-lively-8z54e/" target="_blank"> |
|
|
Source: Transitioning to Microservices — Challenges, Strategies & Emerging Patterns (LinkedIn) |
|
|
</a> |
|
|
|
|
|
<div class="topbar"> |
|
|
<div id="score">Score: 0</div> |
|
|
<button class="btn-reset" id="reset-btn" title="Start a fresh round">Reset Game</button> |
|
|
</div> |
|
|
|
|
|
<div class="stage"> |
|
|
<div id="game-board"> |
|
|
<div class="category">Adoption Challenges</div> |
|
|
<div class="category">Transition Strategies</div> |
|
|
<div class="category">Business Drivers</div> |
|
|
<div class="category">DevOps & Observability</div> |
|
|
<div class="category">DOMA & Case Study</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="question-display"></div> |
|
|
<div id="review" style="display:none;"></div> |
|
|
|
|
|
<audio id="dd-audio" preload="auto"> |
|
|
<source src="daily-double.mp3" type="audio/mpeg"> |
|
|
</audio> |
|
|
<div id="dd-overlay" class="dd-overlay"><div class="dd-text">DAILY DOUBLE!</div></div> |
|
|
|
|
|
<script> |
|
|
const categories = [ |
|
|
"Adoption Challenges", |
|
|
"Transition Strategies", |
|
|
"Business Drivers", |
|
|
"DevOps & Observability", |
|
|
"DOMA & Case Study" |
|
|
]; |
|
|
|
|
|
|
|
|
const questions = [ |
|
|
|
|
|
[ |
|
|
{ q: "What makes service boundary design hard when moving from a monolith?", a: [ |
|
|
"You must define clear domain and data ownership to avoid a mini-monolith or a chatty mesh", |
|
|
"Always make services as tiny as possible, regardless of coupling", |
|
|
"Share one database among all services to keep things simple" |
|
|
], correct: 0 }, |
|
|
{ q: "Which approach reflects modern microservices security?", a: [ |
|
|
"Implicit trust inside the cluster is fine; service calls don’t need auth", |
|
|
"Zero Trust: every service-to-service call is authenticated/authorized; avoid shared databases", |
|
|
"A single global API key in an environment variable is sufficient" |
|
|
], correct: 1 }, |
|
|
{ q: "Why is testing harder with microservices than with a monolith?", a: [ |
|
|
"Only unit tests are needed for each service", |
|
|
"End-to-end tests replace all other test types", |
|
|
"Each service needs unit, integration, and contract tests; dependencies increase CI/CD complexity" |
|
|
], correct: 2 } |
|
|
], |
|
|
|
|
|
|
|
|
[ |
|
|
{ q: "The Strangler Pattern primarily aims to:", a: [ |
|
|
"Incrementally replace monolith features with new services while both systems coexist", |
|
|
"Fork the monolith into multiple teams without architectural change", |
|
|
"Freeze the monolith and expose it only via a single proxy forever" |
|
|
], correct: 0 }, |
|
|
{ q: "The Lego Method focuses on:", a: [ |
|
|
"Deleting the monolith before any new code ships", |
|
|
"Augmenting the monolith with new microservices, retiring pieces over time", |
|
|
"Migrating the database first and leaving services for later" |
|
|
], correct: 1 }, |
|
|
{ q: "The Nuclear Method is best described as:", a: [ |
|
|
"Writing wrappers around the monolith only", |
|
|
"Gradually extracting one module at a time", |
|
|
"A greenfield rebuild while the monolith continues running (high risk/high reward)" |
|
|
], correct: 2 } |
|
|
], |
|
|
|
|
|
|
|
|
[ |
|
|
{ q: "How do microservices improve uptime?", a: [ |
|
|
"They isolate failures, limiting the blast radius to a single service", |
|
|
"They bundle all features into one release to reduce change", |
|
|
"They remove the need for monitoring in production" |
|
|
], correct: 0 }, |
|
|
{ q: "Which agility benefit is unique to microservices?", a: [ |
|
|
"Quarterly synchronized releases are easier", |
|
|
"Independent service deployments accelerate feature delivery", |
|
|
"All services must deploy together to avoid drift" |
|
|
], correct: 1 }, |
|
|
{ q: "How does service scoping aid information sharing?", a: [ |
|
|
"Central enterprise data layers required for all reads/writes", |
|
|
"Each service exposes only data it needs; services map to business capabilities", |
|
|
"All services share a single schema to guarantee consistency" |
|
|
], correct: 2 } |
|
|
], |
|
|
|
|
|
|
|
|
[ |
|
|
{ q: "Why are DevOps practices essential for microservices?", a: [ |
|
|
"Automated CI/CD and team ownership keep many services deployable and healthy", |
|
|
"They replace the need for tests entirely", |
|
|
"They allow once-a-year release cycles" |
|
|
], correct: 0 }, |
|
|
{ q: "What reflects modern observability in 2025?", a: [ |
|
|
"Single-host log tailing is enough for distributed systems", |
|
|
"Aggregated logs, metrics, and traces with eBPF/AI-driven anomaly detection", |
|
|
"Manual dashboards updated monthly" |
|
|
], correct: 1 }, |
|
|
{ q: "Why is Kubernetes commonly used with microservices?", a: [ |
|
|
"It eliminates the need for containers", |
|
|
"It stores all service data by default", |
|
|
"It orchestrates scheduling, scaling, and self-healing across many containerized services" |
|
|
], correct: 2 } |
|
|
], |
|
|
|
|
|
|
|
|
[ |
|
|
{ q: "What is Domain-Oriented Microservices Architecture (DOMA)?", a: [ |
|
|
"Grouping services by business domains with minimized cross-domain chatter via gateways", |
|
|
"A single massive service per company to simplify governance", |
|
|
"Only using databases named after domains" |
|
|
], correct: 0 }, |
|
|
{ q: "Why did Uber move away from a monolith?", a: [ |
|
|
"They wanted fewer features to manage", |
|
|
"Global growth made the monolith a bottleneck; they needed independent deployments and scale", |
|
|
"They had no REST APIs to begin with" |
|
|
], correct: 1 }, |
|
|
{ q: "How did Uber reduce complexity as services multiplied?", a: [ |
|
|
"By scaling the monolith vertically only", |
|
|
"By forcing all inter-service calls through one global gateway", |
|
|
"By organizing services into domains with dedicated gateways and clearer boundaries (DOMA)" |
|
|
], correct: 2 } |
|
|
] |
|
|
]; |
|
|
|
|
|
let score = 0, answered = 0; |
|
|
const total = 15; |
|
|
const board = document.getElementById("game-board"), |
|
|
qdisp = document.getElementById("question-display"), |
|
|
sdisp = document.getElementById("score"), |
|
|
review = document.getElementById("review"); |
|
|
const ddOverlay = document.getElementById("dd-overlay"); |
|
|
const ddAudio = document.getElementById("dd-audio"); |
|
|
const shuffleRegistry = new Map(); |
|
|
const missedQuestions = []; |
|
|
const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) }; |
|
|
|
|
|
document.getElementById('reset-btn').addEventListener('click', () => location.reload()); |
|
|
|
|
|
function createBoard() { |
|
|
|
|
|
for (let row = 0; row < 3; row++) { |
|
|
for (let col = 0; col < 5; col++) { |
|
|
const card = document.createElement("div"); |
|
|
card.className = "card tilt"; |
|
|
card.textContent = `$${(row + 1) * 100}`; |
|
|
card.dataset.col = col; |
|
|
card.dataset.row = row; |
|
|
card.addEventListener("mousemove", (e) => { |
|
|
const r = card.getBoundingClientRect(); |
|
|
const x = (e.clientX - r.left) / r.width; |
|
|
const y = (e.clientY - r.top) / r.height; |
|
|
card.style.setProperty("--ry", `${(x - 0.5) * 10}deg`); |
|
|
card.style.setProperty("--rx", `${(0.5 - y) * 10}deg`); |
|
|
}); |
|
|
card.addEventListener("mouseleave", () => { |
|
|
card.style.removeProperty("--ry"); |
|
|
card.style.removeProperty("--rx"); |
|
|
}); |
|
|
card.onclick = () => handleCardClick(card); |
|
|
board.appendChild(card); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
function handleCardClick(card){ |
|
|
if (card.classList.contains("disabled")) return; |
|
|
const col = +card.dataset.col; |
|
|
const row = +card.dataset.row; |
|
|
const isDD = (col === dailyDouble.col && row === dailyDouble.row); |
|
|
if (isDD){ |
|
|
triggerDailyDouble(card, () => showQuestion(col, row, card, true)); |
|
|
} else { |
|
|
showQuestion(col, row, card, false); |
|
|
} |
|
|
} |
|
|
|
|
|
function triggerDailyDouble(card, onDone){ |
|
|
const ring = document.createElement("div"); |
|
|
ring.className = "flash-ring"; |
|
|
card.appendChild(ring); |
|
|
ddAudio.currentTime = 0; |
|
|
ddAudio.play().catch(()=>{}); |
|
|
ddOverlay.style.display = "flex"; |
|
|
setTimeout(() => { |
|
|
ddOverlay.style.display = "none"; |
|
|
ring.remove(); |
|
|
onDone(); |
|
|
}, 2400); |
|
|
} |
|
|
|
|
|
function showQuestion(categoryIndex, difficulty, card, isDailyDouble){ |
|
|
const q = questions[categoryIndex][difficulty]; |
|
|
const options = q.a.map((text, origIdx) => ({ text, origIdx })); |
|
|
|
|
|
for (let i = options.length - 1; i > 0; i--) { |
|
|
const j = Math.floor(Math.random() * (i + 1)); |
|
|
[options[i], options[j]] = [options[j], options[i]]; |
|
|
} |
|
|
const shuffledCorrectIndex = options.findIndex(o => o.origIdx === q.correct); |
|
|
const key = `${categoryIndex}-${difficulty}`; |
|
|
shuffleRegistry.set(key, { shuffledCorrectIndex, isDailyDouble }); |
|
|
|
|
|
const dailyDoubleBanner = isDailyDouble ? `<div class="daily-double-banner">🎉 DAILY DOUBLE! 🎉</div>` : ""; |
|
|
qdisp.innerHTML = ` |
|
|
${dailyDoubleBanner} |
|
|
<h2>${categories[categoryIndex]} for $${(difficulty + 1) * 100}${isDailyDouble ? " (x2)" : ""}</h2> |
|
|
<p>${q.q}</p> |
|
|
<div class="answer-container"> |
|
|
${options.map((opt, i) => |
|
|
`<button class="answer-btn" data-ans="${i}" data-key="${key}">${opt.text}</button>` |
|
|
).join("")} |
|
|
</div> |
|
|
`; |
|
|
card.classList.add("disabled"); |
|
|
document.querySelectorAll('.answer-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
if (btn.classList.contains('disabled')) return; |
|
|
const chosenIndex = parseInt(btn.getAttribute('data-ans'), 10); |
|
|
const k = btn.getAttribute('data-key'); |
|
|
checkAnswer(categoryIndex, difficulty, chosenIndex, k); |
|
|
}, { once: true }); |
|
|
}); |
|
|
} |
|
|
|
|
|
function checkAnswer(cat, diff, chosenShuffledIndex, key){ |
|
|
const q = questions[cat][diff]; |
|
|
const reg = shuffleRegistry.get(key); |
|
|
const isCorrect = (chosenShuffledIndex === reg.shuffledCorrectIndex); |
|
|
let val = (diff + 1) * 100; |
|
|
if (reg.isDailyDouble) val *= 2; |
|
|
|
|
|
document.querySelectorAll(".answer-btn").forEach(b => { |
|
|
b.disabled = true; b.classList.add("disabled"); |
|
|
}); |
|
|
|
|
|
if (isCorrect) { |
|
|
score += val; |
|
|
qdisp.innerHTML += `<p class="feedback" style="color:green;">✅ Correct! +$${val.toLocaleString()}</p>`; |
|
|
} else { |
|
|
score -= val; |
|
|
const correctText = q.a[q.correct]; |
|
|
const chosenBtn = document.querySelector(`.answer-btn[data-ans="${chosenShuffledIndex}"][data-key="${key}"]`); |
|
|
const chosenPretty = chosenBtn ? chosenBtn.textContent : "(your choice)"; |
|
|
qdisp.innerHTML += `<p class="feedback" style="color:#b00020;">❌ Wrong! −$${val.toLocaleString()}<br/>Correct answer: <em>${correctText}</em></p>`; |
|
|
missedQuestions.push({ |
|
|
category: categories[cat], |
|
|
value: `$${(diff+1)*100}${reg.isDailyDouble ? " (x2)" : ""}`, |
|
|
question: q.q, |
|
|
yourAnswer: chosenPretty, |
|
|
correctAnswer: correctText |
|
|
}); |
|
|
} |
|
|
sdisp.textContent = `Score: ${score}`; |
|
|
if (++answered === total) endGame(); |
|
|
} |
|
|
|
|
|
function endGame(){ |
|
|
qdisp.innerHTML += `<h2 style="margin-top:12px">Game Over!</h2><p>Your final score: $${score.toLocaleString()}</p>`; |
|
|
if (missedQuestions.length){ |
|
|
const items = missedQuestions.map(m => |
|
|
`<div class="missed"> |
|
|
<div class="q">(${m.category} • ${m.value}) ${m.question}</div> |
|
|
<div class="a">Your answer: <em>${m.yourAnswer}</em></div> |
|
|
<div class="a">Correct: <strong>${m.correctAnswer}</strong></div> |
|
|
</div>` |
|
|
).join(""); |
|
|
review.style.display = "block"; |
|
|
review.innerHTML = `<h3>Review: Questions to Revisit (${missedQuestions.length})</h3>${items}`; |
|
|
} else { |
|
|
review.style.display = "block"; |
|
|
review.innerHTML = `<h3>Perfect Round!</h3><p>You answered all questions correctly 🎉</p>`; |
|
|
} |
|
|
} |
|
|
|
|
|
createBoard(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
