Spaces:

eaglelandsonce
/

Docker_Millionaire

Running

App Files Files Community

eaglelandsonce commited on 23 days ago

Commit

30a7905

verified ·

1 Parent(s): 25562f8

Update index.html

Browse files

Files changed (1) hide show

index.html +348 -18

index.html CHANGED Viewed

@@ -1,19 +1,349 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Concept to Code Millionaire</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6">
+  <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-2xl">
+    <h1 class="text-4xl font-bold text-indigo-600 text-center mb-2">Concept to Code Millionaire</h1>
+    <p class="text-center text-sm text-gray-500 mb-6">
+      Content source:
+      <a href="https://www.linkedin.com/pulse/docker-from-concept-commands-michael-lively-mndwe/"
+         target="_blank"
+         class="underline hover:text-indigo-700">
+        Docker: From Concept to Commands — Michael Lively (Aug 23, 2025)
+      </a>
+    </p>
+    <div id="board">
+      <div id="question" class="text-2xl font-semibold text-gray-800 mb-4"></div>
+      <div id="choices" class="space-y-3"></div>
+      <div id="lifelines" class="flex justify-around mt-6">
+        <button id="life5050" class="lifeline bg-yellow-400 hover:bg-yellow-500 text-white font-medium py-2 px-4 rounded-lg shadow">
+          50:50
+        </button>
+        <button id="lifePoll" class="lifeline bg-blue-400 hover:bg-blue-500 text-white font-medium py-2 px-4 rounded-lg shadow">
+          Ask the Class
+        </button>
+        <button id="lifeHint" class="lifeline bg-green-400 hover:bg-green-500 text-white font-medium py-2 px-4 rounded-lg shadow">
+          Ask an Expert
+        </button>
+      </div>
+      <div id="poll" class="text-sm text-gray-700 mt-4"></div>
+      <div id="hint" class="text-sm italic text-gray-600 mt-2"></div>
+      <button id="next" class="hidden mt-8 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-6 rounded-lg shadow">
+        Next Question
+      </button>
+    </div>
+  </div>
+  <script>
+    // 15-question set for Concept to Code Millionaire (Docker-focused)
+    const questions = [
+      {
+        q: "What core problem does Docker directly reduce by packaging apps with all dependencies?",
+        choices: [
+          "\"My CPU is too slow\" problem",
+          "\"It works on my machine\" problem",
+          "Vendor lock-in of cloud credits",
+          "I/O bottlenecks from HDDs"
+        ],
+        correct: 1,
+        hint: "The article calls this out explicitly as a dreaded phrase."
+      },
+      {
+        q: "Which single command verifies a fresh Docker install by running a tiny test image?",
+        choices: [
+          "docker info",
+          "docker run hello-world",
+          "docker version",
+          "docker verify install"
+        ],
+        correct: 1,
+        hint: "It both pulls and runs a simple image."
+      },
+      {
+        q: "Which statement best describes a Docker image vs. a container?",
+        choices: [
+          "Image is the running process; container is the template",
+          "Image is a blueprint; container is a running instance",
+          "Both are the same thing",
+          "Container builds images automatically"
+        ],
+        correct: 1,
+        hint: "Blueprint vs. instance."
+      },
+      {
+        q: "Which pairing lists Docker’s foundational components correctly?",
+        choices: [
+          "Daemon (dockerd) and Client (CLI)",
+          "Supervisor and Operator",
+          "Scheduler and Controller",
+          "Planner and Runner"
+        ],
+        correct: 0,
+        hint: "One runs on the host managing objects; one is your command tool."
+      },
+      {
+        q: "On Windows/macOS, which package bundles the daemon, CLI, and helpful tooling?",
+        choices: [
+          "Docker Desktop",
+          "Docker Studio",
+          "Docker Workstation",
+          "Docker Hub Client"
+        ],
+        correct: 0,
+        hint: "It’s the standard local install for devs."
+      },
+      {
+        q: "Which registry is highlighted as the most well-known public repository for images?",
+        choices: [
+          "Artifact Registry",
+          "Docker Hub",
+          "Harbor",
+          "Quay"
+        ],
+        correct: 1,
+        hint: "It’s the default source used by many docker pull commands."
+      },
+      {
+        q: "Which two commands run Nginx locally and map container port 80 to host 8080?",
+        choices: [
+          "docker pull nginx  &&  docker run -d -p 8080:80 nginx",
+          "docker build nginx  &&  docker start -p 8080:80 nginx",
+          "docker fetch nginx  &&  docker exec -p 8080:80 nginx",
+          "docker clone nginx  &&  docker up -p 8080:80"
+        ],
+        correct: 0,
+        hint: "First pull, then run detached with -p host:container."
+      },
+      {
+        q: "In a typical Docker development flow, which file defines how to build your image?",
+        choices: [
+          "compose.yaml",
+          "Dockerfile",
+          "package.json",
+          "Container.toml"
+        ],
+        correct: 1,
+        hint: "It’s a plain text set of build instructions."
+      },
+      {
+        q: "Which docker build/run pair correctly tags and launches an app on port 5000?",
+        choices: [
+          "docker build -t myapp:1.0 .  &&  docker run -d -p 5000:5000 myapp:1.0",
+          "docker build myapp .  &&  docker start -p 5000:5000 myapp",
+          "docker compile -t myapp .  &&  docker exec -p 5000 myapp",
+          "docker make -t myapp .  &&  docker deploy -p 5000 myapp"
+        ],
+        correct: 0,
+        hint: "Tag with -t, then run detached with -p host:container."
+      },
+      {
+        q: "Which command set focuses on day-to-day container lifecycle operations?",
+        choices: [
+          "docker ps, docker stop, docker rm, docker logs",
+          "docker get, docker halt, docker purge, docker read",
+          "docker view, docker end, docker delete, docker cat",
+          "docker list, docker kill, docker trash, docker echo"
+        ],
+        correct: 0,
+        hint: "These are the canonical verbs shown in the article."
+      },
+      {
+        q: "What’s a recommended practice for keeping images small and efficient?",
+        choices: [
+          "Install all dev tools into the final image",
+          "Use multi-stage builds and small base images (e.g., alpine)",
+          "Bundle multiple apps in one container",
+          "Avoid .dockerignore to include everything"
+        ],
+        correct: 1,
+        hint: "Less is more—stage builds and tiny bases."
+      },
+      {
+        q: "Which command safely reclaims disk by removing all unused images?",
+        choices: [
+          "docker image prune -a",
+          "docker images --rm all",
+          "docker clean images",
+          "docker rmi --unused"
+        ],
+        correct: 0,
+        hint: "Prune is the keyword."
+      },
+      {
+        q: "What’s the simplest way to cluster Docker for small projects using built-in tooling?",
+        choices: [
+          "Enable Swarm with docker swarm init",
+          "Install Kubernetes the hard way",
+          "Write a custom scheduler",
+          "Use a systemd unit file"
+        ],
+        correct: 0,
+        hint: "Built into Docker itself."
+      },
+      {
+        q: "Which statement best captures Swarm vs. Kubernetes in the article?",
+        choices: [
+          "Swarm is feature-richer than Kubernetes for enterprises",
+          "Kubernetes is the de facto standard for large-scale orchestration",
+          "Both are equally adopted in production",
+          "Swarm has a larger ecosystem than Kubernetes"
+        ],
+        correct: 1,
+        hint: "Think industry adoption and ecosystem."
+      },
+      {
+        q: "Which Kubernetes command sequence mirrors the article’s quick start?",
+        choices: [
+          "minikube start  →  kubectl create deployment nginx --image=nginx  →  kubectl expose deployment nginx --port=80 --type=NodePort",
+          "kubeadm up  →  kctl make deploy nginx  →  kctl service open 80",
+          "kubestart  →  kubectl add nginx  →  kubectl publish 80",
+          "kind boot  →  kubectl run nginx --image=nginx  →  kubectl open service 80"
+        ],
+        correct: 0,
+        hint: "Minikube, create deployment, then expose with NodePort."
+      }
+    ];
+    const prizes = [100,200,300,500,1000,2000,4000,8000,16000,32000,64000,125000,250000,500000,1000000];
+    let idx = 0;
+    let currentPrize = prizes[0];
+    // Evenly distribute correct answers across A–D
+    questions.forEach((q, i) => {
+      const target = i % 4; // 0=A,1=B,2=C,3=D pattern
+      if (q.correct !== target) {
+        [q.choices[target], q.choices[q.correct]] = [q.choices[q.correct], q.choices[target]];
+        q.correct = target;
+      }
+    });
+    const qEl     = document.getElementById('question');
+    const cEl     = document.getElementById('choices');
+    const pollEl  = document.getElementById('poll');
+    const hintEl  = document.getElementById('hint');
+    const nextBtn = document.getElementById('next');
+    const boardEl = document.getElementById('board');
+    function updateQuestionDisplay() {
+      qEl.textContent = `$${currentPrize}: ${questions[idx].q}`;
+    }
+    function showQuestion() {
+      ['life5050','lifePoll','lifeHint'].forEach(id => {
+        const btn = document.getElementById(id);
+        btn.disabled = false;
+        btn.classList.remove('opacity-50');
+      });
+      pollEl.textContent = '';
+      hintEl.textContent = '';
+      nextBtn.classList.add('hidden');
+      currentPrize = prizes[idx];
+      updateQuestionDisplay();
+      cEl.innerHTML = questions[idx].choices.map((ch,i) =>
+        `<button class="choice bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded w-full" data-i="${i}">
+          ${String.fromCharCode(65+i)}. ${ch}
+        </button>`
+      ).join('');
+      document.querySelectorAll('.choice').forEach(btn => {
+        btn.disabled = false;
+        btn.onclick = selectAnswer;
+      });
+    }
+    function selectAnswer(e) {
+      const chosen = +e.target.dataset.i;
+      const corr = questions[idx].correct;
+      document.querySelectorAll('.choice').forEach(b => b.disabled = true);
+      if (chosen === corr) {
+        e.target.classList.replace('bg-indigo-500','bg-green-500');
+      } else {
+        e.target.classList.replace('bg-indigo-500','bg-red-500');
+        const correctBtn = document.querySelector(\`.choice[data-i="\${corr}"]\`);
+        if (correctBtn) correctBtn.classList.replace('bg-indigo-500','bg-green-500');
+      }
+      nextBtn.classList.remove('hidden');
+    }
+    // 50:50 Lifeline
+    document.getElementById('life5050').onclick = () => {
+      const btn = document.getElementById('life5050');
+      if (btn.disabled) return;
+      btn.disabled = true;
+      btn.classList.add('opacity-50');
+      const corr = questions[idx].correct;
+      questions[idx].choices
+        .map((_, i) => i)
+        .filter(i => i !== corr)
+        .sort(() => Math.random() - 0.5)
+        .slice(0, 2)
+        .forEach(i => {
+          const b = document.querySelector(\`.choice[data-i="\${i}"]\`);
+          if (b) {
+            b.disabled = true;
+            b.classList.add('opacity-50');
+          }
+        });
+      // Halve the current prize when using 50:50, as in classic formats
+      currentPrize = Math.floor(currentPrize / 2);
+      updateQuestionDisplay();
+    };
+    // Ask the Class
+    document.getElementById('lifePoll').onclick = () => {
+      const btn = document.getElementById('lifePoll');
+      if (btn.disabled) return;
+      btn.disabled = true;
+      btn.classList.add('opacity-50');
+      const corr = questions[idx].correct;
+      const pct = [0,0,0,0];
+      pct[corr] = 70 + Math.floor(Math.random() * 21); // 70–90% on correct
+      let rem = 100 - pct[corr];
+      const others = [0,1,2,3].filter(i => i !== corr);
+      others.forEach((i, j) => {
+        const last = j === others.length - 1;
+        const alloc = last ? rem : Math.floor(rem / (others.length - j));
+        pct[i] = alloc;
+        rem -= alloc;
+      });
+      pollEl.textContent = `Class Poll: A:${pct[0]}% B:${pct[1]}% C:${pct[2]}% D:${pct[3]}%`;
+    };
+    // Ask an Expert
+    document.getElementById('lifeHint').onclick = () => {
+      const btn = document.getElementById('lifeHint');
+      if (btn.disabled) return;
+      btn.disabled = true;
+      btn.classList.add('opacity-50');
+      hintEl.textContent = `Expert Hint: ${questions[idx].hint}`;
+    };
+    // Next Question
+    nextBtn.onclick = () => {
+      idx++;
+      if (idx < questions.length) {
+        showQuestion();
+      } else {
+        boardEl.innerHTML = '<div class="text-3xl font-bold text-green-600 text-center">🎉 Congratulations! You’ve mastered Concept to Code Millionaire! 🎉</div>';
+      }
+    };
+    // Start
+    showQuestion();
+  </script>
+</body>
 </html>