|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"/> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Terraform 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 } |
|
|
|
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
|
|
|
.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{ margin:8px 0 } |
|
|
#score{ font-size:24px; font-weight:800; color:#0d2b6f; margin-bottom:24px } |
|
|
|
|
|
.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(0deg) } |
|
|
50%{ transform: scale(1.06) rotate(-2deg) } |
|
|
100%{ transform: scale(1) rotate(0deg) } |
|
|
} |
|
|
@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(0.96) } |
|
|
100%{ opacity:1; transform: scale(1) } |
|
|
} |
|
|
|
|
|
.daily-double-banner{ color:#b30000; font-weight:900; font-size:22px; margin:8px 0 } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Terraform Jeopardy</h1> |
|
|
<a class="source" href="https://learn.microsoft.com/en-us/training/modules/terraform-introduction-to-infrastructure-as-code/2-what-infrastructure-code" target="_blank"> |
|
|
Source: Terraform Introduction to Infrastructure as Code |
|
|
</a> |
|
|
|
|
|
<div class="stage"> |
|
|
<div id="game-board"> |
|
|
<div class="category">IaC Benefits</div> |
|
|
<div class="category">Declarative vs Imperative</div> |
|
|
<div class="category">Terraform Overview</div> |
|
|
<div class="category">State & Providers</div> |
|
|
<div class="category">Workflow & Testing</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="question-display"></div> |
|
|
<div id="score">Score: 0</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 = ["IaC Benefits", "Declarative vs Imperative", "Terraform Overview", "State & Providers", "Workflow & Testing"]; |
|
|
const questions = [ |
|
|
[ |
|
|
{ q: "Infrastructure as Code helps reduce manual errors and enforce consistency. That is known as?", a: ["Version control", "Infrastructure drift", "Idempotence"], correct: 2 }, |
|
|
{ q: "IaC enables rapid provisioning of multiple environments on demand. That is ideal for what?", a: ["Automation", "Drift", "Manual setup"], correct: 0 }, |
|
|
{ q: "Tracking infrastructure via code delivers faster deployment and higher ___?", a: ["Cost", "Reliability", "Unpredictability"], correct: 1 } |
|
|
], |
|
|
[ |
|
|
{ q: "Declarative IaC describes what you want. Imperative IaC describes how to get it. Which describes desired state?", a: ["Declarative", "Imperative", "Procedural"], correct: 0 }, |
|
|
{ q: "Terraform uses which approach for configuration?", a: ["Imperative scripting", "Declarative HCL", "Manual CLI"], correct: 1 }, |
|
|
{ q: "Imperative IaC requires specifying each deployment step. That is more?", a: ["Flexible", "Complex", "Consistent"], correct: 1 } |
|
|
], |
|
|
[ |
|
|
{ q: "Terraform is an open-source tool created by?", a: ["Microsoft", "HashiCorp", "Google"], correct: 1 }, |
|
|
{ q: "Terraform supports multiple cloud providers like AWS, Azure, GCP. This makes it?", a: ["Cloud-specific", "Multi-cloud", "Legacy"], correct: 1 }, |
|
|
{ q: "Terraform files are written in HCL or optionally JSON for describing state. True or False?", a: ["True", "False", "Depends"], correct: 0 } |
|
|
], |
|
|
[ |
|
|
{ q: "Terraform keeps track of real infrastructure in a ___ file to manage changes.", a: ["Plan", "State", "Config"], correct: 1 }, |
|
|
{ q: "Providers are plugins that let Terraform interact with cloud APIs. Which is an Azure provider?", a: ["AWSRM", "AzureRM", "GCPRM"], correct: 1 }, |
|
|
{ q: "Remote state storage backend is recommended to support?", a: ["Team collaboration", "Single use", "Offline mode"], correct: 0 } |
|
|
], |
|
|
[ |
|
|
{ q: "What Terraform command previews changes before applying?", a: ["terraform plan", "terraform apply", "terraform init"], correct: 0 }, |
|
|
{ q: "Integration and unit tests for Terraform might include static lint and validate steps. True?", a: ["True", "False", "Not required"], correct: 0 }, |
|
|
{ q: "End-to-end tests typically deploy to a test environment, validate, then ___ it down.", a: ["Suspend", "Destroy", "Pause"], correct: 1 } |
|
|
] |
|
|
]; |
|
|
|
|
|
let score = 0, answered = 0, total = 15; |
|
|
const board = document.getElementById("game-board"), |
|
|
qdisp = document.getElementById("question-display"), |
|
|
sdisp = document.getElementById("score"); |
|
|
const ddOverlay = document.getElementById("dd-overlay"); |
|
|
const ddAudio = document.getElementById("dd-audio"); |
|
|
|
|
|
|
|
|
const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) }; |
|
|
|
|
|
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; |
|
|
const ry = (x - 0.5) * 10; |
|
|
const rx = (0.5 - y) * 10; |
|
|
card.style.setProperty("--ry", `${ry}deg`); |
|
|
card.style.setProperty("--rx", `${rx}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]; |
|
|
|
|
|
|
|
|
let answerOptions = q.a.map((ans, idx) => ({ text: ans, isCorrect: idx === q.correct })); |
|
|
for (let i = answerOptions.length - 1; i > 0; i--) { |
|
|
const j = Math.floor(Math.random() * (i + 1)); |
|
|
[answerOptions[i], answerOptions[j]] = [answerOptions[j], answerOptions[i]]; |
|
|
} |
|
|
|
|
|
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"> |
|
|
${answerOptions.map(opt => |
|
|
`<button class="answer-btn" onclick="checkAnswer(${categoryIndex},${difficulty},${opt.isCorrect}, ${isDailyDouble})">${opt.text}</button>` |
|
|
).join("")} |
|
|
</div> |
|
|
`; |
|
|
|
|
|
card.classList.add("disabled"); |
|
|
answered++; |
|
|
} |
|
|
|
|
|
window.checkAnswer = (cat, diff, isCorrect, isDouble) => { |
|
|
const q = questions[cat][diff]; |
|
|
let val = (diff + 1) * 100; |
|
|
if (isDouble) val *= 2; |
|
|
const correctText = q.a[q.correct]; |
|
|
|
|
|
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}</p>`; |
|
|
} else { |
|
|
score -= val; |
|
|
qdisp.innerHTML += `<p class="feedback" style="color:#b00020;">❌ Wrong! −$${val}. Correct: ${correctText}</p>`; |
|
|
} |
|
|
sdisp.textContent = `Score: ${score}`; |
|
|
|
|
|
if (answered === total) { |
|
|
qdisp.innerHTML += `<h2 style="margin-top:12px">Game Over!</h2><p>Your final score: $${score}</p>`; |
|
|
} |
|
|
}; |
|
|
|
|
|
createBoard(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
