|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
<title>Azure Pipeline Agents 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>Azure Pipeline Agents Jeopardy</h1> |
|
<p> |
|
<strong>Learn More:</strong> |
|
<a |
|
href="https://docs.microsoft.com/azure/devops/pipelines/agents/agents" |
|
target="_blank" |
|
>Azure Pipelines Agents</a |
|
> |
|
</p> |
|
|
|
<div id="game-board"> |
|
|
|
<div class="category">Agent Types</div> |
|
<div class="category">Microsoft-Hosted Agents</div> |
|
<div class="category">Self-Hosted Agents</div> |
|
<div class="category">VM Scale Set Agents</div> |
|
<div class="category">Capabilities</div> |
|
</div> |
|
|
|
<div id="question-display"></div> |
|
<div id="score">Score: 0</div> |
|
|
|
<script> |
|
|
|
const categories = [ |
|
"Agent Types", |
|
"Microsoft-Hosted Agents", |
|
"Self-Hosted Agents", |
|
"VM Scale Set Agents", |
|
"Capabilities" |
|
]; |
|
const questions = [ |
|
|
|
[ |
|
{ |
|
q: "Which type of agent is managed entirely by Microsoft?", |
|
a: ["Self-hosted", "Microsoft-hosted", "VM Scale Set"], |
|
correct: 1 |
|
}, |
|
{ |
|
q: "What is a key feature of self-hosted agents?", |
|
a: ["Automatically updated by Microsoft", "User-managed with persistent caches", "Always use containers"], |
|
correct: 1 |
|
}, |
|
{ |
|
q: "Which agent type scales automatically using Azure Virtual Machine Scale Sets?", |
|
a: ["Microsoft-hosted", "VM Scale Set", "Managed DevOps Pools"], |
|
correct: 1 |
|
} |
|
], |
|
|
|
[ |
|
{ |
|
q: "What happens to a Microsoft-hosted agent after a job is completed?", |
|
a: ["It is reused for the next job", "It is discarded and reset", "It continues running"], |
|
correct: 1 |
|
}, |
|
{ |
|
q: "What is an advantage of Microsoft-hosted agents?", |
|
a: ["No need for maintenance", "Persistent machine caches", "Custom software installation"], |
|
correct: 0 |
|
}, |
|
{ |
|
q: "How can Microsoft-hosted agents run jobs?", |
|
a: ["Directly on the VM or in a container", "Only in containers", "Only on physical hardware"], |
|
correct: 0 |
|
} |
|
], |
|
|
|
[ |
|
{ |
|
q: "Which operating systems support self-hosted agents?", |
|
a: ["Windows only", "Linux, macOS, and Windows", "Linux only"], |
|
correct: 1 |
|
}, |
|
{ |
|
q: "What is the primary advantage of self-hosted agents?", |
|
a: ["Greater control over environment", "Automatic updates", "Requires no management"], |
|
correct: 0 |
|
}, |
|
{ |
|
q: "What should be avoided when setting up multiple self-hosted agents on a single machine?", |
|
a: ["Installing more than one agent", "Persistent caches", "System capability configuration"], |
|
correct: 0 |
|
} |
|
], |
|
|
|
[ |
|
{ |
|
q: "What is a benefit of using VM Scale Set agents?", |
|
a: ["Fully managed by Microsoft", "Autoscaling to meet demands", "No setup required"], |
|
correct: 1 |
|
}, |
|
{ |
|
q: "How do VM Scale Set agents manage scaling?", |
|
a: ["Manually by administrators", "Automatically through Azure Pipelines", "Through user scripts"], |
|
correct: 1 |
|
}, |
|
{ |
|
q: "What must you define when configuring a VM Scale Set agent pool?", |
|
a: ["Number of agents and VM image", "Agent IP addresses", "Host machine hardware"], |
|
correct: 0 |
|
} |
|
], |
|
|
|
[ |
|
{ |
|
q: "What are agent capabilities used for?", |
|
a: ["Storing secrets", "Matching jobs to agents", "Disabling environment variables"], |
|
correct: 1 |
|
}, |
|
{ |
|
q: "What is a system capability?", |
|
a: ["Manually added capability", "Automatically detected capability", "User-defined configuration"], |
|
correct: 1 |
|
}, |
|
{ |
|
q: "What should you do after installing new software on a self-hosted agent?", |
|
a: ["Restart the agent", "Reinstall the agent", "Manually add a capability"], |
|
correct: 0 |
|
} |
|
] |
|
]; |
|
|
|
let score = 0; |
|
let totalCards = 15; |
|
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> |
|
`; |
|
|
|
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; |
|
|
|
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> |
|
|
|
|
