| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>Intro to Containers Fact or Fiction (2025)</title> |
| <link rel="preconnect" href="https://fonts.gstatic.com" /> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet"> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| :root { |
| --bg1:#c9e8ff; --bg2:#fde2ff; --ink:#222; --ink-sub:#555; |
| --brand:#2563eb; --brand-2:#22c55e; --good:#16a34a; --bad:#dc2626; |
| --card:#ffffffcc; |
| } |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: radial-gradient(1200px 600px at 20% 0%, var(--bg1), transparent 60%), |
| radial-gradient(1200px 600px at 80% 0%, var(--bg2), transparent 60%), |
| #f6f7fb; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: flex-start; |
| padding: 2rem 1rem; |
| color: var(--ink); |
| } |
| h1 { text-align: center; margin-bottom: .25rem; font-weight: 600; font-size: 2.2rem; } |
| #subtitle { text-align:center; margin-bottom:1rem; color: var(--ink-sub); } |
| #source-link { text-align: center; margin-bottom: 1.25rem; font-size: .95rem; } |
| #source-link a { color: var(--ink); text-decoration: underline; } |
| #game-container { |
| background: var(--card); |
| width: 100%; max-width: 820px; |
| padding: 2rem; border-radius: 16px; |
| box-shadow: 0 10px 24px rgba(0,0,0,.15); |
| display: flex; flex-direction: column; align-items: center; |
| } |
| .progress-container { |
| width: 100%; background:#ececec; border-radius: 999px; overflow: hidden; margin-bottom: 1rem; |
| } |
| .progress-bar { height: 14px; width:0%; background: linear-gradient(90deg,var(--brand),var(--brand-2)); transition: width .3s ease; } |
| #statement { |
| font-size: 1.25rem; line-height: 1.5; text-align: center; color: #333; |
| min-height: 90px; margin: .75rem 0 1rem; |
| } |
| .btn-group { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin: .25rem 0 1rem; } |
| button { |
| padding: .75rem 1.25rem; border: none; border-radius: 999px; cursor: pointer; |
| background: var(--brand); color: #fff; font-weight: 600; letter-spacing:.2px; |
| transition: transform .15s ease, box-shadow .15s ease, background .2s ease; |
| } |
| button.secondary { background:#111827; } |
| button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.15); } |
| #result { |
| margin-top: .5rem; padding: .75rem 1rem; border-radius: 10px; font-weight: 700; text-align: center; display:none; |
| } |
| #result.correct { display:block; background:#dcfce7; color:#14532d; } |
| #result.incorrect { display:block; background:#fee2e2; color:#7f1d1d; } |
| #explanation { |
| margin-top: .75rem; padding: 1rem; background:#f9fafb; color:#374151; border-radius:12px; display:none; |
| } |
| #score { margin-top: .75rem; font-weight: 700; } |
| #controls { display:flex; gap:.5rem; margin-top:.5rem; } |
| #controls button { background:#0f766e; } |
| #restart-btn { background:#6b21a8; } |
| </style> |
| </head> |
| <body> |
| <h1>Intro to Containers Fact or Fiction</h1> |
| <div id="subtitle">Test your 2025 knowledge of Containers, Docker, and Kubernetes</div> |
| <div id="source-link"> |
| Source: <a href="https://www.linkedin.com/pulse/concept-containers-michael-lively-n1rae/" target="_blank" rel="noopener"> |
| Introduction to Containers, Docker, and Kubernetes (LinkedIn) |
| </a> |
| </div> |
|
|
| <div id="game-container" role="region" aria-label="Fact or Fiction game"> |
| <div class="progress-container" aria-hidden="true"><div class="progress-bar" id="progress-bar"></div></div> |
| <div id="statement" aria-live="polite">Loading statement...</div> |
|
|
| <div class="btn-group"> |
| <button onclick="guess(true)" aria-label="Choose Fact">Fact</button> |
| <button class="secondary" onclick="guess(false)" aria-label="Choose Fiction">Fiction</button> |
| </div> |
|
|
| <div id="result" role="status" aria-live="polite"></div> |
| <div id="explanation"></div> |
|
|
| <div id="controls"> |
| <button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button> |
| <button id="restart-btn" style="display:none;" onclick="startGame()">Restart</button> |
| </div> |
|
|
| <div id="score" aria-live="polite"></div> |
| </div> |
|
|
| <script> |
| |
| const statements = [ |
| |
| { |
| text: "Containers share the host operating system kernel instead of bundling a full guest OS.", |
| isFact: true, |
| explanation: "Fact. Containers virtualize at the OS layer, which keeps them lightweight and fast to start." |
| }, |
| { |
| text: "Docker’s 2013 release popularized containerization by standardizing images and registries for developers.", |
| isFact: true, |
| explanation: "Fact. Docker democratized packaging and distribution via images and registries." |
| }, |
| { |
| text: "Kubernetes (introduced in 2014) is the de facto standard for orchestrating containers at scale.", |
| isFact: true, |
| explanation: "Fact. K8s handles scheduling, scaling, rollouts, and self-healing across clusters." |
| }, |
| { |
| text: "Modern Kubernetes clusters run with OCI-compatible runtimes like containerd or CRI-O, not Docker Engine.", |
| isFact: true, |
| explanation: "Fact. Dockershim was removed; K8s uses CRI runtimes such as containerd/CRI-O." |
| }, |
| { |
| text: "OCI standards improve interoperability for images and artifacts, including SBOMs and signatures.", |
| isFact: true, |
| explanation: "Fact. OCI Image/Artifact specs let registries store images, SBOMs, and signatures consistently." |
| }, |
| { |
| text: "Rootless options like Podman, plus strong policies and signing (e.g., cosign), are common 2025 security practices.", |
| isFact: true, |
| explanation: "Fact. Least privilege, rootless, SBOMs, and signing are part of modern supply-chain security." |
| }, |
| |
| |
| { |
| text: "Containers always include a complete guest operating system, just like virtual machines.", |
| isFact: false, |
| explanation: "Fiction. Containers share the host kernel; VMs package a full OS per instance." |
| }, |
| { |
| text: "Kubernetes is itself a container runtime, so you don’t need containerd or CRI-O anymore.", |
| isFact: false, |
| explanation: "Fiction. Kubernetes is an orchestrator and relies on a CRI-compatible runtime underneath." |
| }, |
| { |
| text: "In 2025, Docker Engine is the default runtime under Kubernetes for production clusters.", |
| isFact: false, |
| explanation: "Fiction. Since the dockershim removal, production K8s uses containerd or CRI-O." |
| }, |
| { |
| text: "OpenTelemetry has fully replaced all observability tools and is already a graduated CNCF project.", |
| isFact: false, |
| explanation: "Fiction. OTel is the de facto standard for telemetry formats, but it has not replaced all tools and has not historically been fully graduated." |
| }, |
| { |
| text: "WebAssembly (Wasm) has completely replaced containers for cloud workloads.", |
| isFact: false, |
| explanation: "Fiction. Wasm is growing and complementary; it hasn’t replaced containers." |
| }, |
| { |
| text: "Containers are a poor fit for hybrid or multi-cloud because they lack portability.", |
| isFact: false, |
| explanation: "Fiction. Portability is one of containers’ biggest strengths across on-prem, cloud, and edge." |
| } |
| ]; |
| |
| |
| let currentIndex = 0, score = 0, answered = false; |
| |
| function shuffle(arr) { |
| for (let i = arr.length - 1; i > 0; i--) { |
| const j = Math.floor(Math.random() * (i + 1)); |
| [arr[i], arr[j]] = [arr[j], arr[i]]; |
| } |
| } |
| |
| function startGame() { |
| shuffle(statements); |
| currentIndex = 0; score = 0; answered = false; |
| document.getElementById('restart-btn').style.display = 'none'; |
| loadStatement(); updateScore(); |
| } |
| |
| function loadStatement() { |
| if (currentIndex >= statements.length) return endGame(); |
| const s = statements[currentIndex]; |
| document.getElementById('statement').textContent = s.text; |
| const resultEl = document.getElementById('result'); |
| resultEl.style.display = 'none'; |
| resultEl.textContent = ''; |
| resultEl.className = ''; |
| document.getElementById('explanation').style.display = 'none'; |
| document.getElementById('next-btn').style.display = 'none'; |
| answered = false; updateProgress(); |
| } |
| |
| function guess(isFactGuess) { |
| if (answered) return; |
| answered = true; |
| const correct = statements[currentIndex].isFact; |
| const resultEl = document.getElementById('result'); |
| |
| if (isFactGuess === correct) { |
| resultEl.textContent = 'Correct!'; |
| resultEl.className = 'correct'; |
| score++; |
| } else { |
| resultEl.textContent = 'Incorrect!'; |
| resultEl.className = 'incorrect'; |
| } |
| resultEl.style.display = 'block'; |
| |
| const expEl = document.getElementById('explanation'); |
| expEl.textContent = statements[currentIndex].explanation + " (See source link above.)"; |
| expEl.style.display = 'block'; |
| document.getElementById('next-btn').style.display = 'inline-block'; |
| updateScore(); |
| } |
| |
| function nextStatement() { |
| currentIndex++; |
| if (currentIndex < statements.length) loadStatement(); |
| else endGame(); |
| } |
| |
| function updateScore() { |
| document.getElementById('score').textContent = `Score: ${score} / ${statements.length}`; |
| } |
| |
| function updateProgress() { |
| const pct = Math.round((currentIndex / statements.length) * 100); |
| document.getElementById('progress-bar').style.width = pct + '%'; |
| } |
| |
| function endGame() { |
| const pct = Math.round((score / statements.length) * 100); |
| document.getElementById('statement').textContent = |
| `Game Over! You scored ${score} of ${statements.length} (${pct}%).`; |
| document.getElementById('result').style.display = 'none'; |
| document.getElementById('explanation').style.display = 'none'; |
| document.getElementById('next-btn').style.display = 'none'; |
| document.getElementById('restart-btn').style.display = 'inline-block'; |
| document.getElementById('progress-bar').style.width = '100%'; |
| } |
| |
| startGame(); |
| </script> |
| </body> |
| </html> |
|
|
