eaglelandsonce/SQL_Databases_Jeopardy

1<!DOCTYPE html>2<html lang="en">3<head>4  <meta charset="UTF-8"/>5  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>6  <title>SQL Databases Jeopardy</title>7  <style>8    body { font-family: Arial, sans-serif; display:flex;flex-direction:column;align-items:center; background:#f9f9f9;margin:0; }9    h1 { color:#2b579a; margin-top:20px; }10    #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; }11    .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; }12    .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; }13    .card:hover { background:#005a9e; }14    .card.disabled { background:#ccc; cursor:default; }15    #question-display { width:80%; text-align:center; margin-bottom:20px; }16    #score { font-size:24px;font-weight:bold;color:#2b579a; }17    .answer-container { display:flex;justify-content:center; margin-top:20px; flex-wrap:wrap; }18    .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; }19    .answer-btn:hover { background:#005a9e; color:#f0f0f0; }20    .answer-btn.disabled { background:#ccc; color:#666;cursor:not-allowed; }21    .feedback { margin-top:10px;font-size:18px;font-weight:bold; }22    a.source { font-size:14px; color:#555; margin-bottom:10px; }23    a.source:hover { text-decoration: underline; }24    .daily-double { color: red; font-weight: bold; font-size: 20px; margin-bottom: 10px; }25  </style>26</head>27<body>28  <h1>SQL Databases Jeopardy</h1>29  <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">30    Source: Azure SQL IaaS vs PaaS Comparison Table31  </a>32  <div id="game-board">33    <div class="category">SQL VM</div>34    <div class="category">Managed Instance</div>35    <div class="category">Instance Pool</div>36    <div class="category">Single DB</div>37    <div class="category">Elastic Pool</div>38  </div>39  <div id="question-display"></div>40  <div id="score">Score: 0</div>41 42  <script>43    const categories = ["SQL VM", "Managed Instance", "Instance Pool", "Single DB", "Elastic Pool"];44    const questions = [45      [ // SQL VM46        { q: "Which option gives full control over SQL Server and the OS?", a: ["SQL VM", "Elastic Pool", "Single DB"], correct: 0 },47        { q: "Which deployment is best for migrating existing apps requiring OS-level access?", a: ["Elastic Pool", "SQL VM", "Managed Instance"], correct: 1 },48        { q: "Which option provides the lowest level of PaaS features?", a: ["Managed Instance", "Single DB", "SQL VM"], correct: 2 }49      ],50      [ // Managed Instance51        { q: "Which option offers near full compatibility with on-prem SQL Server features?", a: ["SQL VM", "Managed Instance", "Single DB"], correct: 1 },52        { q: "Which choice supports cross-database transactions and SQL Agent?", a: ["Elastic Pool", "Single DB", "Managed Instance"], correct: 2 },53        { q: "Which option is better for modernizing on-prem apps to PaaS with fewer changes?", a: ["Instance Pool", "Managed Instance", "SQL VM"], correct: 1 }54      ],55      [ // Instance Pool56        { q: "Which deployment shares resources across multiple managed instances?", a: ["Elastic Pool", "Instance Pool", "Single DB"], correct: 1 },57        { q: "Which option helps consolidate smaller managed instances cost-effectively?", a: ["Instance Pool", "SQL VM", "Managed Instance"], correct: 0 },58        { q: "Which option combines benefits of managed instances with resource efficiency?", a: ["SQL VM", "Single DB", "Instance Pool"], correct: 2 }59      ],60      [ // Single DB61        { q: "Which option is best for apps needing isolated, predictable performance?", a: ["SQL VM", "Single DB", "Elastic Pool"], correct: 1 },62        { q: "Which provides per-database scalability and predictable billing?", a: ["Single DB", "Instance Pool", "Managed Instance"], correct: 0 },63        { q: "Which supports hyperscale and serverless tiers?", a: ["Elastic Pool", "Single DB", "SQL VM"], correct: 1 }64      ],65      [ // Elastic Pool66        { q: "Which is optimized for many databases with varying usage patterns?", a: ["Elastic Pool", "Managed Instance", "SQL VM"], correct: 0 },67        { q: "Which enables cost optimization through shared resources across databases?", a: ["SQL VM", "Elastic Pool", "Single DB"], correct: 1 },68        { q: "Which PaaS model is ideal for SaaS apps with multi-tenant databases?", a: ["Managed Instance", "Elastic Pool", "Instance Pool"], correct: 1 }69      ]70    ];71 72    let score = 0, answered = 0, total = 15;73    const board = document.getElementById("game-board"),74          qdisp = document.getElementById("question-display"),75          sdisp = document.getElementById("score");76 77    const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) };78 79    function createBoard() {80      for (let row = 0; row < 3; row++) {81        for (let col = 0; col < 5; col++) {82          const card = document.createElement("div");83          card.className = "card";84          card.textContent = `$${(row + 1) * 100}`;85          card.onclick = () => showQuestion(col, row, card);86          board.appendChild(card);87        }88      }89    }90 91    function showQuestion(categoryIndex, difficulty, card) {92      if (card.classList.contains("disabled")) return;93      const q = questions[categoryIndex][difficulty];94      let answerOptions = q.a.map((ans, idx) => ({ text: ans, isCorrect: idx === q.correct }));95      for (let i = answerOptions.length - 1; i > 0; i--) {96        const j = Math.floor(Math.random() * (i + 1));97        [answerOptions[i], answerOptions[j]] = [answerOptions[j], answerOptions[i]];98      }99 100      const isDailyDouble = (categoryIndex === dailyDouble.col && difficulty === dailyDouble.row);101      const dailyDoubleBanner = isDailyDouble ? `<div class='daily-double'>🎉 DAILY DOUBLE! 🎉</div>` : "";102 103      qdisp.innerHTML = `104        ${dailyDoubleBanner}105        <h2>${categories[categoryIndex]} for $${(difficulty + 1) * 100}</h2>106        <p>${q.q}</p>107        <div class="answer-container">108          ${answerOptions.map(opt =>109            `<button class="answer-btn" onclick="checkAnswer(${categoryIndex},${difficulty},${opt.isCorrect}, ${isDailyDouble})">${opt.text}</button>`110          ).join("")}111        </div>112      `;113      card.classList.add("disabled");114      answered++;115    }116 117    window.checkAnswer = (cat, diff, isCorrect, isDouble) => {118      const q = questions[cat][diff];119      let val = (diff + 1) * 100;120      if (isDouble) val *= 2;121      const correctText = q.a[q.correct];122      document.querySelectorAll(".answer-btn").forEach(b => {123        b.disabled = true;124        b.classList.add("disabled");125      });126      if (isCorrect) {127        score += val;128        qdisp.innerHTML += `<p class="feedback" style="color:green;">✅ Correct! +$${val}</p>`;129      } else {130        score -= val;131        qdisp.innerHTML += `<p class="feedback" style="color:red;">❌ Wrong! −$${val}. Correct: ${correctText}</p>`;132      }133      sdisp.textContent = `Score: ${score}`;134      if (answered === total) {135        qdisp.innerHTML += `<h2>Game Over!</h2><p>Your final score: $${score}</p>`;136      }137    };138 139    createBoard();140  </script>141</body>142</html>143