|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Network Watcher</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>Network Watcher</h1> |
|
|
<p><strong>Question Reference:</strong> <a href="https://learn.microsoft.com/en-us/azure/network-watcher/network-watcher-overview" target="_blank">Network Watcher Overview</a></p> |
|
|
<div id="game-board"></div> |
|
|
<div id="question-display"></div> |
|
|
<div id="score">Score: 0</div> |
|
|
|
|
|
<script> |
|
|
const categories = ['Monitoring', 'Diagnostic Tools', 'Traffic', 'Limits', 'Quotas']; |
|
|
const questions = [ |
|
|
[ |
|
|
{ |
|
|
q: "What does Azure Network Watcher provide?", |
|
|
a: ["Web analytics", "Monitoring and diagnostics for IaaS", "PaaS monitoring"], |
|
|
correct: 1 |
|
|
}, |
|
|
{ |
|
|
q: "Which tool offers a visualization of the entire network?", |
|
|
a: ["Connection monitor", "Topology", "NSG diagnostics"], |
|
|
correct: 1 |
|
|
}, |
|
|
{ |
|
|
q: "What does Connection monitor track?", |
|
|
a: ["End-to-end connection performance", "VM performance", "Traffic bandwidth"], |
|
|
correct: 0 |
|
|
} |
|
|
], |
|
|
[ |
|
|
{ |
|
|
q: "Which tool helps diagnose traffic filtering issues at a virtual machine level?", |
|
|
a: ["Packet capture", "IP flow verify", "Next hop"], |
|
|
correct: 1 |
|
|
}, |
|
|
{ |
|
|
q: "What does the Next hop tool detect?", |
|
|
a: ["Traffic logs", "Security rules", "Routing issues"], |
|
|
correct: 2 |
|
|
}, |
|
|
{ |
|
|
q: "What does the VPN troubleshoot tool do?", |
|
|
a: ["Diagnoses virtual network gateways", "Captures packets", "Monitors traffic"], |
|
|
correct: 0 |
|
|
} |
|
|
], |
|
|
[ |
|
|
{ |
|
|
q: "What does Flow logs help log?", |
|
|
a: ["Azure IP traffic", "Diagnostic data", "Application logs"], |
|
|
correct: 0 |
|
|
}, |
|
|
{ |
|
|
q: "When will NSG flow logs be retired?", |
|
|
a: ["June 30, 2025", "September 30, 2027", "March 31, 2026"], |
|
|
correct: 1 |
|
|
}, |
|
|
{ |
|
|
q: "What feature helps visualize flow logs data?", |
|
|
a: ["Connection monitor", "Packet capture", "Traffic analytics"], |
|
|
correct: 2 |
|
|
} |
|
|
], |
|
|
[ |
|
|
{ |
|
|
q: "How many Network Watcher instances are allowed per region per subscription?", |
|
|
a: ["1", "5", "10"], |
|
|
correct: 0 |
|
|
}, |
|
|
{ |
|
|
q: "What is the limit on packet capture sessions per region per subscription?", |
|
|
a: ["5000", "10000", "15000"], |
|
|
correct: 1 |
|
|
}, |
|
|
{ |
|
|
q: "How many VPN troubleshoot operations can you perform simultaneously?", |
|
|
a: ["1", "2", "Unlimited"], |
|
|
correct: 0 |
|
|
} |
|
|
], |
|
|
[ |
|
|
{ |
|
|
q: "Where can you view a summary of network resource usage?", |
|
|
a: ["Traffic logs", "Usage + quotas", "Topology"], |
|
|
correct: 1 |
|
|
}, |
|
|
{ |
|
|
q: "What limits the number of resources you can create in Azure?", |
|
|
a: ["Subscription region limits", "Resource groups", "Virtual networks"], |
|
|
correct: 0 |
|
|
}, |
|
|
{ |
|
|
q: "How many connection monitors can you have per region per subscription?", |
|
|
a: ["50", "75", "100"], |
|
|
correct: 2 |
|
|
} |
|
|
] |
|
|
]; |
|
|
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> |
|
|
|
