|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Azure Resource Tagging Jeopardy</title> |
|
<style> |
|
body { |
|
font-family: Arial, sans-serif; |
|
background-color: #f9f9f9; |
|
text-align: center; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
h1 { |
|
color: #0078D4; |
|
} |
|
#game-board { |
|
display: grid; |
|
grid-template-columns: repeat(4, 1fr); |
|
gap: 10px; |
|
max-width: 800px; |
|
margin: 20px auto; |
|
} |
|
.card { |
|
background-color: #0078D4; |
|
color: white; |
|
font-size: 16px; |
|
padding: 20px; |
|
text-align: center; |
|
border-radius: 5px; |
|
cursor: pointer; |
|
} |
|
.card.disabled { |
|
background-color: #cccccc; |
|
cursor: not-allowed; |
|
} |
|
#question { |
|
margin: 20px; |
|
} |
|
#score { |
|
font-size: 20px; |
|
font-weight: bold; |
|
margin-bottom: 20px; |
|
} |
|
.answer-btn { |
|
margin: 5px; |
|
padding: 10px; |
|
font-size: 16px; |
|
cursor: pointer; |
|
border: none; |
|
border-radius: 3px; |
|
background-color: #0078D4; |
|
color: white; |
|
} |
|
.answer-btn:hover { |
|
background-color: #005a9e; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Azure Resource Tagging Jeopardy</h1> |
|
<p><strong>Reference:</strong> <a href="https://docs.microsoft.com/azure/cloud-adoption-framework/decision-guides/resource-tagging/" target="_blank">Resource Naming and Tagging Decision Guide</a></p> |
|
<div id="score">Score: $0</div> |
|
<div id="game-board"></div> |
|
<div id="question"></div> |
|
<script> |
|
const categories = ['Tagging Basics', 'Tag Types', 'Tagging Strategies', 'Advanced Tagging']; |
|
const questions = [ |
|
[ |
|
{ q: "What is the purpose of resource tagging?", a: ["Organize and manage resources", "Create policies", "Deploy VMs"], correct: 0 }, |
|
{ q: "What does a tag consist of?", a: ["Key-value pairs", "Resource IDs", "IP addresses"], correct: 0 }, |
|
{ q: "How are tags applied to resources?", a: ["Manually or through policies", "By renaming resources", "Using VM extensions"], correct: 0 } |
|
], |
|
[ |
|
{ q: "What tag type categorizes resources by region?", a: ["Functional", "Accounting", "Purpose"], correct: 0 }, |
|
{ q: "Which tag type aligns resources to business functions?", a: ["Purpose", "Functional", "Classification"], correct: 0 }, |
|
{ q: "What tag type is used for billing purposes?", a: ["Accounting", "Purpose", "Classification"], correct: 0 } |
|
], |
|
[ |
|
{ q: "Why are multiregion tags important?", a: ["They allow aggregation across regions", "They rename resources", "They replace policies"], correct: 0 }, |
|
{ q: "Which tag type is used to classify critical data?", a: ["Classification", "Purpose", "Accounting"], correct: 0 }, |
|
{ q: "What should you consider when creating a tagging strategy?", a: ["Compliance needs", "Resource location", "Both"], correct: 2 } |
|
], |
|
[ |
|
{ q: "What policy ensures consistent tagging?", a: ["Tag enforcement policy", "Resource cleanup policy", "Subscription management policy"], correct: 0 }, |
|
{ q: "Can tags be used across all Azure regions?", a: ["Yes", "No", "Only in some cases"], correct: 0 }, |
|
{ q: "What is an example of a functional tag?", a: ["app=catalogsearch1", "department=finance", "revenueimpact=high"], correct: 0 } |
|
] |
|
]; |
|
|
|
let score = 0; |
|
const board = document.getElementById('game-board'); |
|
const questionDisplay = document.getElementById('question'); |
|
const scoreDisplay = document.getElementById('score'); |
|
|
|
function initializeGame() { |
|
categories.forEach((category, i) => { |
|
questions[i].forEach((_, j) => { |
|
const card = document.createElement('div'); |
|
card.className = 'card'; |
|
card.textContent = `${category} $${(j + 1) * 100}`; |
|
card.onclick = () => showQuestion(i, j, card); |
|
board.appendChild(card); |
|
}); |
|
}); |
|
} |
|
|
|
function showQuestion(categoryIndex, questionIndex, card) { |
|
if (card.classList.contains('disabled')) return; |
|
card.classList.add('disabled'); |
|
card.style.backgroundColor = '#cccccc'; |
|
const question = questions[categoryIndex][questionIndex]; |
|
questionDisplay.innerHTML = ` |
|
<h2>${categories[categoryIndex]} - $${(questionIndex + 1) * 100}</h2> |
|
<p>${question.q}</p> |
|
${question.a.map((answer, i) => `<button class="answer-btn" onclick="checkAnswer(${categoryIndex}, ${questionIndex}, ${i})">${answer}</button>`).join('')} |
|
`; |
|
} |
|
|
|
function checkAnswer(categoryIndex, questionIndex, answerIndex) { |
|
const question = questions[categoryIndex][questionIndex]; |
|
const value = (questionIndex + 1) * 100; |
|
if (answerIndex === question.correct) { |
|
score += value; |
|
questionDisplay.innerHTML += `<p style="color: green;">Correct! You earned $${value}.</p>`; |
|
} else { |
|
score -= value; |
|
questionDisplay.innerHTML += `<p style="color: red;">Incorrect. You lost $${value}. Correct answer: ${question.a[question.correct]}</p>`; |
|
} |
|
scoreDisplay.textContent = `Score: $${score}`; |
|
setTimeout(() => { |
|
questionDisplay.innerHTML = ''; |
|
checkGameOver(); |
|
}, 2000); |
|
} |
|
|
|
function checkGameOver() { |
|
const remainingCards = document.querySelectorAll('.card:not(.disabled)'); |
|
if (remainingCards.length === 0) { |
|
questionDisplay.innerHTML = `<h2>Game Over!</h2><p>Your final score is $${score}.</p>`; |
|
} |
|
} |
|
|
|
initializeGame(); |
|
</script> |
|
</body> |
|
</html> |
|
|
