|
<!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> |
|
|
