Update index.html

index.html

@@ -5,7 +5,149 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Simple Networking Jeopardy</title>
   <style>
-    /* --- same CSS as your previous game, unchanged for brevity --- */
+    :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 + board */
+    .stage{ perspective: 1200px; width:min(1100px, 95vw); visibility:hidden; }
+    #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));
+    }
+    .dd-overlay.active{ 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>
@@ -47,109 +189,110 @@
       "Private DNS"
     ];
 
+    // 15 questions (3 per category). Correct answers randomized at click time.
     const questions = [
       // Hub & Spoke
       [
-        { q: "What is the purpose of using a hub-and-spoke network in Azure?",
+        { q: "What is the main benefit of a hub-and-spoke network in Azure?",
           a: [
-            "To isolate workloads and centralize security and management",
-            "To maximize outbound internet traffic without restriction",
-            "To reduce virtual network peering performance"
+            "Isolation of workloads with centralized security & management",
+            "Bypassing all security controls for faster internet access",
+            "Eliminating the need for subnets entirely"
           ], correct: 0 },
         { q: "Which network typically hosts shared services like Azure Firewall and DNS?",
           a: [
             "Hub network",
             "Spoke network",
-            "Backend subnet"
+            "Frontend subnet"
           ], correct: 0 },
-        { q: "Why connect hub and spoke networks using virtual network peering?",
+        { q: "Why use VNet peering between hub and spoke?",
           a: [
-            "To enable secure communication between shared and application workloads",
-            "To route all traffic directly to the public internet",
-            "To disable subnet isolation"
+            "Secure communication between shared and application networks",
+            "Automatic public exposure of private endpoints",
+            "To disable routing between subnets"
           ], correct: 0 }
       ],
       // ASG & NSG
       [
-        { q: "What is an Application Security Group (ASG) used for?",
+        { q: "What does an Application Security Group (ASG) help you do?",
           a: [
-            "To simplify rule management for similar VMs",
-            "To store DNS entries",
-            "To encrypt storage accounts"
+            "Group similar VMs to simplify rule management",
+            "Create DNS zones for private name resolution",
+            "Encrypt disks at rest automatically"
           ], correct: 0 },
-        { q: "What does a Network Security Group (NSG) primarily do?",
+        { q: "What is the primary role of a Network Security Group (NSG)?",
           a: [
-            "Filters inbound and outbound traffic using security rules",
-            "Provides deep packet inspection",
-            "Performs domain name resolution"
+            "Filter inbound/outbound traffic with allow/deny rules",
+            "Provide deep packet inspection and threat intel",
+            "Host a reverse proxy for web apps"
           ], correct: 0 },
-        { q: "Why use both ASGs and NSGs together?",
+        { q: "Why combine ASGs and NSGs on subnets and NICs?",
           a: [
-            "To apply fine-grained control and block unauthorized access between tiers",
-            "To increase DNS query response times",
-            "To disable subnet routing"
+            "Fine-grained segmentation and blocking of unauthorized tier-to-tier access",
+            "To increase public DNS response times",
+            "To bypass route tables"
           ], correct: 0 }
       ],
       // Firewall
       [
-        { q: "Where should the Azure Firewall be deployed in this architecture?",
+        { q: "Where is Azure Firewall placed in this design?",
           a: [
             "In the hub virtual network",
-            "In each spoke’s backend subnet",
-            "On every virtual machine"
+            "Inside every spoke VM",
+            "In a public subnet of each spoke"
           ], correct: 0 },
-        { q: "What is one function of Azure Firewall application rules?",
+        { q: "What is a typical use of Azure Firewall application rules?",
           a: [
-            "Allowing specific outbound FQDNs for updates",
-            "Creating DNS zones for internal resolution",
-            "Enforcing encryption for blob storage"
+            "Permit outbound FQDNs (e.g., Azure DevOps) for updates",
+            "Create A-records for VM names",
+            "Auto-scale a VM scale set"
           ], correct: 0 },
-        { q: "Why is centralized firewall protection important?",
+        { q: "Why centralize protection with Azure Firewall?",
           a: [
-            "It ensures compliance, deep inspection, and centralized threat management",
-            "It removes the need for network rules",
-            "It limits internal visibility"
+            "Deep inspection, threat intelligence, logging, and compliance",
+            "To remove the need for any NSGs",
+            "To disable hub-and-spoke peering"
           ], correct: 0 }
       ],
       // Routing
       [
-        { q: "What Azure feature enforces outbound traffic inspection through the firewall?",
+        { q: "What Azure feature forces outbound traffic to pass through the firewall?",
           a: [
             "User-defined route (UDR) tables",
-            "Network watcher flow logs",
-            "Application Gateway"
+            "Private endpoint policies",
+            "NSG flow logs"
           ], correct: 0 },
-        { q: "Where should the custom route table be associated?",
+        { q: "Where should the route table be associated to enforce inspection?",
           a: [
             "Frontend and backend subnets",
-            "Only the hub network",
-            "Azure DNS zone"
+            "Only the hub VNet",
+            "The Private DNS zone"
           ], correct: 0 },
-        { q: "Why route all outbound traffic through the firewall?",
+        { q: "Why route all outbound traffic via the firewall?",
           a: [
-            "To enforce consistent security and visibility of data leaving the network",
-            "To improve public website performance",
-            "To bypass Azure Policy controls"
+            "Consistent policy enforcement and full visibility of egress",
+            "To speed up public internet browsing",
+            "To bypass Azure Policy"
           ], correct: 0 }
       ],
       // Private DNS
       [
         { q: "What is the purpose of a Private DNS Zone?",
           a: [
-            "Provides internal name resolution without public exposure",
-            "Improves internet-based name resolution speed",
-            "Hosts firewall configuration policies"
+            "Internal name resolution without public exposure",
+            "Hosting WAF policies",
+            "Publicly advertising internal hostnames"
           ], correct: 0 },
-        { q: "Which record type is used to resolve internal VM names?",
+        { q: "Which record type is commonly used to resolve VM names internally?",
           a: [
             "A-record",
             "MX-record",
-            "CNAME-record"
+            "NS-record"
           ], correct: 0 },
-        { q: "Why link the Private DNS Zone to the virtual network?",
+        { q: "Why link the Private DNS Zone to the VNet (and enable auto-registration)?",
           a: [
-            "To allow automatic DNS registration and internal communication",
-            "To publish names to the public internet",
+            "To allow internal name resolution and automatic record management",
+            "To publish records to the public internet",
             "To disable DNS forwarding"
           ], correct: 0 }
       ]
@@ -157,6 +300,7 @@
 
     let score = 0, answered = 0;
     const total = 15;
+
     const board = document.getElementById("game-board"),
           qdisp = document.getElementById("question-display"),
           sdisp = document.getElementById("score"),
@@ -165,10 +309,14 @@
     const ddAudio = document.getElementById("dd-audio");
     const shuffleRegistry = new Map();
     const missedQuestions = [];
+
+    // Random Daily Double position
     const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) };
+
     document.getElementById('reset-btn').addEventListener('click', () => location.reload());
 
     function createBoard() {
+      // Inject 3 rows x 5 cols of value cards
       for (let row = 0; row < 3; row++) {
         for (let col = 0; col < 5; col++) {
           const card = document.createElement("div");
@@ -191,6 +339,7 @@
           board.appendChild(card);
         }
       }
+      // Reveal after injection to avoid flash
       document.querySelector('.stage').style.visibility = 'visible';
     }
 
@@ -210,8 +359,7 @@
       const ring = document.createElement("div");
       ring.className = "flash-ring";
       card.appendChild(ring);
-      ddAudio.currentTime = 0;
-      ddAudio.play().catch(()=>{});
+      if (ddAudio) { try { ddAudio.currentTime = 0; ddAudio.play().catch(()=>{}); } catch(e){} }
       ddOverlay.classList.add('active');
       ddOverlay.style.display = "flex";
       setTimeout(() => {
@@ -225,6 +373,7 @@
     function showQuestion(categoryIndex, difficulty, card, isDailyDouble){
       const q = questions[categoryIndex][difficulty];
       const options = q.a.map((text, origIdx) => ({ text, origIdx }));
+      // Shuffle choices so the correct answer position is random each time
       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]];
@@ -232,6 +381,7 @@
       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}
@@ -243,6 +393,7 @@
           ).join("")}
         </div>
       `;
+
       card.classList.add("disabled");
       document.querySelectorAll('.answer-btn').forEach(btn => {
         btn.addEventListener('click', () => {
@@ -260,9 +411,11 @@
       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>`;
@@ -280,6 +433,7 @@
           correctAnswer: correctText
         });
       }
+
       sdisp.textContent = `Score: ${score}`;
       if (++answered === total) endGame();
     }
@@ -302,6 +456,7 @@
       }
     }
 
+    // Build board on load
     createBoard();
   </script>
 </body>