|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<title>Express Route Fact or Fiction</title> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" /> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
* { margin: 0; padding: 0; box-sizing: border-box; } |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: linear-gradient(120deg, #ade0f4, #f2cfff); |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: flex-start; |
|
|
padding: 2rem; |
|
|
} |
|
|
h1 { |
|
|
text-align: center; |
|
|
margin-bottom: 0.5rem; |
|
|
color: #333; |
|
|
font-weight: 600; |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
#source-link { |
|
|
text-align: center; |
|
|
margin-bottom: 1.5rem; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
#source-link a { |
|
|
color: #333; |
|
|
text-decoration: underline; |
|
|
} |
|
|
#game-container { |
|
|
background: #ffffffcc; |
|
|
width: 100%; |
|
|
max-width: 700px; |
|
|
padding: 2rem; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
} |
|
|
#statement { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 1rem; |
|
|
min-height: 70px; |
|
|
text-align: center; |
|
|
color: #444; |
|
|
} |
|
|
.btn-group { |
|
|
margin: 1rem 0; |
|
|
} |
|
|
button { |
|
|
margin: 0.5rem; |
|
|
padding: 0.75rem 1.5rem; |
|
|
font-size: 1rem; |
|
|
cursor: pointer; |
|
|
border: none; |
|
|
border-radius: 8px; |
|
|
background-color: #3498db; |
|
|
color: #fff; |
|
|
transition: background-color 0.3s ease, transform 0.2s ease; |
|
|
} |
|
|
button:hover { |
|
|
background-color: #2980b9; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
#result { |
|
|
margin-top: 1rem; |
|
|
padding: 1rem; |
|
|
border-radius: 4px; |
|
|
font-weight: 600; |
|
|
text-align: center; |
|
|
width: 100%; |
|
|
display: none; |
|
|
} |
|
|
#result.correct { |
|
|
background-color: #d4edda; |
|
|
color: #155724; |
|
|
} |
|
|
#result.incorrect { |
|
|
background-color: #f8d7da; |
|
|
color: #721c24; |
|
|
} |
|
|
#explanation { |
|
|
margin-top: 0.5rem; |
|
|
padding: 1rem; |
|
|
background-color: #f9f9f9; |
|
|
color: #555; |
|
|
display: none; |
|
|
border-radius: 4px; |
|
|
} |
|
|
.progress-container { |
|
|
width: 100%; |
|
|
background-color: #eeeeee; |
|
|
border-radius: 50px; |
|
|
overflow: hidden; |
|
|
margin: 1rem 0; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 16px; |
|
|
background-color: #3498db; |
|
|
width: 0%; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
#score { |
|
|
margin-top: 1rem; |
|
|
font-weight: 600; |
|
|
color: #333; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>Express Route Fact or Fiction</h1> |
|
|
<div id="source-link"> |
|
|
Source: <a href="https://learn.microsoft.com/en-us/azure/expressroute/expressroute-introduction" target="_blank">Azure ExpressRoute Introduction</a> |
|
|
</div> |
|
|
<div id="game-container"> |
|
|
<div class="progress-container"><div class="progress-bar" id="progress-bar"></div></div> |
|
|
<div id="statement">Loading statement...</div> |
|
|
<div class="btn-group"> |
|
|
<button onclick="guessFact()">Fact</button> |
|
|
<button onclick="guessFiction()">Fiction</button> |
|
|
</div> |
|
|
<div id="result"></div> |
|
|
<div id="explanation"></div> |
|
|
<button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button> |
|
|
<button id="restart-btn" style="display:none;" onclick="startGame()">Restart</button> |
|
|
<div id="score"></div> |
|
|
</div> |
|
|
<script> |
|
|
const statements = [ |
|
|
{ text: "ExpressRoute provides a private, high‑speed connection that doesn’t traverse the public Internet.", isFact: true, explanation: "Fact! ExpressRoute enables private connectivity, bypassing public Internet traffic." }, |
|
|
{ text: "ExpressRoute circuits require HTTP over TLS to connect on‑premises networks to Azure.", isFact: false, explanation: "Fiction! ExpressRoute uses BGP and private connections, not HTTPS." }, |
|
|
{ text: "ExpressRoute supports multiple peering models including private, Microsoft, and public peering.", isFact: true, explanation: "Fact! It supports multiple routing models for different services and requirements." }, |
|
|
{ text: "All data including DNS queries and CDN traffic automatically goes through the ExpressRoute circuit.", isFact: false, explanation: "Fiction! Some traffic still uses the public Internet unless explicitly routed." }, |
|
|
{ text: "ExpressRoute connections offer more reliability, faster speeds, and lower latency compared to typical Internet.", isFact: true, explanation: "Fact! That's one of the main advantages of using ExpressRoute." }, |
|
|
{ text: "ExpressRoute is a type of VPN that encrypts traffic over the Internet.", isFact: false, explanation: "Fiction! It's a dedicated connection, not an encrypted VPN over public networks." }, |
|
|
{ text: "ExpressRoute Direct allows you to connect directly into Microsoft’s global network with 10 Gbps or 100 Gbps ports.", isFact: true, explanation: "Fact! High bandwidth connectivity is available via ExpressRoute Direct." }, |
|
|
{ text: "You must use the public Internet for ExpressRoute because private peerings aren't supported.", isFact: false, explanation: "Fiction! The entire point of ExpressRoute is private peering." }, |
|
|
{ text: "ExpressRoute provides built-in redundancy at peering locations and connection uptime SLAs.", isFact: true, explanation: "Fact! Microsoft provides SLAs and redundancy at entry points." }, |
|
|
{ text: "ExpressRoute only supports up to 1 Gbps bandwidth and cannot scale higher.", isFact: false, explanation: "Fiction! It supports much higher—up to 100 Gbps and beyond." } |
|
|
]; |
|
|
|
|
|
let currentIndex = 0, score = 0, answered = false; |
|
|
|
|
|
function shuffle(arr) { |
|
|
for (let i = arr.length - 1; i > 0; i--) { |
|
|
const j = Math.floor(Math.random() * (i + 1)); |
|
|
[arr[i], arr[j]] = [arr[j], arr[i]]; |
|
|
} |
|
|
} |
|
|
|
|
|
function startGame() { |
|
|
shuffle(statements); |
|
|
currentIndex = 0; |
|
|
score = 0; |
|
|
answered = false; |
|
|
document.getElementById('restart-btn').style.display = 'none'; |
|
|
loadStatement(); |
|
|
updateScore(); |
|
|
} |
|
|
|
|
|
function loadStatement() { |
|
|
if (currentIndex >= statements.length) { |
|
|
endGame(); |
|
|
return; |
|
|
} |
|
|
const s = statements[currentIndex]; |
|
|
document.getElementById('statement').textContent = s.text; |
|
|
document.getElementById('result').style.display = 'none'; |
|
|
document.getElementById('explanation').style.display = 'none'; |
|
|
document.getElementById('next-btn').style.display = 'none'; |
|
|
answered = false; |
|
|
updateProgress(); |
|
|
} |
|
|
|
|
|
function guessFact() { |
|
|
if (!answered) checkAnswer(true); |
|
|
} |
|
|
|
|
|
function guessFiction() { |
|
|
if (!answered) checkAnswer(false); |
|
|
} |
|
|
|
|
|
function checkAnswer(guess) { |
|
|
answered = true; |
|
|
const correct = statements[currentIndex].isFact; |
|
|
const resultEl = document.getElementById('result'); |
|
|
if (guess === correct) { |
|
|
resultEl.textContent = 'Correct!'; |
|
|
resultEl.className = 'correct'; |
|
|
score++; |
|
|
} else { |
|
|
resultEl.textContent = 'Incorrect!'; |
|
|
resultEl.className = 'incorrect'; |
|
|
} |
|
|
resultEl.style.display = 'block'; |
|
|
const expEl = document.getElementById('explanation'); |
|
|
expEl.textContent = statements[currentIndex].explanation; |
|
|
expEl.style.display = 'block'; |
|
|
document.getElementById('next-btn').style.display = 'inline-block'; |
|
|
updateScore(); |
|
|
} |
|
|
|
|
|
function nextStatement() { |
|
|
currentIndex++; |
|
|
loadStatement(); |
|
|
} |
|
|
|
|
|
function updateScore() { |
|
|
document.getElementById('score').textContent = 'Score: ' + score + ' / ' + statements.length; |
|
|
} |
|
|
|
|
|
function updateProgress() { |
|
|
document.getElementById('progress-bar').style.width = (currentIndex / statements.length) * 100 + '%'; |
|
|
} |
|
|
|
|
|
function endGame() { |
|
|
const pct = Math.round((score / statements.length) * 100); |
|
|
document.getElementById('statement').textContent = 'Game Over! You scored ' + score + ' out of ' + statements.length + ' (' + pct + '%).'; |
|
|
document.getElementById('result').style.display = 'none'; |
|
|
document.getElementById('explanation').style.display = 'none'; |
|
|
document.getElementById('next-btn').style.display = 'none'; |
|
|
document.getElementById('restart-btn').style.display = 'inline-block'; |
|
|
document.getElementById('progress-bar').style.width = '100%'; |
|
|
} |
|
|
|
|
|
startGame(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
