<<set $score = 0>>
<<set $attempts = 0>>
<<set $username = "">>
<span style="font-size: 2.0rem; font-weight: 700;">Welcome to the Office Safety Interactive Game</span>
<span style="font-size: 1.2rem; font-weight: 400;">Navigate the dangers of a burning office and test your safety skills.</span>
<p>What’s your name?</p><<textbox "$username" ""style="color: black;">>
<<button "Start Game">>
<<script>>
if (State.variables.username.trim().length >= 2) {
Engine.play("Fire Outbreak");
} else {
showNameError();
}
<</script>>
<</button>>
<script>
function showNameError() {
const notice = document.createElement("div");
notice.textContent = "Please enter a name with at least 2 characters!";
notice.style.position = "fixed"; notice.style.top = "-100px";
notice.style.left = "50%"; notice.style.transform = "translateX(-50%)";
notice.style.background = "rgba(255, 0, 0, 0.9)"; notice.style.color = "white";
notice.style.padding = "15px 25px"; notice.style.borderRadius = "10px";
notice.style.fontWeight = "bold"; notice.style.fontSize = "18px";
notice.style.zIndex = "1000";
notice.style.boxShadow = "0 4px 10px rgba(0, 0, 0, 0.3)";
notice.style.transition = "top 0.6s ease, opacity 0.6s ease";
document.body.appendChild(notice);
setTimeout(() => {notice.style.top = "80px";}, 50);
setTimeout(() => {notice.style.opacity = "0";}, 2000);
setTimeout(() => {notice.remove();}, 3000);}
function showEnterError() {
const notice = document.createElement("div");
notice.textContent = "Please, click on the Start Game button below!";
notice.style.position = "fixed";
notice.style.top = "-100px"; notice.style.left = "50%";
notice.style.transform = "translateX(-50%)";
notice.style.background = "rgba(255, 0, 0, 0.9)"; notice.style.color = "white";
notice.style.padding = "15px 25px"; notice.style.borderRadius = "10px";
notice.style.fontWeight = "bold"; notice.style.fontSize = "18px";
notice.style.zIndex = "1000";
notice.style.boxShadow = "0 4px 10px rgba(0, 0, 0, 0.3)";
notice.style.transition = "top 0.6s ease, opacity 0.6s ease";
document.body.appendChild(notice);
setTimeout(() => {notice.style.top = "80px";}, 50);
setTimeout(() => {notice.style.opacity = "0";}, 2000);
setTimeout(() => {notice.remove();}, 3000);}
// Bind Enter key listener after textbox renders
setTimeout(() => {
const input = document.querySelector('input[type="text"]');
if (input) {
input.addEventListener("keydown", function (e) {
if (e.key === "Enter") {
const name = input.value.trim();
showEnterError(); // show error but DON'T continue
e.preventDefault(); // prevent default Enter action
}
});
}
}, 50);
</script>
<<cacheaudio "fireAlarm" "https://firesafetygame.netlify.app/audio/emergency_alarm.mp3">>
<<cacheaudio "completeGame" "https://firesafetygame.netlify.app/audio/Completed_song.wav">>
<<cacheaudio "gameOver" "https://firesafetygame.netlify.app/audio/Game_over.wav">>
'''You're working late in the office when the fire alarm suddenly goes off. Smoke is filling the air. What do you do?'''
<<link "Ignore it and continue working">><<goto "Ignore">><</link>>
<<link "Investigate where the smoke is coming from">><<goto "Investigate">><</link>>
<<link "Immediately evacuate the building">><<goto "Evacuate">><</link>>
<<audio "fireAlarm" loop play>>
<<audio "gameOver" stop>><<set $attempts += 1>>
'''You decide to ignore the alarm and continue working. The smoke gets thicker, and you start coughing. Suddenly, flames block the only exit.'''
GAME OVER.
<<link "Try Again">><<goto "Fire Outbreak">><</link>>
<<audio "fireAlarm" stop>>
<<audio "gameOver" play>>
<<set $currentPassageNum += 1>>
'''You walk toward the hallway and see smoke coming from the break room. You have a few choices:'''
<<link "Pull the nearest fire alarm">><<goto "PullAlarm">><</link>>
<<link "Try to put out the fire with an extinguisher">><<goto "UseExtinguisher">><</link>>
<<link "Evacuate immediately">><<goto "Evacuate">><</link>>
<<set $currentPassageNum += 1>>
'''You decide to evacuate immediately. The hallway is smoky, but you can still see.'''
How do you escape?
<<link "Take the elevator">><<goto "Elevator">><</link>>
<<link "Use the emergency stairs">><<goto "Stairs">><</link>>
<<set $score += 5>>
'''You pull the fire alarm, alerting everyone in the building. Now, you must evacuate.'''
<<link "Take the elevator">><<goto "Elevator">><</link>>
<<link "Use the emergency stairs">><<goto "Stairs">><</link>>
<<set $score += 5>>
'''You use the extinguisher to put out the fire, but the large amount of smoke in the building is still harmful to your body.'''
How do you escape the smoke?
<<link "Take the elevator">><<goto "Elevator">><</link>>
<<link "Use the emergency stairs">><<goto "Stairs">><</link>>
<<set $attempts += 1>>
'''You enter the elevator, but as the doors close, the power shuts down! You are trapped inside.'''
GAME OVER.
<<link "Try Again">><<goto "Fire Outbreak">><</link>>
<<audio "fireAlarm" stop>>
<<audio "gameOver" play>>
'''You take the emergency stairs. Smoke is filling the stairwell. What do you do?'''
<<link "Cover your nose and continue down">><<goto "CoverNose">><</link>>
<<link "Turn back and try another route">><<goto "TurnBack">><</link>>
'''You cover your nose with a cloth and continue down the stairs. You see a colleague struggling to move. What do you do?'''
<<link "Leave them and run">><<goto "LeaveColleague">><</link>>
<<link "Help them to the exit">><<goto "HelpColleague">><</link>>
<<set $attempts += 1>>
'''You turn back, but the fire spreads quickly, cutting off your escape route.'''
GAME OVER.
<<link "Try Again">><<goto "Fire Outbreak">><</link>>
<<audio "fireAlarm" stop>>
<<audio "gameOver" play>><<set $attempts += 1>>
'''You leave your colleague behind and escape alone. Later, you learn they didn’t make it.'''
GAME OVER.
<<link "Try Again">><<goto "Fire Outbreak">><</link>>
<<audio "fireAlarm" stop>>
<<audio "gameOver" play>>'''You help your colleague down the stairs. You both reach the ground floor, but the exit is blocked. What do you do?'''
<<link "Try to break a window">><<goto "BreakWindow">><</link>>
<<link "Look for another emergency exit">><<goto "EmergencyExit">><</link>>
<<set $attempts += 1>>
'''You try to break a window, but it takes time. The fire spreads rapidly.'''
GAME OVER.
<<link "Try Again">><<goto "Fire Outbreak">><</link>>
<<audio "fireAlarm" stop>>
<<audio "gameOver" play>><<set $score += 10>>
<<set $attempts += 1>>
'''Congratulations, $username! You made the right choices and survived the fire.'''
Your final score: <<print $score>>
Total attempts: <<print $attempts>>
<<script>>
console.log("📡 Sending data to Google Sheets via SheetDB...");
fetch("https://sheetdb.io/api/v1/blv7aasim3wjc", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
data: {
Username: State.variables.username || "Unknown Player", // 🛠️ Ensure uppercase "Username"
Attempts: State.variables.attempts || 1, // 🛠️ Ensure uppercase "Attempts"
Score: State.variables.score || 0, // 🛠️ Ensure uppercase "Score"
}
})
})
.then(response => response.json())
.then(data => {
console.log("✅ Data sent successfully:", data);
})
.catch(error => {
console.error("❌ Error sending data:", error);
});
<</script>>
<<link "View Leaderboard">><<goto "Leaderboard">><</link>>
<<audio "fireAlarm" stop>>
<<audio "completeGame" loop play>><h2 class="leaderboard-title">Leaderboard</h2>
<div class="leaderboard-container">
<table class="leaderboard-table">
<thead id="leaderboard-head">
<tr id="leaderboard-columns">
<th>#</th>
<th>Username</th>
<th>Score</th>
<th>Attempts</th>
</tr>
</thead>
<tbody id="leaderboard">
<tr>
<td colspan="4" id="loading-message">Loading leaderboard...</td>
</tr>
</tbody>
</table>
</div>
<p id="last-updated">Last updated: Never</p>
<script>
console.log("📡 Fetching leaderboard...");
const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vT7_0mdVjuTF-sqqyWUPgRmEeoxwzbXIua1zeKgQvlDxuaFBR_8UKkp7ioTmUSHHp1rVRLtCGBOzKcM/pub?output=csv";
let firstFetchComplete = false;
// ✅ Fetch immediately on load
fetchLeaderboard(true);
// ⏱️ Backup fetch after 10s if first failed
setTimeout(() => {
if (!firstFetchComplete) {
console.log("🔄 Backup fetch triggered...");
fetchLeaderboard(false);
}
}, 10000);
// 🔄 Auto-refresh every 30 seconds
setInterval(() => {
console.log("🔄 Auto-refreshing leaderboard...");
fetchLeaderboard(false);
}, 10000);
function fetchLeaderboard(isFirstFetch) {
console.log(`⏳ Fetching leaderboard... (First fetch: ${isFirstFetch})`);
fetch(sheetURL + "&_=" + new Date().getTime())
.then(response => response.text())
.then(csv => {
console.log("✅ Data received from Google Sheets!");
let rows = csv.trim().split("\n").map(row => row.split(",").map(cell => cell.trim()));
if (rows.length < 2) {
console.warn("⚠️ No valid data.");
document.getElementById("leaderboard").innerHTML = "<tr><td colspan='4'>No data available.</td></tr>";
return;
}
let leaderboardData = rows.slice(1)
.map(row => row.slice(0, 3))
.filter(row => row.every(cell => cell !== ""));
leaderboardData.sort((a, b) => {
let scoreA = parseInt(a[1]) || 0;
let scoreB = parseInt(b[1]) || 0;
let attemptsA = parseInt(a[2]) || 0;
let attemptsB = parseInt(b[2]) || 0;
if (scoreB !== scoreA) return scoreB - scoreA;
return attemptsA - attemptsB;
});
leaderboardData = leaderboardData.slice(0, 40); // Limit to top 40
let leaderboardHTML = leaderboardData.map((player, index) => {
return `<tr><td>${index + 1}</td><td>${player[0]}</td><td>${player[1]}</td><td>${player[2]}</td></tr>`;
}).join("");
// ✅ Always render immediately now
document.getElementById("leaderboard").innerHTML = leaderboardHTML;
document.getElementById("last-updated").textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
console.log("✅ Leaderboard updated!");
if (isFirstFetch) firstFetchComplete = true;
})
.catch(error => {
console.error("❌ Error fetching leaderboard:", error);
document.getElementById("leaderboard").innerHTML = "<tr><td colspan='4'>Error loading leaderboard.</td></tr>";
});
}
</script>
<p style="background: black; color: white; font-size: 17px; font-weight: bold; text-align: center; padding: 6px; border-radius: 3px; margin-bottom: 10px;">
⚠️ Please use the <strong>Restart</strong> button in the side menu to restart the game properly.
</p>
You were caught in an explosion! Try again.
<<link "Restart">><<goto "Start">><</link>>