Spaces:

eaglelandsonce
/

Branch_Workflows_Jeopardy

Running

App Files Files Community

eaglelandsonce commited on Dec 29, 2024

Commit

fe0e548

verified ·

1 Parent(s): b0d4ddb

Update index.html

Browse files

Files changed (1) hide show

index.html +335 -18

index.html CHANGED Viewed

@@ -1,19 +1,336 @@
-<!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" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Branch Workflows Jeopardy</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      background-color: #f0f0f0;
+      margin: 0;
+    }
+    h1 {
+      color: #0078D4;
+    }
+    #game-board {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      grid-auto-rows: 100px;
+      gap: 2px;
+      margin: 20px 0;
+      background-color: #000;
+      border: 4px solid #000;
+    }
+    .category {
+      background-color: #005a9e;
+      color: #fff;
+      font-weight: bold;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      font-size: 18px;
+      border: 1px solid #000;
+    }
+    .card {
+      background-color: #0078D4;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 16px;
+      font-weight: bold;
+      cursor: pointer;
+      border: 1px solid #000;
+      text-align: center;
+      transition: background-color 0.3s;
+    }
+    .card:hover {
+      background-color: #005a9e;
+    }
+    .card.disabled {
+      background-color: #cccccc;
+      cursor: default;
+    }
+    #question-display {
+      width: 80%;
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    #score {
+      font-size: 24px;
+      font-weight: bold;
+      color: #0078D4;
+    }
+    .answer-container {
+      display: flex;
+      justify-content: center;
+      margin-top: 20px;
+    }
+    .answer-btn {
+      margin: 5px;
+      padding: 10px 15px;
+      font-size: 18px;
+      cursor: pointer;
+      text-align: center;
+      border: 2px solid #005a9e;
+      border-radius: 5px;
+      background-color: #0078D4;
+      color: #fff;
+      font-weight: bold;
+      transition: background-color 0.3s, color 0.3s;
+    }
+    .answer-btn:hover {
+      background-color: #005a9e;
+      color: #f0f0f0;
+    }
+    .answer-btn.disabled {
+      background-color: #cccccc;
+      color: #666;
+      cursor: not-allowed;
+    }
+    .feedback {
+      margin-top: 10px;
+      font-size: 18px;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <h1>Branch Workflows Jeopardy</h1>
+  <p>
+    <strong>Learn More:</strong>
+    <a
+      href="https://learn.microsoft.com/en-us/training/modules/manage-git-branches-workflows/"
+      target="_blank"
+      >Branch Workflows</a
+    >
+  </p>
+  <div id="game-board">
+    <!-- Categories -->
+    <div class="category">Common Workflows</div>
+    <div class="category">Trunk-Based Dev</div>
+    <div class="category">Feature Branch</div>
+    <div class="category">Release Branch</div>
+    <div class="category">Forking</div>
+  </div>
+  <div id="question-display"></div>
+  <div id="score">Score: 0</div>
+  <script>
+    // 5 categories, each with 3 questions = 15 total
+    const categories = [
+      "Common Workflows",
+      "Trunk-Based Dev",
+      "Feature Branch",
+      "Release Branch",
+      "Forking"
+    ];
+    const questions = [
+      // Common Workflows (index 0)
+      [
+        {
+          q: "Which workflow is an extension of the Centralized Workflow, emphasizing continuous integration in the main branch?",
+          a: ["Trunk-based development", "Release branch workflow", "GitHub flow"],
+          correct: 0
+        },
+        {
+          q: "Which workflow uses a dedicated branch created from the main branch to stabilize code for final testing before deploying to production?",
+          a: ["Trunk-based development", "Release branch workflow", "Forking workflow"],
+          correct: 1
+        },
+        {
+          q: "Which workflow is often used in open-source projects, giving each developer their own server-side repository?",
+          a: ["Trunk-based development", "Feature branch workflow", "Forking workflow"],
+          correct: 2
+        }
+      ],
+      // Trunk-Based Dev (index 1)
+      [
+        {
+          q: "In trunk-based development, which branch do developers frequently commit small, incremental changes to?",
+          a: ["Main branch (trunk)", "Multiple long-lived branches", "Ephemeral patches"],
+          correct: 0
+        },
+        {
+          q: "Which practice is crucial for maintaining code quality and stability in trunk-based development?",
+          a: ["Ignoring code review", "Frequent merges without tests", "Continuous integration & automated testing"],
+          correct: 2
+        },
+        {
+          q: "What is the primary advantage of trunk-based development?",
+          a: [
+            "It fosters large merge conflicts",
+            "It emphasizes continuous integration with minimal branching",
+            "It requires no commit messages"
+          ],
+          correct: 1
+        }
+      ],
+      // Feature Branch (index 2)
+      [
+        {
+          q: "What does the feature branch workflow emphasize about each new feature or change?",
+          a: [
+            "They stay in the main branch",
+            "They are developed in a dedicated branch",
+            "They are tested only after merging with main"
+          ],
+          correct: 1
+        },
+        {
+          q: "Which advantage does the feature branch workflow provide?",
+          a: [
+            "Multiple developers can break main easily",
+            "Merges happen automatically without review",
+            "Parallel development of multiple features plus code review"
+          ],
+          correct: 2
+        },
+        {
+          q: "Which Git concept is recommended to gather feedback or suggestions on feature branches?",
+          a: ["Push to production", "Pull requests", "Direct commits to main"],
+          correct: 1
+        }
+      ],
+      // Release Branch (index 3)
+      [
+        {
+          q: "When a dedicated branch is created from the main branch for release activities, it is typically known as what?",
+          a: ["Trunk branch", "Feature branch", "Release branch"],
+          correct: 2
+        },
+        {
+          q: "Which of the following is a benefit of using a Release Branch Workflow?",
+          a: [
+            "Merges code to production without final testing",
+            "Provides a controlled environment for final testing and bug fixes",
+            "Eliminates the need for a stable main branch"
+          ],
+          correct: 1
+        },
+        {
+          q: "After a release branch is ready for production, what typically happens?",
+          a: [
+            "It is discarded without merging",
+            "It is merged back into main (and possibly other branches)",
+            "It is hidden from developers"
+          ],
+          correct: 1
+        }
+      ],
+      // Forking (index 4)
+      [
+        {
+          q: "How does the forking workflow differ from other Git workflows?",
+          a: [
+            "It uses a single centralized repository for all developers",
+            "Every developer has a personal server-side repository",
+            "It eliminates the need for pull requests entirely"
+          ],
+          correct: 1
+        },
+        {
+          q: "Which scenario typically uses the forking workflow?",
+          a: [
+            "Large open-source projects with many contributors",
+            "Small internal teams with direct write access",
+            "Personal hobby projects with no collaboration"
+          ],
+          correct: 0
+        },
+        {
+          q: "What is a key advantage of the forking workflow?",
+          a: [
+            "No merges are ever necessary",
+            "Maintainers can accept commits from any developer without giving direct write access",
+            "It doesn’t rely on version control at all"
+          ],
+          correct: 1
+        }
+      ]
+    ];
+    let score = 0;
+    let totalCards = 15; // 5 categories x 3 questions each
+    let answeredCards = 0;
+    const gameBoard = document.getElementById("game-board");
+    const questionDisplay = document.getElementById("question-display");
+    const scoreDisplay = document.getElementById("score");
+    function createBoard() {
+      for (let row = 0; row < 3; row++) {
+        for (let col = 0; col < 5; col++) {
+          const card = document.createElement("div");
+          card.className = "card";
+          card.textContent = `$${(row + 1) * 100}`;
+          card.onclick = () => showQuestion(col, row, card);
+          gameBoard.appendChild(card);
+        }
+      }
+    }
+    function showQuestion(category, difficulty, cardElement) {
+      if (cardElement.classList.contains("disabled")) return;
+      const question = questions[category][difficulty];
+      const answerHtml = question.a
+        .map(
+          (answer, index) =>
+            `<button class="answer-btn" onclick="checkAnswer(${category}, ${difficulty}, ${index})">${answer}</button>`
+        )
+        .join("");
+      questionDisplay.innerHTML = `
+        <h2>${categories[category]} for $${(difficulty + 1) * 100}</h2>
+        <p>${question.q}</p>
+        <div class="answer-container">${answerHtml}</div>
+      `;
+      // Mark card as disabled
+      cardElement.classList.add("disabled");
+      cardElement.style.backgroundColor = "#cccccc";
+      answeredCards++;
+    }
+    function checkAnswer(category, difficulty, selectedAnswer) {
+      const question = questions[category][difficulty];
+      const correctAnswer = question.a[question.correct];
+      const isCorrect = selectedAnswer === question.correct;
+      const value = (difficulty + 1) * 100;
+      // Disable all answer buttons
+      document.querySelectorAll(".answer-btn").forEach((btn) => {
+        btn.disabled = true;
+        btn.classList.add("disabled");
+      });
+      if (isCorrect) {
+        score += value;
+        questionDisplay.innerHTML += `<p class="feedback" style="color: green;">Correct! You earned $${value}.</p>`;
+      } else {
+        score -= value;
+        questionDisplay.innerHTML += `<p class="feedback" style="color: red;">Wrong! You lost $${value}. The correct answer was: ${correctAnswer}</p>`;
+      }
+      scoreDisplay.textContent = `Score: ${score}`;
+      if (answeredCards === totalCards) {
+        endGame();
+      }
+    }
+    function endGame() {
+      questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;
+    }
+    createBoard();
+  </script>
+</body>
 </html>