Spaces:

eaglelandsonce
/

Pipeline_Definition_Jeopardy

Running

App Files Files Community

eaglelandsonce commited on Oct 24, 2024

Commit

3667de9

verified ·

1 Parent(s): 55ea64c

Update index.html

Browse files

Files changed (1) hide show

index.html +224 -18

index.html CHANGED Viewed

@@ -1,19 +1,225 @@
-<!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>Azure Pipelines: Pipeline Definitions</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            background-color: #f0f0f0;
+        }
+        h1 {
+            color: #0078D4;
+        }
+        #game-board {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        .card {
+            width: 150px;
+            height: 100px;
+            background-color: #0078D4;
+            color: #ffffff;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            text-align: center;
+        }
+        .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-btn {
+            margin: 5px;
+            padding: 10px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <h1>Pipeline Definitions Quiz</h1>
+    <p><strong>Question Reference:</strong> <a href="https://learn.microsoft.com/en-us/azure/devops/pipelines/yaml-schema/pipeline?view=azure-pipelines" target="_blank">Pipeline Definition Documentation</a></p>
+    <div id="game-board"></div>
+    <div id="question-display"></div>
+    <div id="score">Score: 0</div>
+    <script>
+        const categories = ['Pipeline Basics', 'Stages', 'Jobs', 'Steps', 'Triggers'];
+        const questions = [
+            [
+                {
+                    q: "What is the basic unit of a pipeline in Azure Pipelines?",
+                    a: ["Job", "Stage", "Step"],
+                    correct: 1
+                },
+                {
+                    q: "What does a pipeline consist of?",
+                    a: ["Stages and jobs", "Only steps", "Just a random series of scripts"],
+                    correct: 0
+                },
+                {
+                    q: "Can a pipeline run without a stage?",
+                    a: ["No", "Yes", "Only if it skips to jobs"],
+                    correct: 1
+                }
+            ],
+            [
+                {
+                    q: "What are stages in a pipeline?",
+                    a: ["Containers for scripts", "A group of jobs", "An unnecessary complication"],
+                    correct: 1
+                },
+                {
+                    q: "What defines the sequence of stages?",
+                    a: ["Your wishful thinking", "A dependency graph", "Job descriptions"],
+                    correct: 1
+                },
+                {
+                    q: "What is the role of a pool in a stage?",
+                    a: ["To swim?", "Assigns jobs to an agent", "Holds resources"],
+                    correct: 1
+                }
+            ],
+            [
+                {
+                    q: "What is a job in an Azure Pipeline?",
+                    a: ["A single step", "A unit of work assigned to an agent", "Just something that gets done"],
+                    correct: 1
+                },
+                {
+                    q: "How are jobs organized in a pipeline?",
+                    a: ["In a linear series", "Randomly", "In a parallel universe"],
+                    correct: 0
+                },
+                {
+                    q: "What happens if a job fails?",
+                    a: ["The pipeline stops", "Everything explodes", "You try again"],
+                    correct: 0
+                }
+            ],
+            [
+                {
+                    q: "What is a step in a pipeline?",
+                    a: ["A discrete task", "A failed attempt", "An action-packed script"],
+                    correct: 0
+                },
+                {
+                    q: "Can you mix tasks and scripts in steps?",
+                    a: ["Yes, like a good recipe", "No, only tasks", "Scripts only"],
+                    correct: 0
+                },
+                {
+                    q: "What is the smallest unit of execution in a pipeline?",
+                    a: ["A step", "A job", "A pool"],
+                    correct: 0
+                }
+            ],
+            [
+                {
+                    q: "What does a trigger do in a pipeline?",
+                    a: ["Makes sure something happens", "Starts a pipeline run", "Activates the next step"],
+                    correct: 1
+                },
+                {
+                    q: "How do you specify a continuous integration (CI) trigger?",
+                    a: ["Use trigger: none", "Specify branches or events", "Hope for the best"],
+                    correct: 1
+                },
+                {
+                    q: "What is the purpose of the 'trigger' keyword in YAML?",
+                    a: ["To summon agents", "To define CI triggers", "To exclude branches"],
+                    correct: 1
+                }
+            ]
+        ];
+        let score = 0;
+        let timeoutId;
+        const gameBoard = document.getElementById('game-board');
+        const questionDisplay = document.getElementById('question-display');
+        const scoreDisplay = document.getElementById('score');
+        function createBoard() {
+            for (let i = 0; i < 5; i++) {
+                for (let j = 0; j < 3; j++) {
+                    const card = document.createElement('div');
+                    card.className = 'card';
+                    card.textContent = `${categories[i]} $${(j + 1) * 100}`;
+                    card.onclick = () => showQuestion(i, j, card);
+                    gameBoard.appendChild(card);
+                }
+            }
+        }
+        function showQuestion(category, difficulty, cardElement) {
+            if (cardElement.classList.contains('disabled')) return;
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            const question = questions[category][difficulty];
+            let 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>
+                ${answerHtml}
+            `;
+            cardElement.classList.add('disabled');
+            cardElement.style.backgroundColor = '#cccccc';
+            cardElement.style.cursor = 'default';
+        }
+        function checkAnswer(category, difficulty, selectedAnswer) {
+            const buttons = document.querySelectorAll('.answer-btn');
+            buttons.forEach(btn => btn.disabled = true);
+            const question = questions[category][difficulty];
+            const isCorrect = selectedAnswer === question.correct;
+            const value = (difficulty + 1) * 100;
+            if (isCorrect) {
+                score += value;
+                questionDisplay.innerHTML += `<p style="color: green;">Correct! You earned $${value}.</p>`;
+            } else {
+                score -= value;
+                questionDisplay.innerHTML += `<p style="color: red;">Sorry, that's incorrect. You lost $${value}. The correct answer was: ${question.a[question.correct]}</p>`;
+            }
+            scoreDisplay.textContent = `Score: ${score}`;
+            timeoutId = setTimeout(() => {
+                clearQuestion();
+                checkGameCompletion();
+            }, 2000);
+        }
+        function clearQuestion() {
+            questionDisplay.innerHTML = '';
+        }
+        function checkGameCompletion() {
+            const remainingCards = document.querySelectorAll('.card:not(.disabled)');
+            if (remainingCards.length === 0) {
+                questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`;
+            }
+        }
+        createBoard();
+    </script>
+</body>
 </html>