<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Citadel: Akamai Escape Room</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:
wght@400;700&display=swap" rel="stylesheet">
<style>
/* Cloudflare Color Palette */
:root {
--cf-orange: #F38020;
--cf-orange-dark: #D9680C;
--cf-dark-gray: #313131;
--cf-light-gray: #e5e7eb; /* gray-200 */
}
body {
font-family: 'Inter'
, sans-serif;
overflow: hidden;
background-color: #ffffff;
}
.font-orbitron {
font-family: 'Orbitron'
, sans-serif;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.6);
}
.draggable {
cursor: grab;
user-select: none;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.draggable:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.dragging {
opacity: 0.6;
cursor: grabbing;transform: scale(1.05);
}
.drop-zone {
transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.drop-zone-over {
background-color: rgba(243, 128, 32, 0.1);
border-color: var(--cf-orange);
box-shadow: 0 0 15px rgba(243, 128, 32, 0.3);
}
.word-bank-item.used {
opacity: 0.3;
pointer-events: none;
}
.correct-answer {
color: #22c55e; /* green-500 */
font-weight: 700;
}
.incorrect-answer {
color: #ef4444; /* red-500 */
font-weight: 700;
}
/* Shake Animation for incorrect password */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.shake {
animation: shake 0.5s ease-in-out;
}
/* Pulse animation for start button */
@keyframes pulse {
50% {
opacity: .9;
transform: scale(1.05);
}
}
.pulse-animation {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>
</head>
<body class="bg-white text-gray-800 flex items-center justify-center h-screen"><!-- Main Game Container -->
<div id="game-container" class="w-full h-full max-w-7xl mx-auto p-4 md:p-8 flex flex-col">
<!-- Start Screen -->
<div id="start-screen" class="flex flex-col items-center justify-center h-full text-center">
<h1 class="text-5xl md:text-7xl font-orbitron text-[var(--cf-orange)] tracking-widest">THE
CITADEL</h1>
<p class="mt-4 text-lg md:text-xl text-gray-600 max-w-2xl">Welcome to the deal war
room. You have 35 minutes to crack the legacy code, neutralize objections, and assemble the
winning proposal for the Innovate Corp account.
</p>
<button id="start-button" class="mt-8 px-8 py-4 bg-[var(--cf-orange)] text-white font-bold
text-xl rounded-lg shadow-lg hover:bg-[var(--cf-orange-dark)] transition-all transform
hover:scale-105 pulse-animation">
BEGIN MISSION
</button>
</div>
<!-- Main Game Screen (Hidden by default) -->
<div id="game-screen" class="hidden flex-col h-full w-full">
<!-- Header -->
<header class="flex justify-between items-center border-b-2 border-gray-200 pb-4">
<div>
<h1 class="text-3xl font-orbitron text-[var(--cf-orange)]">MISSION: INNOVATE
CORP</h1>
<p id="segment-title" class="text-lg text-gray-500">Segment 1: Deconstructing the
Fortress</p>
</div>
<div class="flex items-center gap-6">
<!-- Cloudflare Logo -->
<svg class="w-28 h-auto" viewBox="0 0 128 43" fill="none"
xmlns="http://www.w3.org/2000/svg"><path d="M127.19
21.38c0-1.57-
.08-3.06-
.23-4.55h-22.3v8.7h12.9c-
.58 3.7-2.83 6.3-6.2 6.3-4.7
0-8.2-3.3-8.2-8s3.5-8 8.2-8c2.1 0 3.8.7 5.1 2l3.4-3.3c-2.3-2.2-5.4-3.6-9-3.6-7.5 0-13.5 6-13.5
13.5s6 13.5 13.5 13.5c7.9 0 13.1-5.7 13.1-13.1zM81.59 28.88c-4.7 0-8-3.3-8-8s3.3-8 8-8 8 3.3
8 8-3.3 8-8 8zm0-13.8c-3 0-4.9 2.1-4.9 5.8s1.9 5.8 4.9 5.8 4.9-2.1
4.9-5.8-1.9-5.8-4.9-5.8zM65.69 28.88c-4.7 0-8-3.3-8-8s3.3-8 8-8 8 3.3 8 8-3.3 8-8
8zm0-13.8c-3 0-4.9 2.1-4.9 5.8s1.9 5.8 4.9 5.8 4.9-2.1 4.9-5.8-1.9-5.8-4.9-5.8zM49.69
28.88c-4.7 0-8-3.3-8-8s3.3-8 8-8 8 3.3 8 8-3.3 8-8 8zm0-13.8c-3 0-4.9 2.1-4.9 5.8s1.9 5.8 4.9
5.8 4.9-2.1 4.9-5.8-1.9-5.8-4.9-5.8zM34.79 13.08h-4.3v15.5h4.3v-15.5zM24.79 28.88c-4.1
0-7-3.1-7-8s2.9-8 7-8c1.9 0 3.6.7 4.8 2l-1.9 1.8c-
.7-
.6-1.5-1-2.9-1-2.3 0-3.9 1.8-3.9 4.2s1.6 4.2
3.9 4.2c2.3 0 3.3-1.6 3.5-2.6h-3.5v-2.7h7.3c.1 1 .1 1.7.1 2.3 0 4.3-2.6 7.1-7.3 7.1zM11.79
28.58c-1.8 0-3.2-1.4-3.2-3.2V13.08h-2.1v-2h2.1v-3.3h4.3v3.3h3v2h-3v11.88c0 .9.4 1.3 1.2
1.3.7 0 1.1-
.2 1.1-
.2l.6 1.9c-
.1.1-1.2.7-2.9.7z" fill="#F38020"/></svg><div class="text-right">
<div class="text-3xl font-orbitron text-red-500" id="overall-timer">35:00</div>
<div class="text-lg text-gray-500">MISSION CLOCK</div>
</div>
</div>
</header>
<!-- Content Area -->
<main id="content-area" class="flex-grow mt-6 relative">
<!-- Segment Timer -->
<div class="absolute top-0 right-0 bg-gray-100 px-4 py-2 rounded-lg">
<span class="text-gray-500">SEGMENT TIME: </span>
<span id="segment-timer" class="text-2xl font-orbitron
text-yellow-500">07:00</span>
</div>
<!-- Segment 1: Deconstructing the Fortress -->
<div id="segment-1" class="h-full flex flex-col items-center justify-center">
<h2 class="text-2xl mb-6">Unlock the encrypted files to reveal the password.
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-4xl">
<!-- File Buttons -->
<div class="flex flex-col items-center">
<button data-file="1" class="file-button bg-gray-50 p-8 rounded-lg border-2
border-gray-200 hover:border-[var(--cf-orange)] transition-all w-full transform
hover:-translate-y-1 shadow-sm hover:shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto
text-[var(--cf-orange)]" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2
2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0
01-2 2z" /></svg>
<span class="mt-4 text-xl font-semibold
text-gray-700">HISTORY.LOG</span>
</button>
<div id="letter-1" class="mt-4 text-5xl font-orbitron text-green-500 h-12"></div>
</div>
<div class="flex flex-col items-center">
<button data-file="2" class="file-button bg-gray-50 p-8 rounded-lg border-2
border-gray-200 hover:border-[var(--cf-orange)] transition-all w-full transform
hover:-translate-y-1 shadow-sm hover:shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto
text-[var(--cf-orange)]" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4
14h7v7l9-11h-7z" /></svg><span class="mt-4 text-xl font-semibold
text-gray-700">GROWTH.DAT</span>
</button>
<div id="letter-2" class="mt-4 text-5xl font-orbitron text-green-500 h-12"></div>
</div>
<div class="flex flex-col items-center">
<button data-file="3" class="file-button bg-gray-50 p-8 rounded-lg border-2
border-gray-200 hover:border-[var(--cf-orange)] transition-all w-full transform
hover:-translate-y-1 shadow-sm hover:shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto
text-[var(--cf-orange)]" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0
00-5.356-1.857M17 20H7m10 0v-2c0-
.656-
.126-1.283-
.356-1.857M7 20H2v-2a3 3 0
015.356-1.857M7 20v-2c0-
.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3
0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
<span class="mt-4 text-xl font-semibold
text-gray-700">STRENGTH.CFG</span>
</button>
<div id="letter-3" class="mt-4 text-5xl font-orbitron text-green-500 h-12"></div>
</div>
</div>
<div class="mt-8 flex items-center gap-4">
<input id="password-1" type="text" placeholder="ENTER PASSWORD"
class="bg-gray-100 border-2 border-gray-300 rounded-lg text-center text-2xl font-orbitron
tracking-widest p-3 w-64 focus:outline-none focus:border-[var(--cf-orange)] uppercase
transition-all text-gray-700">
<button id="submit-password-1" class="px-6 py-3 bg-[var(--cf-orange)] text-white
font-bold rounded-lg hover:bg-[var(--cf-orange-dark)] transition-all transform
hover:scale-105">SUBMIT</button>
</div>
</div>
<!-- Segment 2: Neutralizing the Shields -->
<div id="segment-2" class="hidden h-full flex flex-col md:flex-row items-center
justify-center gap-8">
<div class="w-full md:w-1/2 bg-gray-50 p-6 rounded-lg border border-gray-200">
<h3 class="text-xl font-bold text-yellow-500 mb-2">INCOMING
TRANSMISSION...
</h3>
<h4 class="text-lg font-semibold mb-4 text-gray-700">FROM: CTO, Innovate
Corp.
</h4>
<p class="text-gray-600">"Your team's demo was impressive. However, we have
significant concerns. Firstly, the <span class="text-red-500 font-bold">cost and downtime
associated with migrating our global infrastructure</span> off a platform we've used for a
decade is a major hurdle. Secondly, while your UI is clean, Akamai's platform is a knownquantity. We have concerns about the <span class="text-red-500 font-bold">maturity and
stability of a newer solution</span> to handle our enterprise-level traffic. We need to be
convinced on these points.
"</p>
</div>
<div class="w-full md:w-1/2 flex flex-col gap-6">
<div id="drop-zone-1" data-target="migration" class="drop-zone border-2
border-dashed border-gray-300 p-4 rounded-lg min-h-[120px] flex items-center justify-center">
<h4 class="font-bold text-gray-500">OBJECTION: Migration Costs</h4>
</div>
<div id="drop-zone-2" data-target="maturity" class="drop-zone border-2
border-dashed border-gray-300 p-4 rounded-lg min-h-[120px] flex items-center justify-center">
<h4 class="font-bold text-gray-500">OBJECTION: Platform Maturity</h4>
</div>
<div id="draggable-container" class="mt-4 grid grid-cols-1 gap-4">
<div id="card-maturity" draggable="true" class="draggable bg-white p-4
rounded-lg border border-gray-300 shadow-sm">Showcase wins like <strong
class="text-[var(--cf-orange)]">DigiKey & Citco</strong> to provide social proof of
enterprise-readiness.
</div>
<div id="card-migration" draggable="true" class="draggable bg-white p-4
rounded-lg border border-gray-300 shadow-sm">Highlight our <strong
class="text-[var(--cf-orange)]">white-glove onboarding</strong> and superior pre-sales to
de-risk the transition.
</div>
</div>
</div>
</div>
<!-- Segment 3: Assembling the Winning Proposal -->
<div id="segment-3" class="hidden h-full flex flex-col items-center justify-center">
<div class="w-full max-w-4xl bg-gray-50 p-8 rounded-lg border border-gray-200">
<h2 class="text-2xl font-bold mb-4 text-gray-800">Assemble the Final Proposal
Summary</h2>
<p class="text-gray-600 text-lg leading-relaxed">
We understand the challenges of working with a legacy provider like
<span id="blank-1" class="proposal-blank bg-gray-200 px-2 py-1 rounded-md
text-[var(--cf-orange)] font-bold cursor-pointer">
_______________
</span>
,
whose complexity often requires significant investment in
<span id="blank-2" class="proposal-blank bg-gray-200 px-2 py-1 rounded-md
text-[var(--cf-orange)] font-bold cursor-pointer">
_______________
</span>
.
Our solution provides a powerful alternative, centered on
<span id="blank-3" class="proposal-blank bg-gray-200 px-2 py-1 rounded-md
text-[var(--cf-orange)] font-bold cursor-pointer">
_______________
</span>
for immediate value and a more competitive
<span id="blank-4" class="proposal-blank bg-gray-200 px-2 py-1 rounded-md
text-[var(--cf-orange)] font-bold cursor-pointer">
_______________
</span>
.We will address your concerns about
<span id="blank-5" class="proposal-blank bg-gray-200 px-2 py-1 rounded-md
text-[var(--cf-orange)] font-bold cursor-pointer">
_______________
</span>
head-on with proof from successful enterprise customers like
<span id="blank-6" class="proposal-blank bg-gray-200 px-2 py-1 rounded-md
text-[var(--cf-orange)] font-bold cursor-pointer">
_______________
</span>
and will de-risk the transition with our industry-leading
<span id="blank-7" class="proposal-blank bg-gray-200 px-2 py-1 rounded-md
text-[var(--cf-orange)] font-bold cursor-pointer">
_______________
</span>
.
</p>
</div>
<div class="mt-6 w-full max-w-4xl">
<h3 class="text-xl font-semibold mb-3 text-center text-gray-700">Word
Bank</h3>
<div id="word-bank" class="flex flex-wrap justify-center gap-3">
<!-- Words will be injected by JS -->
</div>
</div>
<button id="submit-proposal" class="mt-8 px-8 py-3 bg-green-600 text-white
font-bold rounded-lg hover:bg-green-500 transition-all transform hover:scale-105">SUBMIT
PROPOSAL</button>
</div>
</main>
</div>
<!-- Debrief Screen -->
<div id="debrief-screen" class="hidden flex-col items-center justify-center h-full
text-center">
<h2 id="debrief-title" class="text-4xl font-orbitron text-yellow-500">INTEL
UNLOCKED</h2>
<div id="debrief-content" class="mt-4 text-lg text-gray-700 max-w-3xl"></div>
<p class="mt-6 text-gray-500">Take this time to discuss with your team. The mission will
resume in:</p>
<div id="debrief-timer" class="mt-2 text-6xl font-orbitron text-yellow-500">05:00</div>
</div>
<!-- End Screen -->
<div id="end-screen" class="hidden flex-col items-center justify-center h-full text-center">
<h1 id="end-title" class="text-6xl font-orbitron text-green-500">DEAL WON!</h1>
<p id="end-message" class="mt-4 text-xl text-gray-700 max-w-2xl">Congratulations! You
successfully navigated the challenges and secured the Innovate Corp account. Your strategic
approach was flawless.
</p><button id="restart-button" class="mt-8 px-8 py-4 bg-[var(--cf-orange)] text-white
font-bold text-xl rounded-lg shadow-lg hover:bg-[var(--cf-orange-dark)] transition-all transform
hover:scale-105">
REPLAY MISSION
</button>
</div>
</div>
<!-- Question Modal -->
<div id="question-modal" class="hidden fixed inset-0 modal-backdrop flex items-center
justify-center p-4">
<div class="bg-white rounded-lg shadow-2xl p-8 w-full max-w-2xl border-2
border-[var(--cf-orange)]">
<h3 id="modal-question" class="text-2xl font-bold mb-6 text-gray-800"></h3>
<div id="modal-options" class="flex flex-col gap-4"></div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded'
, () => {
// --- Sound Effects Engine ---
let audioCtx;
function initAudio() {
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
}
function playSound(type) {
if (!audioCtx) return;
const oscillator = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
gainNode.gain.setValueAtTime(0.1, audioCtx.currentTime);
if (type === 'click') {
oscillator.type = 'triangle';
oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime +
0.2);} else if (type === 'correct') {
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(523.25, audioCtx.currentTime); // C5
setTimeout(() => oscillator.frequency.setValueAtTime(659.25, audioCtx.currentTime
+ 0.1), 100); // E5
gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime +
0.3);
} else if (type === 'error') {
oscillator.type = 'square';
oscillator.frequency.setValueAtTime(220, audioCtx.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime +
0.3);
} else if (type === 'success') {
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(523.25, audioCtx.currentTime); // C5
setTimeout(() => oscillator.frequency.setValueAtTime(659.25, audioCtx.currentTime
+ 0.1), 100); // E5
setTimeout(() => oscillator.frequency.setValueAtTime(783.99, audioCtx.currentTime
+ 0.2), 200); // G5
gainNode.gain.exponentialRampToValueAtTime(0.00001, audioCtx.currentTime +
0.5);
}
oscillator.start(audioCtx.currentTime);
oscillator.stop(audioCtx.currentTime + 0.5);
}
// --- DOM Elements ---
const startScreen = document.getElementById('start-screen');
const gameScreen = document.getElementById('game-screen');
const debriefScreen = document.getElementById('debrief-screen');
const endScreen = document.getElementById('end-screen');
const startButton = document.getElementById('start-button');
const restartButton = document.getElementById('restart-button');
const overallTimerEl = document.getElementById('overall-timer');
const segmentTimerEl = document.getElementById('segment-timer');
const segmentTitleEl = document.getElementById('segment-title');
const segments = {
1: document.getElementById('segment-1'),
2: document.getElementById('segment-2'),
3: document.getElementById('segment-3'),
};// --- Game State ---
let overallTime = 35 * 60; // 35 minutes
let segmentTime = 0;
let overallInterval, segmentInterval;
let currentSegment = 0;
let revealedLetters = [''
''
,
,
''];
let debriefTimerInterval;
const puzzles = {
1: {
questions: {
'1': { question: "Akamai is widely recognized as a pioneer in which core
technology?"
, options: ["Cloud Storage"
,
"Content Delivery Network (CDN)"
,
"Cybersecurity
Mesh"], correct: 1, letter: 'C' },
'2': { question: "Akamai frequently expands its technology stack through what
primary business strategy?"
, options: ["Acquisitions"
,
"Aggressive Marketing"
,
"Open-Source
Projects"], correct: 0, letter: 'A' },
'3': { question: "Akamai often generates significant revenue from hands-on,
consultative engagements known as...
"
, options: ["Customer Support"
"Platform APIs"
,
,
"Professional Services"], correct: 2, letter: 'P' }
},
password: "CAP"
},
2: { correctMatches: 0, totalMatches: 2, code: "FIT" },
3: {
wordBank: ['Akamai'
'Price'
'Ease of Use'
,
,
,
'DigiKey & Citco'
,
'Pre-sales Experience'
,
'Platform Maturity'
,
'Professional Services'],
solution: { 'blank-1': 'Akamai'
'blank-2': 'Professional Services'
,
,
Use'
'blank-4': 'Price'
,
,
'blank-5': 'Platform Maturity'
,
'blank-6': 'DigiKey & Citco'
,
'Pre-sales Experience' }
}
'Migration Costs'
,
'blank-3': 'Ease of
'blank-7':
};
// --- Utility Functions ---
function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = seconds % 60;
return
`${String(mins).padStart(2,
'0')}:${String(secs).padStart(2,
'0')}`
;
}
function showScreen(screen) {
[startScreen, gameScreen, debriefScreen, endScreen].forEach(s =>
s.classList.add('hidden'));screen.classList.remove('hidden');
screen.classList.add('flex');
}
function showSegment(segmentNumber) {
Object.values(segments).forEach(s => s.classList.add('hidden'));
segments[segmentNumber].classList.remove('hidden');
segments[segmentNumber].classList.add('flex');
}
// --- Timer Functions ---
function startOverallTimer() {
overallInterval = setInterval(() => {
overallTime--;
overallTimerEl.textContent = formatTime(overallTime);
if (overallTime <= 0) {
clearInterval(overallInterval);
clearInterval(segmentInterval);
endGame(false);
}
}, 1000);
}
function startSegmentTimer(duration) {
segmentTime = duration;
segmentTimerEl.textContent = formatTime(segmentTime);
clearInterval(segmentInterval);
segmentInterval = setInterval(() => {
segmentTime--;
segmentTimerEl.textContent = formatTime(segmentTime);
if (segmentTime <= 0) {
clearInterval(segmentInterval);
}
}, 1000);
}
// --- Game Flow ---
function startGame() {
initAudio();
playSound('click');
overallTime = 35 * 60;
showScreen(gameScreen);
startOverallTimer();
startSegment(1);}
function startSegment(segmentNumber) {
currentSegment = segmentNumber;
showSegment(segmentNumber);
if (segmentNumber === 1) {
segmentTitleEl.textContent = "Segment 1: Deconstructing the Fortress";
startSegmentTimer(7 * 60);
} else if (segmentNumber === 2) {
segmentTitleEl.textContent = "Segment 2: Neutralizing the Shields";
startSegmentTimer(7 * 60);
} else if (segmentNumber === 3) {
segmentTitleEl.textContent = "Segment 3: Assembling the Proposal";
startSegmentTimer(11 * 60);
setupSegment3();
}
}
function startDebrief(segmentNumber) {
clearInterval(segmentInterval);
showScreen(debriefScreen);
let debriefTime = 5 * 60;
const debriefTimerEl = document.getElementById('debrief-timer');
const debriefTitleEl = document.getElementById('debrief-title');
const debriefContentEl = document.getElementById('debrief-content');
if (segmentNumber === 1) {
playSound('correct');
debriefTitleEl.textContent = "INTEL UNLOCKED: CORE DIFFERENTIATORS";
debriefContentEl.innerHTML =
`<p>Akamai's DNA: A complex giant built on
acquisitions, reliant on paid professional services.
</p><p class="mt-2 font-bold
text-[var(--cf-orange)]">Our primary weapons are: Ease of Use, a superior Pre-sales
Experience, and competitive Price.
</p>`
;
} else if (segmentNumber === 2) {
playSound('correct');
debriefTitleEl.textContent = "SHIELDS NEUTRALIZED: OBJECTION HANDLING";
debriefContentEl.innerHTML =
`<p>You've countered their main fears: Migration
Costs and Platform Maturity.
</p><p class="mt-2 font-bold text-[var(--cf-orange)]">The key is to
demonstrate FIT: both Technical Fit (customer proof) and Emotional Fit (partnership feel).
</p>`
;
}
debriefTimerEl.textContent = formatTime(debriefTime);
debriefTimerInterval = setInterval(() => {
debriefTime--;debriefTimerEl.textContent = formatTime(debriefTime);
if (debriefTime <= 0) {
clearInterval(debriefTimerInterval);
showScreen(gameScreen);
startSegment(currentSegment + 1);
}
}, 1000);
}
function endGame(isWin) {
clearInterval(overallInterval);
clearInterval(segmentInterval);
clearInterval(debriefTimerInterval);
showScreen(endScreen);
const endTitle = document.getElementById('end-title');
const endMessage = document.getElementById('end-message');
if (isWin) {
playSound('success');
endTitle.textContent = "DEAL WON!";
endTitle.classList.remove('text-red-500');
endTitle.classList.add('text-green-500');
endMessage.textContent = "Congratulations! You successfully navigated the
challenges and secured the Innovate Corp account. Your strategic approach was flawless.
";
} else {
playSound('error');
endTitle.textContent = "MISSION FAILED";
endTitle.classList.remove('text-green-500');
endTitle.classList.add('text-red-500');
endMessage.textContent = "Time ran out. The Innovate Corp deal was lost. Review
the intel and try again.
";
}
}
function resetGame() {
playSound('click');
revealedLetters = [''
''
,
,
''];
puzzles[2].correctMatches = 0;
document.querySelectorAll('
.proposal-blank').forEach(b => {
b.textContent = '
';
_______________
b.dataset.word = '';
b.classList.remove('correct-answer'
,
'incorrect-answer');
});
['letter-1'
,
'letter-2'
,
'letter-3'].forEach(id => document.getElementById(id).textContent
= '');document.getElementById('password-1').value = '';
const draggableContainer = document.getElementById('draggable-container');
['card-maturity'
,
'card-migration'].forEach(id => {
const card = document.getElementById(id);
draggableContainer.appendChild(card);
card.style.opacity = 1;
card.draggable = true;
});
startGame();
}
// --- Segment 1 Logic ---
const fileButtons = document.querySelectorAll('
.file-button');
const questionModal = document.getElementById('question-modal');
const modalQuestion = document.getElementById('modal-question');
const modalOptions = document.getElementById('modal-options');
fileButtons.forEach(button => {
button.addEventListener('click'
, () => {
playSound('click');
const fileId = button.dataset.file;
const puzzleData = puzzles[1].questions[fileId];
if (revealedLetters[fileId - 1] !== '') return;
modalQuestion.textContent = puzzleData.question;
modalOptions.innerHTML = '';
puzzleData.options.forEach((option, index) => {
const optionButton = document.createElement('button');
optionButton.textContent = option;
optionButton.className = "w-full text-left p-4 bg-gray-100 rounded-lg
hover:bg-[var(--cf-orange)] hover:text-white transition-all text-gray-700";
optionButton.onclick = () => checkAnswer(fileId, index);
modalOptions.appendChild(optionButton);
});
questionModal.classList.remove('hidden');
});
});
function checkAnswer(fileId, selectedIndex) {
const puzzleData = puzzles[1].questions[fileId];
if (selectedIndex === puzzleData.correct) {
playSound('correct');revealedLetters[fileId - 1] = puzzleData.letter;
document.getElementById(`letter-${fileId}`).textContent = puzzleData.letter;
} else {
playSound('error');
}
questionModal.classList.add('hidden');
}
const passwordInput = document.getElementById('password-1');
const submitPasswordBtn = document.getElementById('submit-password-1');
function submitPassword1() {
if (passwordInput.value.toUpperCase() === puzzles[1].password) {
startDebrief(1);
} else {
playSound('error');
passwordInput.classList.add('shake');
setTimeout(() => passwordInput.classList.remove('shake'), 500);
}
}
submitPasswordBtn.addEventListener('click'
, submitPassword1);
passwordInput.addEventListener('keyup'
, (event) => {
if (event.key === 'Enter') {
submitPassword1();
}
});
// --- Segment 2 Logic ---
const draggables = document.querySelectorAll('
.draggable');
const dropZones = document.querySelectorAll('
.drop-zone');
draggables.forEach(draggable => {
draggable.addEventListener('dragstart'
, () => draggable.classList.add('dragging'));
draggable.addEventListener('dragend'
, () => draggable.classList.remove('dragging'));
});
dropZones.forEach(zone => {
zone.addEventListener('dragover'
, e => {
e.preventDefault();
zone.classList.add('drop-zone-over');
});
zone.addEventListener('dragleave'
, () => zone.classList.remove('drop-zone-over'));
zone.addEventListener('drop'
, e => {e.preventDefault();
zone.classList.remove('drop-zone-over');
const draggingCard = document.querySelector('
.dragging');
const cardType = draggingCard.id.split('
-
')[1];
if (zone.dataset.target === cardType) {
playSound('correct');
zone.innerHTML = '';
zone.appendChild(draggingCard);
draggingCard.draggable = false;
draggingCard.classList.remove('draggable');
puzzles[2].correctMatches++;
if (puzzles[2].correctMatches === puzzles[2].totalMatches) {
setTimeout(() => startDebrief(2), 1000);
}
} else {
playSound('error');
}
});
});
// --- Segment 3 Logic ---
function setupSegment3() {
const wordBankEl = document.getElementById('word-bank');
wordBankEl.innerHTML = '';
puzzles[3].wordBank.forEach(word => {
const wordEl = document.createElement('button');
wordEl.textContent = word;
wordEl.className = "word-bank-item bg-gray-200 text-gray-700 px-4 py-2
rounded-md hover:bg-[var(--cf-orange)] hover:text-white transition-all transform
hover:scale-105";
wordEl.addEventListener('click'
, () => {
if (wordEl.classList.contains('used')) return;
playSound('click');
const selectedBlank = document.querySelector('
.proposal-blank.selected');
if (selectedBlank) {
fillBlank(selectedBlank, word);
selectedBlank.classList.remove('selected');
}
});
wordBankEl.appendChild(wordEl);
});
}function fillBlank(blank, word) {
const oldWord = blank.dataset.word;
if (oldWord) {
const oldWordEl = Array.from(document.querySelectorAll('
.word-bank-item')).find(w
=> w.textContent === oldWord);
if (oldWordEl) oldWordEl.classList.remove('used');
}
blank.textContent = word;
blank.dataset.word = word;
const newWordEl = Array.from(document.querySelectorAll('
.word-bank-item')).find(w
=> w.textContent === word);
if (newWordEl) newWordEl.classList.add('used');
}
document.querySelectorAll('
.proposal-blank').forEach(blank => {
blank.addEventListener('click'
, () => {
playSound('click');
document.querySelectorAll('
.proposal-blank').forEach(b =>
b.classList.remove('selected'));
blank.classList.add('selected');
});
});
document.getElementById('submit-proposal').addEventListener('click'
, () => {
let allCorrect = true;
document.querySelectorAll('
.proposal-blank').forEach(blank => {
const userWord = blank.dataset.word;
const correctWord = puzzles[3].solution[blank.id];
if (userWord === correctWord) {
blank.classList.remove('incorrect-answer');
blank.classList.add('correct-answer');
} else {
blank.classList.remove('incorrect-answer');
blank.classList.add('incorrect-answer');
allCorrect = false;
}
});
if (allCorrect) {
setTimeout(() => endGame(true), 1500);
} else {
playSound('error');
}
});// --- Event Listeners ---
startButton.addEventListener('click'
, startGame);
restartButton.addEventListener('click'
, resetGame);
});
</script>
</body>
</html>