|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Azure ExpressRoute Jeopardy</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: Arial, sans-serif; |
|
|
background-color: #f5f5f5; |
|
|
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 ExpressRoute Jeopardy</h1> |
|
|
<p><strong>Reference:</strong> <a href="https://docs.microsoft.com/azure/expressroute/expressroute-introduction" target="_blank">Azure ExpressRoute Documentation</a></p> |
|
|
<div id="score">Score: $0</div> |
|
|
<div id="game-board"></div> |
|
|
<div id="question"></div> |
|
|
<script> |
|
|
const categories = ['Overview', 'Benefits', 'Connectivity Models', 'Advanced Features']; |
|
|
const questions = [ |
|
|
[ |
|
|
{ q: "What is Azure ExpressRoute?", a: ["A private connection to Microsoft cloud", "A public internet connection", "A database service"], correct: 0 }, |
|
|
{ q: "Which services does ExpressRoute connect to?", a: ["Azure and Microsoft 365", "AWS and GCP", "Datacenters only"], correct: 0 }, |
|
|
{ q: "What is the Microsoft Edge in ExpressRoute?", a: ["The point of entry into Microsoft's network", "A browser tool", "A VPN client"], correct: 0 } |
|
|
], |
|
|
[ |
|
|
{ q: "What kind of routing does ExpressRoute use?", a: ["Dynamic routing via BGP", "Static routing via IP", "Manual routing"], correct: 0 }, |
|
|
{ q: "What benefit does ExpressRoute Premium offer?", a: ["Global connectivity", "Reduced costs", "Higher packet loss"], correct: 0 }, |
|
|
{ q: "What is the QoS feature for?", a: ["Skype for Business", "Email management", "Storage optimization"], correct: 0 } |
|
|
], |
|
|
[ |
|
|
{ q: "What are the connectivity types for ExpressRoute?", a: ["Any-to-any, Point-to-point, Virtual cross-connection", "Direct VPN only", "Public Internet"], correct: 0 }, |
|
|
{ q: "What does ExpressRoute Local enable?", a: ["Cost-effective data transfer near regions", "Global connectivity", "Private IP allocation"], correct: 0 }, |
|
|
{ q: "What does ExpressRoute Global Reach enable?", a: ["Data exchange across on-premises sites", "Direct cloud connections", "Unlimited bandwidth"], correct: 0 } |
|
|
], |
|
|
[ |
|
|
{ q: "What is ExpressRoute Direct?", a: ["Direct connection to Microsoft's global network", "A VPN service", "A backup feature"], correct: 0 }, |
|
|
{ q: "How does ExpressRoute ensure redundancy?", a: ["Two connections to Microsoft Enterprise Edge routers", "Single Ethernet circuit", "Extra public IPs"], correct: 0 }, |
|
|
{ q: "What is the maximum supported bandwidth for ExpressRoute circuits?", a: ["10 Gbps", "2 Gbps", "1 Gbps"], 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> |
|
|
|
|
|
|
