File size: 7,735 Bytes
26eff6f 1e0b885 | 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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SQL Databases Jeopardy</title>
<style>
body { font-family: Arial, sans-serif; display:flex;flex-direction:column;align-items:center; background:#f9f9f9;margin:0; }
h1 { color:#2b579a; margin-top:20px; }
#game-board { display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:100px;gap:2px;margin:20px 0;background:#000;border:4px solid #000; }
.category { background:#0078D4;color:#fff;font-weight:bold; display:flex;justify-content:center;align-items:center;text-align:center;font-size:18px;border:1px solid #000; }
.card { background:#2b579a;color:#fff;display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:bold;cursor:pointer;border:1px solid #000;text-align:center;transition:background .3s; }
.card:hover { background:#005a9e; }
.card.disabled { background:#ccc; cursor:default; }
#question-display { width:80%; text-align:center; margin-bottom:20px; }
#score { font-size:24px;font-weight:bold;color:#2b579a; }
.answer-container { display:flex;justify-content:center; margin-top:20px; flex-wrap:wrap; }
.answer-btn { margin:5px;padding:10px 15px; font-size:18px;cursor:pointer;border:2px solid #005a9e;border-radius:5px;background:#0078D4;color:#fff;font-weight:bold;transition:background .3s,color .3s; }
.answer-btn:hover { background:#005a9e; color:#f0f0f0; }
.answer-btn.disabled { background:#ccc; color:#666;cursor:not-allowed; }
.feedback { margin-top:10px;font-size:18px;font-weight:bold; }
a.source { font-size:14px; color:#555; margin-bottom:10px; }
a.source:hover { text-decoration: underline; }
.daily-double { color: red; font-weight: bold; font-size: 20px; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>SQL Databases Jeopardy</h1>
<a class="source" href="https://learn.microsoft.com/en-us/azure/azure-sql/azure-sql-iaas-vs-paas-what-is-overview?view=azuresql#comparison-table" target="_blank">
Source: Azure SQL IaaS vs PaaS Comparison Table
</a>
<div id="game-board">
<div class="category">SQL VM</div>
<div class="category">Managed Instance</div>
<div class="category">Instance Pool</div>
<div class="category">Single DB</div>
<div class="category">Elastic Pool</div>
</div>
<div id="question-display"></div>
<div id="score">Score: 0</div>
<script>
const categories = ["SQL VM", "Managed Instance", "Instance Pool", "Single DB", "Elastic Pool"];
const questions = [
[ // SQL VM
{ q: "Which option gives full control over SQL Server and the OS?", a: ["SQL VM", "Elastic Pool", "Single DB"], correct: 0 },
{ q: "Which deployment is best for migrating existing apps requiring OS-level access?", a: ["Elastic Pool", "SQL VM", "Managed Instance"], correct: 1 },
{ q: "Which option provides the lowest level of PaaS features?", a: ["Managed Instance", "Single DB", "SQL VM"], correct: 2 }
],
[ // Managed Instance
{ q: "Which option offers near full compatibility with on-prem SQL Server features?", a: ["SQL VM", "Managed Instance", "Single DB"], correct: 1 },
{ q: "Which choice supports cross-database transactions and SQL Agent?", a: ["Elastic Pool", "Single DB", "Managed Instance"], correct: 2 },
{ q: "Which option is better for modernizing on-prem apps to PaaS with fewer changes?", a: ["Instance Pool", "Managed Instance", "SQL VM"], correct: 1 }
],
[ // Instance Pool
{ q: "Which deployment shares resources across multiple managed instances?", a: ["Elastic Pool", "Instance Pool", "Single DB"], correct: 1 },
{ q: "Which option helps consolidate smaller managed instances cost-effectively?", a: ["Instance Pool", "SQL VM", "Managed Instance"], correct: 0 },
{ q: "Which option combines benefits of managed instances with resource efficiency?", a: ["SQL VM", "Single DB", "Instance Pool"], correct: 2 }
],
[ // Single DB
{ q: "Which option is best for apps needing isolated, predictable performance?", a: ["SQL VM", "Single DB", "Elastic Pool"], correct: 1 },
{ q: "Which provides per-database scalability and predictable billing?", a: ["Single DB", "Instance Pool", "Managed Instance"], correct: 0 },
{ q: "Which supports hyperscale and serverless tiers?", a: ["Elastic Pool", "Single DB", "SQL VM"], correct: 1 }
],
[ // Elastic Pool
{ q: "Which is optimized for many databases with varying usage patterns?", a: ["Elastic Pool", "Managed Instance", "SQL VM"], correct: 0 },
{ q: "Which enables cost optimization through shared resources across databases?", a: ["SQL VM", "Elastic Pool", "Single DB"], correct: 1 },
{ q: "Which PaaS model is ideal for SaaS apps with multi-tenant databases?", a: ["Managed Instance", "Elastic Pool", "Instance Pool"], 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 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";
card.textContent = `$${(row + 1) * 100}`;
card.onclick = () => showQuestion(col, row, card);
board.appendChild(card);
}
}
}
function showQuestion(categoryIndex, difficulty, card) {
if (card.classList.contains("disabled")) return;
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 isDailyDouble = (categoryIndex === dailyDouble.col && difficulty === dailyDouble.row);
const dailyDoubleBanner = isDailyDouble ? `<div class='daily-double'>🎉 DAILY DOUBLE! 🎉</div>` : "";
qdisp.innerHTML = `
${dailyDoubleBanner}
<h2>${categories[categoryIndex]} for $${(difficulty + 1) * 100}</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:red;">❌ Wrong! −$${val}. Correct: ${correctText}</p>`;
}
sdisp.textContent = `Score: ${score}`;
if (answered === total) {
qdisp.innerHTML += `<h2>Game Over!</h2><p>Your final score: $${score}</p>`;
}
};
createBoard();
</script>
</body>
</html>
|