Spaces:

eaglelandsonce
/

Containers_Fact_or_Fiction

Running

App Files Files Community

eaglelandsonce commited on 16 days ago

Commit

943fc5f

verified ·

1 Parent(s): 99d75e1

Update index.html

Browse files

Files changed (1) hide show

index.html +44 -38

index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>Intro to Containers Fact or Fiction</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" />
@@ -69,23 +69,23 @@
 </head>
 <body>
   <h1>Intro to Containers Fact or Fiction</h1>
-  <div id="subtitle">Test your knowledge of Containers, Docker, and Kubernetes</div>
   <div id="source-link">
     Source: <a href="https://www.linkedin.com/pulse/introduction-containers-docker-kubernetes-michael-lively-5c1be/" target="_blank" rel="noopener">
       Introduction to Containers, Docker, and Kubernetes (LinkedIn)
     </a>
   </div>
-  <div id="game-container">
-    <div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div>
-    <div id="statement">Loading statement...</div>
     <div class="btn-group">
-      <button onclick="guess(true)">Fact</button>
-      <button class="secondary" onclick="guess(false)">Fiction</button>
     </div>
-    <div id="result"></div>
     <div id="explanation"></div>
     <div id="controls">
@@ -93,74 +93,74 @@
       <button id="restart-btn" style="display:none;" onclick="startGame()">Restart</button>
     </div>
-    <div id="score"></div>
   </div>
   <script>
-    // 12 statements (6 Fact, 6 Fiction) derived from your article
     const statements = [
-      // FACTS (6)
       {
-        text: "Containers share the host machine’s kernel instead of bundling a full operating system.",
         isFact: true,
-        explanation: "Fact. Containers virtualize the OS level and share the host kernel, making them lightweight and fast."
       },
       {
-        text: "Docker’s 2013 release popularized containerization by standardizing images and registries.",
         isFact: true,
-        explanation: "Fact. Docker simplified packaging, sharing, and running applications via images and registries."
       },
       {
-        text: "Kubernetes, introduced by Google in 2014, became the de facto standard for container orchestration.",
         isFact: true,
-        explanation: "Fact. Kubernetes handles scheduling, scaling, load balancing, and resilience across clusters."
       },
       {
-        text: "OCI (Open Container Initiative) helps ensure interoperability across container tools and platforms.",
         isFact: true,
-        explanation: "Fact. OCI standards make images and runtimes work consistently across ecosystems."
       },
       {
-        text: "Containers typically start in seconds and are more resource-efficient than VMs.",
         isFact: true,
-        explanation: "Fact. Their smaller footprint and shared kernel enable rapid startup and efficient resource use."
       },
       {
-        text: "Containers are a natural fit for microservices, enabling independent deployment and scaling of services.",
         isFact: true,
-        explanation: "Fact. Each service runs in its own container, improving isolation, agility, and resilience."
       },
-      // FICTIONS (6)
       {
-        text: "Containers always include a full guest operating system, just like virtual machines.",
         isFact: false,
-        explanation: "Fiction. Unlike VMs, containers don’t carry a full OS; they share the host kernel."
       },
       {
-        text: "Containers completely replace virtual machines in every scenario.",
         isFact: false,
-        explanation: "Fiction. They’re complementary: many orgs keep some workloads on VMs and run cloud-native apps in containers."
       },
       {
-        text: "Kubernetes is a container runtime that eliminates the need for Docker or CRI-O.",
         isFact: false,
-        explanation: "Fiction. Kubernetes is an orchestrator; it relies on OCI-compatible runtimes (e.g., containerd, CRI-O)."
       },
       {
-        text: "Containers are poor choices for hybrid or multi-cloud deployments because they lack portability.",
         isFact: false,
-        explanation: "Fiction. Portability is a key benefit—containers run across on-prem, cloud, and edge environments."
       },
       {
-        text: "Observability is optional for containerized systems; tracing and metrics add little value.",
         isFact: false,
-        explanation: "Fiction. Observability is critical; teams use Prometheus, Grafana, and OpenTelemetry to operate at scale."
       },
       {
-        text: "Security tools like Trivy, Aqua, and StackRox are unrelated to containers.",
         isFact: false,
-        explanation: "Fiction. These tools help scan images, enforce policies, and secure containerized workloads."
       }
     ];
@@ -185,7 +185,10 @@
       if (currentIndex >= statements.length) return endGame();
       const s = statements[currentIndex];
       document.getElementById('statement').textContent = s.text;
-      document.getElementById('result').style.display = 'none';
       document.getElementById('explanation').style.display = 'none';
       document.getElementById('next-btn').style.display = 'none';
       answered = false; updateProgress();
@@ -196,6 +199,7 @@
       answered = true;
       const correct = statements[currentIndex].isFact;
       const resultEl = document.getElementById('result');
       if (isFactGuess === correct) {
         resultEl.textContent = 'Correct!';
         resultEl.className = 'correct';
@@ -205,6 +209,7 @@
         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';
@@ -223,7 +228,8 @@
     }
     function updateProgress() {
-      document.getElementById('progress-bar').style.width = `${(currentIndex / statements.length) * 100}%`;
     }
     function endGame() {

 <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" />
 </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/introduction-containers-docker-kubernetes-michael-lively-5c1be/" 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="restart-btn" style="display:none;" onclick="startGame()">Restart</button>
     </div>
+    <div id="score" aria-live="polite"></div>
   </div>
   <script>
+    // 12 statements (6 Fact, 6 Fiction) reflecting 2025 realities
     const statements = [
+      // ===== FACTS (6) =====
       {
+        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."
       },
+      // ===== FICTIONS (6) =====
       {
+        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."
       }
     ];
       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();
       answered = true;
       const correct = statements[currentIndex].isFact;
       const resultEl = document.getElementById('result');
       if (isFactGuess === correct) {
         resultEl.textContent = 'Correct!';
         resultEl.className = 'correct';
         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';
     }
     function updateProgress() {
+      const pct = Math.round((currentIndex / statements.length) * 100);
+      document.getElementById('progress-bar').style.width = pct + '%';
     }
     function endGame() {