| <!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 = [ |
| [ |
| { 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 } |
| ], |
| [ |
| { 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 } |
| ], |
| [ |
| { 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 } |
| ], |
| [ |
| { 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 } |
| ], |
| [ |
| { 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> |
|
|
