Spaces:

eaglelandsonce
/

DevOps_Jeopardy

Running

File size: 18,333 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>DevOps 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 }
    .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{ 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 { 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));
      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>
  <h1>DevOps Jeopardy</h1>
  <a class="source" href="https://www.linkedin.com/pulse/cicd-docker-building-testing-releasing-seamlessly-michael-lively-72fde/" target="_blank">
    Source: CI/CD with Docker — Michael Lively (LinkedIn)
  </a>

  <div class="topbar">
    <div id="score">Score: 0</div>
    <button class="btn-reset" id="reset-btn" title="Start a fresh round">Reset Game</button>
  </div>

  <div class="stage">
    <div id="game-board">
      <div class="category">CI Basics</div>
      <div class="category">Continuous Delivery</div>
      <div class="category">Continuous Deployment</div>
      <div class="category">Docker in CI/CD</div>
      <div class="category">Pipeline & Ops Practices</div>
      <!-- cards injected -->
    </div>
  </div>

  <div id="question-display"></div>
  <div id="review" style="display:none;"></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&nbsp;DOUBLE!</div></div>

  <script>
    const categories = [
      "CI Basics",
      "Continuous Delivery",
      "Continuous Deployment",
      "Docker in CI/CD",
      "Pipeline & Ops Practices"
    ];

    // 15 Qs, correct indices evenly distributed: five 0s, five 1s, five 2s
    const questions = [
      // CI Basics
      [
        { q: "What is the primary goal of Continuous Integration (CI)?", a: [
            "Merge code frequently with automated builds/tests for fast feedback",
            "Only run manual tests before releases",
            "Bundle large features into quarterly merges"
          ], correct: 0 },
        { q: "Why commit to the shared repo several times a day?", a: [
            "To reduce repository size",
            "Keep changes small, easier to review, and less conflict-prone",
            "Because Git requires hourly commits"
          ], correct: 1 },
        { q: "Which event typically triggers the CI pipeline?", a: [
            "End-of-sprint demo",
            "A push/PR to the main repository",
            "Weekly cron job"
          ], correct: 2 }
      ],
      // Continuous Delivery
      [
        { q: "Continuous Delivery ensures what state of the application?", a: [
            "Always packaged and ready for deployment in a staging environment",
            "Only deployable after a manual three-day review",
            "Locked until the next major version"
          ], correct: 0 },
        { q: "A key benefit of Continuous Delivery is:", a: [
            "Bigger, riskier releases",
            "Smaller, frequent increments with simpler release prep",
            "Eliminating automated tests"
          ], correct: 1 },
        { q: "In CD, the final promotion to production is usually:", a: [
            "Randomly scheduled",
            "Blocked until infrastructure is rebuilt",
            "A manual approval or one-click step after staging verification"
          ], correct: 2 }
      ],
      // Continuous Deployment
      [
        { q: "Continuous Deployment differs from Continuous Delivery by:", a: [
            "Automatically deploying to production after passing the pipeline",
            "Removing tests entirely to deploy faster",
            "Requiring multiple human approvals for each release"
          ], correct: 0 },
        { q: "Why does Continuous Deployment reduce risk?", a: [
            "It batches many features into one release",
            "Each release is small, versioned, and rollback is straightforward",
            "It disables monitoring to speed things up"
          ], correct: 1 },
        { q: "A prerequisite for safe Continuous Deployment is:", a: [
            "No staging environment",
            "Skipping integration tests",
            "Robust automated testing and monitoring"
          ], correct: 2 }
      ],
      // Docker in CI/CD
      [
        { q: "How does Docker eliminate 'works on my machine' issues?", a: [
            "Images bundle app + dependencies and run the same everywhere",
            "It rewrites code during deployment",
            "It enforces a single OS for all teams"
          ], correct: 0 },
        { q: "Typical pipeline order with Docker is:", a: [
            "Run container → build image → push repo",
            "Commit code → build/test → package image → push to registry → pull & run",
            "Push to registry → commit code → run container"
          ], correct: 1 },
        { q: "Where are built Docker images commonly stored?", a: [
            "A spreadsheet",
            "A Docker registry like Docker Hub or a private registry",
            "Directly on developer laptops only"
          ], correct: 2 }
      ],
      // Pipeline & Ops Practices
      [
        { q: "Which principle strengthens CI/CD culture?", a: [
            "Automate builds, tests, and deployments",
            "Prefer manual steps for control",
            "Avoid defining 'done' to stay flexible"
          ], correct: 0 },
        { q: "Staging environments should:", a: [
            "Use different configs than production",
            "Mirror production closely to prevent surprises",
            "Be optional for speed"
          ], correct: 1 },
        { q: "Version control for Docker images enables:", a: [
            "No need for tags",
            "Hard-coding servers",
            "Traceable releases and easy rollbacks"
          ], correct: 2 }
      ]
    ];

    let score = 0, answered = 0;
    const total = 15;
    const board = document.getElementById("game-board"),
          qdisp = document.getElementById("question-display"),
          sdisp = document.getElementById("score"),
          review = document.getElementById("review");
    const ddOverlay = document.getElementById("dd-overlay");
    const ddAudio = document.getElementById("dd-audio");

    const shuffleRegistry = new Map();
    const missedQuestions = [];
    const dailyDouble = { col: Math.floor(Math.random() * 5), row: Math.floor(Math.random() * 3) };

    document.getElementById('reset-btn').addEventListener('click', () => location.reload());

    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;
            card.style.setProperty("--ry", `${(x - 0.5) * 10}deg`);
            card.style.setProperty("--rx", `${(0.5 - y) * 10}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];
      const options = q.a.map((text, origIdx) => ({ text, origIdx }));
      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]];
      }
      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}
        <h2>${categories[categoryIndex]} for $${(difficulty + 1) * 100}${isDailyDouble ? " (x2)" : ""}</h2>
        <p>${q.q}</p>
        <div class="answer-container">
          ${options.map((opt, i) =>
            `<button class="answer-btn" data-ans="${i}" data-key="${key}">${opt.text}</button>`
          ).join("")}
        </div>
      `;

      card.classList.add("disabled");

      document.querySelectorAll('.answer-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          if (btn.classList.contains('disabled')) return;
          const chosenIndex = parseInt(btn.getAttribute('data-ans'), 10);
          const k = btn.getAttribute('data-key');
          checkAnswer(categoryIndex, difficulty, chosenIndex, k);
        }, { once: true });
      });
    }

    function checkAnswer(cat, diff, chosenShuffledIndex, key){
      const q = questions[cat][diff];
      const reg = shuffleRegistry.get(key);
      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>`;
      } else {
        score -= val;
        const correctText = q.a[q.correct];
        const chosenBtn = document.querySelector(`.answer-btn[data-ans="${chosenShuffledIndex}"][data-key="${key}"]`);
        const chosenPretty = chosenBtn ? chosenBtn.textContent : "(your choice)";
        qdisp.innerHTML += `<p class="feedback" style="color:#b00020;">❌ Wrong! −$${val.toLocaleString()}<br/>Correct answer: <em>${correctText}</em></p>`;
        missedQuestions.push({
          category: categories[cat],
          value: `$${(diff+1)*100}${reg.isDailyDouble ? " (x2)" : ""}`,
          question: q.q,
          yourAnswer: chosenPretty,
          correctAnswer: correctText
        });
      }
      sdisp.textContent = `Score: ${score}`;
      if (++answered === total) endGame();
    }

    function endGame(){
      qdisp.innerHTML += `<h2 style="margin-top:12px">Game Over!</h2><p>Your final score: $${score.toLocaleString()}</p>`;
      if (missedQuestions.length){
        const items = missedQuestions.map(m =>
          `<div class="missed">
             <div class="q">(${m.category} • ${m.value}) ${m.question}</div>
             <div class="a">Your answer: <em>${m.yourAnswer}</em></div>
             <div class="a">Correct: <strong>${m.correctAnswer}</strong></div>
           </div>`
        ).join("");
        review.style.display = "block";
        review.innerHTML = `<h3>Review: Questions to Revisit (${missedQuestions.length})</h3>${items}`;
      } else {
        review.style.display = "block";
        review.innerHTML = `<h3>Perfect Round!</h3><p>You answered all questions correctly 🎉</p>`;
      }
    }

    createBoard();
  </script>
</body>
</html>