{"id":695,"date":"2026-09-19T18:50:36","date_gmt":"2026-09-19T18:50:36","guid":{"rendered":"https:\/\/kalhonaho.online\/?page_id=695"},"modified":"2026-09-24T02:23:19","modified_gmt":"2026-09-24T02:23:19","slug":"695-2","status":"publish","type":"page","link":"https:\/\/kalhonaho.online\/?page_id=695","title":{"rendered":"…."},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\n\r\nDigital Squid \u2014 Marketing Survival Game<\/title>\r\n\r\n<style>\r\n:root{\r\n --bg:#07090d;\r\n --panel:#10141d;\r\n --panel2:#171c27;\r\n --text:#f5f7fb;\r\n --muted:#9aa4b5;\r\n --pink:#ff1978;\r\n --cyan:#00d9ff;\r\n --yellow:#ffd43b;\r\n --red:#ff3b55;\r\n --green:#2ee68a;\r\n --border:#293143;\r\n}\r\n\r\n*{\r\n box-sizing:border-box;\r\n}\r\n\r\nbody{\r\n margin:0;\r\n background:\r\n radial-gradient(\r\n circle at 50% -10%,\r\n #1d2433 0,\r\n #07090d 48%\r\n );\r\n color:var(--text);\r\n font-family:Inter,Arial,sans-serif;\r\n min-height:100vh;\r\n}\r\n\r\nbutton,\r\ninput,\r\ntextarea,\r\nselect{\r\n font:inherit;\r\n}\r\n\r\nbutton{\r\n cursor:pointer;\r\n}\r\n\r\n.hidden{\r\n display:none!important;\r\n}\r\n\r\n\/* =========================\r\n TOP BAR\r\n========================= *\/\r\n\r\n.topbar{\r\n height:68px;\r\n border-bottom:1px solid #222938;\r\n background:rgba(7,9,13,.92);\r\n backdrop-filter:blur(12px);\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n padding:0 22px;\r\n position:sticky;\r\n top:0;\r\n z-index:20;\r\n}\r\n\r\n.logo{\r\n font-weight:900;\r\n letter-spacing:3px;\r\n font-size:20px;\r\n}\r\n\r\n.logo span{\r\n color:var(--pink);\r\n}\r\n\r\n.pill{\r\n border:1px solid #30384a;\r\n border-radius:999px;\r\n padding:7px 12px;\r\n color:var(--muted);\r\n font-size:12px;\r\n}\r\n\r\n\/* =========================\r\n COMMON\r\n========================= *\/\r\n\r\n.container{\r\n max-width:1450px;\r\n margin:auto;\r\n padding:24px;\r\n}\r\n\r\n.hero{\r\n min-height:calc(100vh - 68px);\r\n display:grid;\r\n place-items:center;\r\n text-align:center;\r\n}\r\n\r\n.hero-card{\r\n max-width:900px;\r\n padding:46px 28px;\r\n}\r\n\r\n.kicker{\r\n color:var(--pink);\r\n font-weight:900;\r\n letter-spacing:5px;\r\n font-size:13px;\r\n}\r\n\r\nh1{\r\n font-size:clamp(48px,9vw,110px);\r\n line-height:.9;\r\n margin:15px 0;\r\n text-transform:uppercase;\r\n letter-spacing:-5px;\r\n}\r\n\r\nh1 span{\r\n color:var(--pink);\r\n}\r\n\r\n.subtitle{\r\n font-size:18px;\r\n color:var(--muted);\r\n max-width:680px;\r\n margin:0 auto 28px;\r\n line-height:1.6;\r\n}\r\n\r\n.btn{\r\n border:1px solid #374052;\r\n background:#171c27;\r\n color:#fff;\r\n border-radius:10px;\r\n padding:12px 17px;\r\n font-weight:800;\r\n transition:.2s;\r\n}\r\n\r\n.btn:hover{\r\n transform:translateY(-1px);\r\n border-color:#66738a;\r\n}\r\n\r\n.btn.primary{\r\n background:var(--pink);\r\n border-color:var(--pink);\r\n}\r\n\r\n.btn.danger{\r\n background:#2a1117;\r\n border-color:#66202e;\r\n color:#ff8191;\r\n}\r\n\r\n.btn.green{\r\n background:#10271e;\r\n border-color:#1d6c49;\r\n color:#6af0ad;\r\n}\r\n\r\n.grid{\r\n display:grid;\r\n gap:16px;\r\n}\r\n\r\n.stats{\r\n grid-template-columns:repeat(4,1fr);\r\n}\r\n\r\n.round-grid{\r\n grid-template-columns:repeat(5,1fr);\r\n}\r\n\r\n.card{\r\n background:\r\n linear-gradient(\r\n 145deg,\r\n #111621,\r\n #0c1018\r\n );\r\n border:1px solid var(--border);\r\n border-radius:16px;\r\n padding:18px;\r\n box-shadow:0 12px 35px rgba(0,0,0,.25);\r\n}\r\n\r\n.stat b{\r\n font-size:32px;\r\n display:block;\r\n margin-top:5px;\r\n}\r\n\r\n.label{\r\n font-size:11px;\r\n text-transform:uppercase;\r\n color:var(--muted);\r\n letter-spacing:1.4px;\r\n}\r\n\r\n\/* =========================\r\n ADMIN\r\n========================= *\/\r\n\r\n.admin-layout{\r\n display:grid;\r\n grid-template-columns:310px 1fr;\r\n gap:18px;\r\n}\r\n\r\n.sidebar{\r\n position:sticky;\r\n top:86px;\r\n height:calc(100vh - 110px);\r\n overflow:auto;\r\n}\r\n\r\n.nav button{\r\n width:100%;\r\n text-align:left;\r\n margin:5px 0;\r\n}\r\n\r\n.nav button.active{\r\n border-color:var(--pink);\r\n background:#24101b;\r\n}\r\n\r\n.toolbar{\r\n display:flex;\r\n gap:8px;\r\n flex-wrap:wrap;\r\n align-items:center;\r\n margin-bottom:16px;\r\n}\r\n\r\n.field{\r\n display:grid;\r\n gap:7px;\r\n margin:12px 0;\r\n}\r\n\r\n.field label{\r\n font-size:12px;\r\n color:var(--muted);\r\n}\r\n\r\n.field input,\r\n.field textarea,\r\n.field select{\r\n width:100%;\r\n background:#0a0d13;\r\n border:1px solid #30384a;\r\n color:#fff;\r\n border-radius:9px;\r\n padding:10px;\r\n outline:none;\r\n}\r\n\r\n.field textarea{\r\n min-height:80px;\r\n resize:vertical;\r\n}\r\n\r\n.question-editor{\r\n display:grid;\r\n grid-template-columns:1.25fr .75fr;\r\n gap:18px;\r\n}\r\n\r\n.option-row{\r\n display:grid;\r\n grid-template-columns:42px 1fr auto;\r\n gap:8px;\r\n align-items:center;\r\n margin:8px 0;\r\n}\r\n\r\n.option-letter{\r\n width:42px;\r\n height:42px;\r\n border-radius:9px;\r\n display:grid;\r\n place-items:center;\r\n background:#1b2230;\r\n font-weight:900;\r\n}\r\n\r\n.preview{\r\n border:1px solid #30384a;\r\n border-radius:15px;\r\n overflow:hidden;\r\n background:#0a0d13;\r\n}\r\n\r\n.preview-head{\r\n padding:10px 14px;\r\n border-bottom:1px solid #252c39;\r\n display:flex;\r\n justify-content:space-between;\r\n}\r\n\r\n.visual{\r\n height:210px;\r\n position:relative;\r\n overflow:hidden;\r\n background:\r\n linear-gradient(\r\n 135deg,\r\n #121927,\r\n #20283a\r\n );\r\n}\r\n\r\n.visual:before,\r\n.visual:after{\r\n content:\"\";\r\n position:absolute;\r\n border-radius:50%;\r\n filter:blur(2px);\r\n}\r\n\r\n.visual:before{\r\n width:180px;\r\n height:180px;\r\n background:rgba(255,25,120,.35);\r\n left:-45px;\r\n top:-65px;\r\n}\r\n\r\n.visual:after{\r\n width:220px;\r\n height:220px;\r\n background:rgba(0,217,255,.22);\r\n right:-70px;\r\n bottom:-90px;\r\n}\r\n\r\n.visual-inner{\r\n position:absolute;\r\n inset:0;\r\n display:grid;\r\n place-items:center;\r\n font-weight:900;\r\n font-size:38px;\r\n letter-spacing:-1px;\r\n text-shadow:0 4px 20px #000;\r\n}\r\n\r\n.preview-body{\r\n padding:16px;\r\n}\r\n\r\n.mini-options{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:8px;\r\n}\r\n\r\n.mini-option{\r\n padding:10px;\r\n border:1px solid #30384a;\r\n border-radius:8px;\r\n color:#cbd2df;\r\n font-size:13px;\r\n}\r\n\r\n.round-card{\r\n min-height:150px;\r\n position:relative;\r\n cursor:pointer;\r\n}\r\n\r\n.round-card.active{\r\n border-color:var(--pink);\r\n box-shadow:\r\n 0 0 0 1px var(--pink) inset;\r\n}\r\n\r\n.round-no{\r\n color:var(--pink);\r\n font-size:11px;\r\n font-weight:900;\r\n letter-spacing:1px;\r\n}\r\n\r\n.round-card h3{\r\n font-size:16px;\r\n margin:8px 0;\r\n}\r\n\r\n.round-card p{\r\n color:var(--muted);\r\n font-size:12px;\r\n line-height:1.4;\r\n}\r\n\r\n.status{\r\n font-size:10px;\r\n border-radius:999px;\r\n padding:4px 7px;\r\n background:#17211d;\r\n color:#67e9a6;\r\n display:inline-block;\r\n}\r\n\r\n\/* =========================\r\n PLAYER SCREEN\r\n========================= *\/\r\n\r\n.player{\r\n min-height:100vh;\r\n background:\r\n radial-gradient(\r\n circle at 50% 0,\r\n #20283a,\r\n #07090d 52%\r\n );\r\n display:grid;\r\n place-items:center;\r\n padding:24px;\r\n}\r\n\r\n.player-shell{\r\n width:min(1050px,100%);\r\n}\r\n\r\n.player-head{\r\n display:flex;\r\n justify-content:space-between;\r\n align-items:center;\r\n margin-bottom:18px;\r\n}\r\n\r\n.timer{\r\n font-size:54px;\r\n font-weight:900;\r\n letter-spacing:-3px;\r\n}\r\n\r\n.timer.danger{\r\n color:var(--red);\r\n animation:pulse .7s infinite alternate;\r\n}\r\n\r\n@keyframes pulse{\r\n to{\r\n transform:scale(1.04);\r\n }\r\n}\r\n\r\n.question{\r\n font-size:clamp(25px,4vw,48px);\r\n line-height:1.1;\r\n margin:18px 0 24px;\r\n}\r\n\r\n.player-visual{\r\n height:280px;\r\n border-radius:18px;\r\n margin-bottom:20px;\r\n}\r\n\r\n.choice-grid{\r\n display:grid;\r\n grid-template-columns:1fr 1fr;\r\n gap:14px;\r\n}\r\n\r\n.choice{\r\n min-height:95px;\r\n text-align:left;\r\n padding:18px;\r\n border-radius:14px;\r\n background:#111621;\r\n border:1px solid #3a4355;\r\n color:#fff;\r\n font-size:18px;\r\n font-weight:800;\r\n}\r\n\r\n.choice:hover{\r\n border-color:#a9b2c4;\r\n}\r\n\r\n.choice .letter{\r\n color:var(--pink);\r\n margin-right:10px;\r\n}\r\n\r\n.locked{\r\n text-align:center;\r\n padding:24px;\r\n border:1px solid #304052;\r\n border-radius:15px;\r\n color:var(--muted);\r\n}\r\n\r\n\/* =========================\r\n ELIMINATION\r\n========================= *\/\r\n\r\n.eliminate{\r\n position:fixed;\r\n inset:0;\r\n background:rgba(4,5,8,.97);\r\n z-index:99;\r\n display:grid;\r\n place-items:center;\r\n text-align:center;\r\n}\r\n\r\n.eliminate h2{\r\n font-size:clamp(60px,11vw,150px);\r\n color:var(--red);\r\n margin:0;\r\n letter-spacing:-7px;\r\n}\r\n\r\n.eliminate p{\r\n font-size:18px;\r\n color:#aeb7c7;\r\n}\r\n\r\n\/* =========================\r\n LOGIN\r\n========================= *\/\r\n\r\n.login{\r\n min-height:100vh;\r\n display:grid;\r\n place-items:center;\r\n padding:20px;\r\n}\r\n\r\n.login-card{\r\n width:min(430px,100%);\r\n padding:30px;\r\n}\r\n\r\n.notice{\r\n padding:12px 14px;\r\n border:1px solid #3a4355;\r\n border-radius:10px;\r\n background:#0e131c;\r\n color:#b7c0cf;\r\n font-size:13px;\r\n line-height:1.5;\r\n}\r\n\r\n.toast{\r\n position:fixed;\r\n right:18px;\r\n bottom:18px;\r\n background:#171d28;\r\n border:1px solid #3b465b;\r\n padding:13px 16px;\r\n border-radius:10px;\r\n z-index:100;\r\n box-shadow:0 12px 40px #0008;\r\n}\r\n\r\n\/* =========================\r\n TABLE\r\n========================= *\/\r\n\r\ntable{\r\n width:100%;\r\n border-collapse:collapse;\r\n}\r\n\r\nth,\r\ntd{\r\n padding:10px;\r\n border-bottom:1px solid #252c39;\r\n}\r\n\r\n\/* =========================\r\n RESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:1050px){\r\n\r\n .round-grid{\r\n grid-template-columns:repeat(3,1fr);\r\n }\r\n\r\n .admin-layout{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .sidebar{\r\n position:static;\r\n height:auto;\r\n }\r\n\r\n .question-editor{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .stats{\r\n grid-template-columns:repeat(2,1fr);\r\n }\r\n}\r\n\r\n@media(max-width:650px){\r\n\r\n .round-grid{\r\n grid-template-columns:1fr 1fr;\r\n }\r\n\r\n .choice-grid,\r\n .room-grid{\r\n grid-template-columns:1fr;\r\n }\r\n\r\n .stats{\r\n grid-template-columns:1fr 1fr;\r\n }\r\n\r\n .container{\r\n padding:14px;\r\n }\r\n\r\n h1{\r\n letter-spacing:-3px;\r\n }\r\n\r\n .visual{\r\n height:180px;\r\n }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"app\"><\/div>\r\n\r\n<script>\r\n\r\n\/* =========================================================\r\n DIGITAL SQUID\r\n MARKETING SURVIVAL GAME\r\n========================================================= *\/\r\n\r\nconst ADMIN_PASSWORD = \"DN2026\";\r\n\r\nconst roomNames = [\r\n \"Facebook Room\",\r\n \"Hall Area\",\r\n \"Twitter Room\",\r\n \"Reception Area\"\r\n];\r\n\r\nconst roomIcons = [\r\n \"\ud83d\udd35\",\r\n \"\ud83d\udfe1\",\r\n \"\ud83d\udd37\",\r\n \"\ud83d\udd34\"\r\n];\r\n\r\n\/* =========================================================\r\n 20 MARKETING ROUNDS\r\n========================================================= *\/\r\n\r\nconst rounds = [\r\n\r\n[\r\n \"Marketing Basics\",\r\n \"What is the primary purpose of marketing?\",\r\n \"Create value and connect products with customers\",\r\n [\r\n \"Increase product price\",\r\n \"Create value and connect products with customers\",\r\n \"Reduce customer support\",\r\n \"Give discounts to everyone\"\r\n ],\r\n \"CONNECT\"\r\n],\r\n\r\n[\r\n \"Branding\",\r\n \"Which choice creates stronger brand recognition?\",\r\n \"Consistent visual identity\",\r\n [\r\n \"Random colours every day\",\r\n \"Consistent visual identity\",\r\n \"Changing the logo frequently\",\r\n \"Using a different font everywhere\"\r\n ],\r\n \"BRAND\"\r\n],\r\n\r\n[\r\n \"Digital Marketing\",\r\n \"A B2B software company wants to reach decision-makers. Which channel is a strong starting point?\",\r\n \"LinkedIn\",\r\n [\r\n \"TikTok\",\r\n \"LinkedIn\",\r\n \"Snapchat\",\r\n \"Pinterest\"\r\n ],\r\n \"B2B\"\r\n],\r\n\r\n[\r\n \"Canva\",\r\n \"Look at the creative. What is the biggest design problem?\",\r\n \"Too much text\",\r\n [\r\n \"Too much text\",\r\n \"Strong hierarchy\",\r\n \"Clear CTA\",\r\n \"Consistent branding\"\r\n ],\r\n \"CANVA\"\r\n],\r\n\r\n[\r\n \"WordPress\",\r\n \"You need a page visitors can access from the website menu. What should you normally create?\",\r\n \"Page\",\r\n [\r\n \"Page\",\r\n \"Plugin\",\r\n \"Widget\",\r\n \"Theme\"\r\n ],\r\n \"WORDPRESS\"\r\n],\r\n\r\n[\r\n \"Google Ads\",\r\n \"Which keyword match type generally provides the broadest reach?\",\r\n \"Broad Match\",\r\n [\r\n \"Exact Match\",\r\n \"Phrase Match\",\r\n \"Broad Match\",\r\n \"Negative Match\"\r\n ],\r\n \"GOOGLE ADS\"\r\n],\r\n\r\n[\r\n \"Marketing Facts\",\r\n \"Which statement is TRUE?\",\r\n \"CTR measures clicks relative to impressions\",\r\n [\r\n \"Every social post must go viral\",\r\n \"More followers always means more sales\",\r\n \"CTR measures clicks relative to impressions\",\r\n \"Branding is only about logos\"\r\n ],\r\n \"FACT\"\r\n],\r\n\r\n[\r\n \"Social Media\",\r\n \"A restaurant wants food Reels and creator collaborations. Which platform is highly relevant?\",\r\n \"Instagram\",\r\n [\r\n \"Instagram\",\r\n \"Excel\",\r\n \"Google Sheets\",\r\n \"WordPress Admin\"\r\n ],\r\n \"SOCIAL\"\r\n],\r\n\r\n[\r\n \"HTML\",\r\n \"Which HTML element is commonly used to create a hyperlink?\",\r\n \"<a>\",\r\n [\r\n \"<img>\",\r\n \"<a>\",\r\n \"<div>\",\r\n \"<table>\"\r\n ],\r\n \"HTML\"\r\n],\r\n\r\n[\r\n \"Analytics\",\r\n \"10,000 impressions and 500 clicks. What is the CTR?\",\r\n \"5%\",\r\n [\r\n \"2%\",\r\n \"5%\",\r\n \"10%\",\r\n \"50%\"\r\n ],\r\n \"DATA\"\r\n],\r\n\r\n[\r\n \"Visual Situation\",\r\n \"An ad promises 'LOSE 10 KG IN 7 DAYS!!!' with no evidence. What should a marketer question first?\",\r\n \"Whether the claim is credible\",\r\n [\r\n \"Whether the claim is credible\",\r\n \"Whether the font is pretty\",\r\n \"Whether the logo is large enough\",\r\n \"Whether the post has 20 hashtags\"\r\n ],\r\n \"TRUST\"\r\n],\r\n\r\n[\r\n \"Content Strategy\",\r\n \"A brand wants authority, not only sales. What content mix makes sense?\",\r\n \"Educational + useful + promotional content\",\r\n [\r\n \"Only promotional posts\",\r\n \"Educational + useful + promotional content\",\r\n \"Only discount posts\",\r\n \"Only memes\"\r\n ],\r\n \"CONTENT\"\r\n],\r\n\r\n[\r\n \"WordPress\",\r\n \"A WordPress website needs SEO functionality. What type of tool normally helps?\",\r\n \"SEO plugin\",\r\n [\r\n \"SEO plugin\",\r\n \"Calculator\",\r\n \"Spreadsheet\",\r\n \"Image editor\"\r\n ],\r\n \"PLUGIN\"\r\n],\r\n\r\n[\r\n \"Canva\",\r\n \"Which creative would be stronger for a paid campaign?\",\r\n \"Clear hierarchy, readable type, CTA and whitespace\",\r\n [\r\n \"Tiny text with 8 fonts\",\r\n \"Clear hierarchy, readable type, CTA and whitespace\",\r\n \"No CTA but a huge logo\",\r\n \"Low contrast text on a busy photo\"\r\n ],\r\n \"DESIGN\"\r\n],\r\n\r\n[\r\n \"Paid Ads\",\r\n \"A company wants people to submit contact details. Which objective is most aligned?\",\r\n \"Lead generation\",\r\n [\r\n \"Lead generation\",\r\n \"Awareness only\",\r\n \"Engagement only\",\r\n \"Reach only\"\r\n ],\r\n \"LEADS\"\r\n],\r\n\r\n[\r\n \"Visual Analytics\",\r\n \"Spend \u20b95,000, impressions 100,000, clicks 1,000, leads 50. Which metric measures clicks relative to impressions?\",\r\n \"CTR\",\r\n [\r\n \"CPL\",\r\n \"CTR\",\r\n \"ROAS\",\r\n \"CPM\"\r\n ],\r\n \"METRIC\"\r\n],\r\n\r\n[\r\n \"Marketing Funnel\",\r\n \"Awareness \u2192 ? \u2192 Conversion. What normally sits in the middle?\",\r\n \"Consideration\",\r\n [\r\n \"Consideration\",\r\n \"Deletion\",\r\n \"Printing\",\r\n \"Retention\"\r\n ],\r\n \"FUNNEL\"\r\n],\r\n\r\n[\r\n \"Performance\",\r\n \"Campaign A CTR 1.2%, CPL \u20b9300. Campaign B CTR 3.8%, CPL \u20b9150. Which has the cheaper leads?\",\r\n \"Campaign B\",\r\n [\r\n \"Campaign A\",\r\n \"Campaign B\",\r\n \"Both\",\r\n \"Impossible to calculate\"\r\n ],\r\n \"CPL\"\r\n],\r\n\r\n[\r\n \"Twist Round\",\r\n \"SYSTEM OVERRIDE: Your secret teams are now revealed. What should your team do next?\",\r\n \"Discuss and create a shared strategy\",\r\n [\r\n \"Ignore teammates\",\r\n \"Discuss and create a shared strategy\",\r\n \"Randomly split again\",\r\n \"Stop playing\"\r\n ],\r\n \"TWIST\"\r\n],\r\n\r\n[\r\n \"Final Twist\",\r\n \"Your client wants awareness, traffic, leads and measurable results. What is the strongest approach?\",\r\n \"Build a funnel with channel-specific objectives and measurement\",\r\n [\r\n \"Use one post for everything\",\r\n \"Build a funnel with channel-specific objectives and measurement\",\r\n \"Spend everything on followers\",\r\n \"Run ads without tracking\"\r\n ],\r\n \"FINAL\"\r\n]\r\n\r\n];\r\n\r\n\/* =========================================================\r\n GAME STATE\r\n========================================================= *\/\r\n\r\nlet state = {\r\n\r\n mode:\"landing\",\r\n\r\n round:0,\r\n\r\n answerLocked:false,\r\n\r\n adminAuthed:false,\r\n\r\n players:[],\r\n\r\n mapping:[0,1,2,3],\r\n\r\n timer:30,\r\n\r\n timerLeft:30,\r\n\r\n timerRunning:false,\r\n\r\n eliminated:new Set(),\r\n\r\n selections:{},\r\n\r\n secretGroups:{}\r\n\r\n};\r\n\r\n\/* =========================================================\r\n SAVE\r\n========================================================= *\/\r\n\r\nfunction save(){\r\n\r\n localStorage.setItem(\r\n \"digitalSquidState\",\r\n JSON.stringify({\r\n ...state,\r\n eliminated:[...state.eliminated]\r\n })\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n LOAD\r\n========================================================= *\/\r\n\r\nfunction load(){\r\n\r\n try{\r\n\r\n const saved =\r\n JSON.parse(\r\n localStorage.getItem(\r\n \"digitalSquidState\"\r\n )\r\n );\r\n\r\n if(saved){\r\n\r\n state={\r\n ...state,\r\n ...saved,\r\n eliminated:new Set(\r\n saved.eliminated || []\r\n )\r\n };\r\n\r\n }\r\n\r\n }catch(error){\r\n\r\n console.log(error);\r\n\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n ESCAPE HTML\r\n========================================================= *\/\r\n\r\nfunction esc(value){\r\n\r\n return String(value).replace(\r\n \/[&<>\"']\/g,\r\n function(match){\r\n\r\n return {\r\n\r\n \"&\":\"&\",\r\n \"<\":\"<\",\r\n \">\":\">\",\r\n '\"':\""\",\r\n \"'\":\"'\"\r\n\r\n }[match];\r\n\r\n }\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n TOAST\r\n========================================================= *\/\r\n\r\nfunction toast(message){\r\n\r\n const element =\r\n document.createElement(\"div\");\r\n\r\n element.className=\"toast\";\r\n\r\n element.textContent=message;\r\n\r\n document.body.appendChild(element);\r\n\r\n setTimeout(\r\n ()=>element.remove(),\r\n 2200\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n MAIN RENDER\r\n========================================================= *\/\r\n\r\nfunction render(){\r\n\r\n const app =\r\n document.getElementById(\"app\");\r\n\r\n if(state.mode===\"landing\"){\r\n\r\n renderLanding(app);\r\n\r\n }\r\n\r\n else if(state.mode===\"login\"){\r\n\r\n renderLogin(app);\r\n\r\n }\r\n\r\n else if(state.mode===\"admin\"){\r\n\r\n renderAdmin(app);\r\n\r\n }\r\n\r\n else if(state.mode===\"player\"){\r\n\r\n renderPlayer(app);\r\n\r\n }\r\n\r\n else if(state.mode===\"eliminate\"){\r\n\r\n renderEliminate(app);\r\n\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n LANDING\r\n========================================================= *\/\r\n\r\nfunction renderLanding(app){\r\n\r\n app.innerHTML=`\r\n\r\n <div class=\"hero\">\r\n\r\n <div class=\"hero-card\">\r\n\r\n <div class=\"kicker\">\r\n DIGITAL NEST \u2022 CLASSROOM SURVIVAL GAME\r\n <\/div>\r\n\r\n <h1>\r\n DIGITAL<br>\r\n <span>SQUID<\/span>\r\n <\/h1>\r\n\r\n <p class=\"subtitle\">\r\n\r\n 20 rounds.\r\n 4 rooms.\r\n Marketing.\r\n Branding.\r\n Canva.\r\n WordPress.\r\n Google Ads.\r\n Analytics.\r\n\r\n <br><br>\r\n\r\n Think.\r\n Discuss.\r\n Choose.\r\n Survive.\r\n\r\n <\/p>\r\n\r\n <div\r\n class=\"toolbar\"\r\n style=\"justify-content:center\"\r\n >\r\n\r\n <button\r\n class=\"btn primary\"\r\n onclick=\"state.mode='login';render()\"\r\n >\r\n ADMIN CONTROL\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"showPlayerSetup()\"\r\n >\r\n PLAYER VIEW\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <div\r\n class=\"notice\"\r\n style=\"max-width:650px;margin:20px auto 0\"\r\n >\r\n\r\n Admin controls the questions,\r\n timer, answer mapping,\r\n round progression and elimination.\r\n\r\n <br><br>\r\n\r\n <b>20 ROUNDS \u2022 4 ROOMS \u2022 1 SURVIVAL GAME<\/b>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n LOGIN\r\n========================================================= *\/\r\n\r\nfunction renderLogin(app){\r\n\r\n app.innerHTML=`\r\n\r\n <div class=\"login\">\r\n\r\n <div class=\"login-card card\">\r\n\r\n <div class=\"kicker\">\r\n ADMIN CONTROL\r\n <\/div>\r\n\r\n <h2>\r\n Enter the Game\r\n <\/h2>\r\n\r\n <div class=\"field\">\r\n\r\n <label>\r\n ADMIN PASSWORD\r\n <\/label>\r\n\r\n <input\r\n id=\"pwd\"\r\n type=\"password\"\r\n placeholder=\"Enter password\"\r\n >\r\n\r\n <\/div>\r\n\r\n <button\r\n class=\"btn primary\"\r\n style=\"width:100%\"\r\n onclick=\"login()\"\r\n >\r\n OPEN ADMIN PANEL\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n style=\"width:100%;margin-top:8px\"\r\n onclick=\"state.mode='landing';render()\"\r\n >\r\n BACK\r\n <\/button>\r\n\r\n <p\r\n class=\"label\"\r\n style=\"margin-top:18px\"\r\n >\r\n Demo password:\r\n <b>DN2026<\/b>\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n LOGIN FUNCTION\r\n========================================================= *\/\r\n\r\nfunction login(){\r\n\r\n const password =\r\n document.getElementById(\"pwd\").value;\r\n\r\n if(password===ADMIN_PASSWORD){\r\n\r\n state.adminAuthed=true;\r\n\r\n state.mode=\"admin\";\r\n\r\n render();\r\n\r\n }\r\n\r\n else{\r\n\r\n toast(\"Wrong admin password\");\r\n\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n ADMIN\r\n========================================================= *\/\r\n\r\nfunction renderAdmin(app){\r\n\r\n const round =\r\n rounds[state.round];\r\n\r\n const correctIndex =\r\n round[3].indexOf(round[2]);\r\n\r\n const alive =\r\n Math.max(\r\n 0,\r\n state.players.length -\r\n state.eliminated.size\r\n );\r\n\r\n app.innerHTML=`\r\n\r\n <div class=\"topbar\">\r\n\r\n <div class=\"logo\">\r\n DIGITAL <span>SQUID<\/span>\r\n <\/div>\r\n\r\n <div class=\"pill\">\r\n ADMIN \u2022 ROUND\r\n ${state.round+1}\/20\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"container\">\r\n\r\n <div class=\"admin-layout\">\r\n\r\n <aside class=\"sidebar\">\r\n\r\n <div class=\"card\">\r\n\r\n <div class=\"kicker\">\r\n CONTROL ROOM\r\n <\/div>\r\n\r\n <h2>\r\n Game Master\r\n <\/h2>\r\n\r\n <div class=\"nav\">\r\n\r\n <button\r\n class=\"btn active\"\r\n onclick=\"adminSection('game')\"\r\n >\r\n \ud83c\udfae Live Game\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"adminSection('players')\"\r\n >\r\n \ud83d\udc65 Players\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"adminSection('teams')\"\r\n >\r\n \ud83d\udd75\ufe0f Secret Teams\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"adminSection('mapping')\"\r\n >\r\n \ud83d\udeaa Room Mapping\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <hr\r\n style=\"border-color:#252c39;margin:18px 0\"\r\n >\r\n\r\n <button\r\n class=\"btn danger\"\r\n style=\"width:100%\"\r\n onclick=\"resetGame()\"\r\n >\r\n RESET GAME\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/aside>\r\n\r\n <main id=\"adminMain\">\r\n\r\n ${adminGame(\r\n round,\r\n correctIndex,\r\n alive\r\n )}\r\n\r\n <\/main>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n ADMIN GAME\r\n========================================================= *\/\r\n\r\nfunction adminGame(\r\n round,\r\n correctIndex,\r\n alive\r\n){\r\n\r\n return `\r\n\r\n <div class=\"grid stats\">\r\n\r\n <div class=\"card stat\">\r\n\r\n <span class=\"label\">\r\n Round\r\n <\/span>\r\n\r\n <b>\r\n ${state.round+1}\/20\r\n <\/b>\r\n\r\n <\/div>\r\n\r\n <div class=\"card stat\">\r\n\r\n <span class=\"label\">\r\n Players\r\n <\/span>\r\n\r\n <b>\r\n ${state.players.length}\r\n <\/b>\r\n\r\n <\/div>\r\n\r\n <div class=\"card stat\">\r\n\r\n <span class=\"label\">\r\n Alive\r\n <\/span>\r\n\r\n <b>\r\n ${alive}\r\n <\/b>\r\n\r\n <\/div>\r\n\r\n <div class=\"card stat\">\r\n\r\n <span class=\"label\">\r\n Timer\r\n <\/span>\r\n\r\n <b id=\"adminTimer\">\r\n ${state.timerLeft}s\r\n <\/b>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"card\"\r\n style=\"margin-top:16px\"\r\n >\r\n\r\n <div class=\"toolbar\">\r\n\r\n <span class=\"kicker\">\r\n ROUND ${state.round+1}\r\n <\/span>\r\n\r\n <span class=\"pill\">\r\n ${esc(round[0])}\r\n <\/span>\r\n\r\n <span class=\"pill\">\r\n Correct:\r\n ${String.fromCharCode(65+correctIndex)}\r\n \u2014 hidden from players\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"question\">\r\n\r\n ${esc(round[1])}\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"question-editor\">\r\n\r\n <div>\r\n\r\n <div class=\"notice\">\r\n\r\n <b>\r\n ADMIN ANSWER KEY\r\n <\/b>\r\n\r\n <br><br>\r\n\r\n ${String.fromCharCode(65+correctIndex)}\r\n \u2014\r\n ${esc(round[2])}\r\n\r\n <br><br>\r\n\r\n Correct room:\r\n\r\n <b>\r\n ${roomNames[\r\n state.mapping[correctIndex]\r\n ]}\r\n <\/b>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n style=\"margin-top:14px\"\r\n >\r\n\r\n ${round[3].map(\r\n (option,index)=>`\r\n\r\n <div class=\"option-row\">\r\n\r\n <div class=\"option-letter\">\r\n\r\n ${String.fromCharCode(\r\n 65+index\r\n )}\r\n\r\n <\/div>\r\n\r\n <div\r\n class=\"card\"\r\n style=\"padding:11px\"\r\n >\r\n\r\n ${esc(option)}\r\n\r\n <\/div>\r\n\r\n <button\r\n class=\"btn ${\r\n index===correctIndex\r\n ?\"green\"\r\n :\"danger\"\r\n }\"\r\n >\r\n\r\n ${\r\n index===correctIndex\r\n ?\"SAFE\"\r\n :\"WRONG\"\r\n }\r\n\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n `\r\n ).join(\"\")}\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"toolbar\"\r\n style=\"margin-top:18px\"\r\n >\r\n\r\n <button\r\n class=\"btn primary\"\r\n onclick=\"startTimer()\"\r\n >\r\n START TIMER\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"lockRound()\"\r\n >\r\n LOCK ANSWERS\r\n <\/button>\r\n\r\n <button\r\n class=\"btn green\"\r\n onclick=\"revealRound()\"\r\n >\r\n REVEAL RESULT\r\n <\/button>\r\n\r\n <button\r\n class=\"btn danger\"\r\n onclick=\"eliminateWrong()\"\r\n >\r\n ELIMINATE WRONG PATH\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"nextRound()\"\r\n >\r\n NEXT ROUND \u2192\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"preview\">\r\n\r\n <div class=\"preview-head\">\r\n\r\n <b>\r\n PLAYER SCREEN PREVIEW\r\n <\/b>\r\n\r\n <span>\r\n LIVE\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"visual\">\r\n\r\n <div class=\"visual-inner\">\r\n\r\n ${esc(round[4])}\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"preview-body\">\r\n\r\n <div\r\n style=\"font-weight:800;margin-bottom:12px\"\r\n >\r\n\r\n ${esc(round[1])}\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"mini-options\">\r\n\r\n ${round[3].map(\r\n (option,index)=>`\r\n\r\n <div class=\"mini-option\">\r\n\r\n <b>\r\n ${String.fromCharCode(\r\n 65+index\r\n )}.\r\n <\/b>\r\n\r\n ${esc(option)}\r\n\r\n <\/div>\r\n\r\n `).join(\"\")}\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"card\"\r\n style=\"margin-top:16px\"\r\n >\r\n\r\n <h3>\r\n 20-Round Board\r\n <\/h3>\r\n\r\n <div class=\"grid round-grid\">\r\n\r\n ${rounds.map(\r\n (item,index)=>`\r\n\r\n <div\r\n class=\"card round-card\r\n ${\r\n index===state.round\r\n ?\"active\"\r\n :\"\"\r\n }\"\r\n onclick=\"jumpRound(${index})\"\r\n >\r\n\r\n <div class=\"round-no\">\r\n ROUND ${index+1}\r\n <\/div>\r\n\r\n <h3>\r\n ${esc(item[0])}\r\n <\/h3>\r\n\r\n <p>\r\n ${esc(item[4])}\r\n <\/p>\r\n\r\n <span class=\"status\">\r\n\r\n ${\r\n index<state.round\r\n ?\"COMPLETED\"\r\n :\r\n index===state.round\r\n ?\"LIVE\"\r\n :\r\n \"READY\"\r\n }\r\n\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n `\r\n ).join(\"\")}\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n ADMIN SECTIONS\r\n========================================================= *\/\r\n\r\nfunction adminSection(section){\r\n\r\n if(section===\"players\"){\r\n\r\n showPlayers();\r\n\r\n }\r\n\r\n else if(section===\"teams\"){\r\n\r\n showTeams();\r\n\r\n }\r\n\r\n else if(section===\"mapping\"){\r\n\r\n showMapping();\r\n\r\n }\r\n\r\n else{\r\n\r\n render();\r\n\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n PLAYERS\r\n========================================================= *\/\r\n\r\nfunction showPlayers(){\r\n\r\n const rows =\r\n state.players.length\r\n\r\n ?\r\n\r\n state.players.map(\r\n (player,index)=>`\r\n\r\n <tr>\r\n\r\n <td>\r\n P${String(index+1).padStart(3,\"0\")}\r\n <\/td>\r\n\r\n <td>\r\n ${esc(player)}\r\n <\/td>\r\n\r\n <td>\r\n\r\n ${\r\n state.eliminated.has(index)\r\n\r\n ?\r\n\r\n '<span style=\"color:#ff6378\">ELIMINATED<\/span>'\r\n\r\n :\r\n\r\n '<span style=\"color:#62e9a5\">ALIVE<\/span>'\r\n }\r\n\r\n <\/td>\r\n\r\n <\/tr>\r\n\r\n `\r\n ).join(\"\")\r\n\r\n :\r\n\r\n `\r\n\r\n <tr>\r\n\r\n <td colspan=\"3\">\r\n No players added yet.\r\n <\/td>\r\n\r\n <\/tr>\r\n\r\n `;\r\n\r\n\r\n document.getElementById(\r\n \"adminMain\"\r\n ).innerHTML=`\r\n\r\n <div class=\"card\">\r\n\r\n <div class=\"kicker\">\r\n PLAYER MANAGER\r\n <\/div>\r\n\r\n <h2>\r\n Players\r\n <\/h2>\r\n\r\n <div class=\"field\">\r\n\r\n <label>\r\n PLAYER NAMES \u2014 ONE PER LINE\r\n <\/label>\r\n\r\n <textarea\r\n id=\"playerNames\"\r\n placeholder=\"Aarav\r\nRiya\r\nKabir\r\n...\"\r\n >${state.players.join(\"\\n\")}<\/textarea>\r\n\r\n <\/div>\r\n\r\n <div class=\"toolbar\">\r\n\r\n <button\r\n class=\"btn primary\"\r\n onclick=\"savePlayers()\"\r\n >\r\n SAVE PLAYERS\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"generateDemoPlayers()\"\r\n >\r\n GENERATE 40 PLAYERS\r\n <\/button>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"adminSection('game')\"\r\n >\r\n BACK TO GAME\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"card\"\r\n style=\"margin-top:16px\"\r\n >\r\n\r\n <table>\r\n\r\n <thead>\r\n\r\n <tr>\r\n\r\n <th>ID<\/th>\r\n\r\n <th>Player<\/th>\r\n\r\n <th>Status<\/th>\r\n\r\n <\/tr>\r\n\r\n <\/thead>\r\n\r\n <tbody>\r\n\r\n ${rows}\r\n\r\n <\/tbody>\r\n\r\n <\/table>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n SAVE PLAYERS\r\n========================================================= *\/\r\n\r\nfunction savePlayers(){\r\n\r\n state.players =\r\n document\r\n .getElementById(\"playerNames\")\r\n .value\r\n .split(\"\\n\")\r\n .map(\r\n name=>name.trim()\r\n )\r\n .filter(Boolean);\r\n\r\n assignTeams();\r\n\r\n save();\r\n\r\n toast(\r\n \"Players saved\"\r\n );\r\n\r\n render();\r\n\r\n}\r\n\r\n\/* =========================================================\r\n DEMO PLAYERS\r\n========================================================= *\/\r\n\r\nfunction generateDemoPlayers(){\r\n\r\n state.players =\r\n Array.from(\r\n {length:40},\r\n (_,index)=>\r\n `Player ${\r\n String(index+1).padStart(2,\"0\")\r\n }`\r\n );\r\n\r\n assignTeams();\r\n\r\n save();\r\n\r\n toast(\r\n \"40 demo players created\"\r\n );\r\n\r\n render();\r\n\r\n}\r\n\r\n\/* =========================================================\r\n SECRET TEAMS\r\n========================================================= *\/\r\n\r\nfunction assignTeams(){\r\n\r\n state.secretGroups={};\r\n\r\n state.players.forEach(\r\n (_,index)=>{\r\n\r\n state.secretGroups[index]=\r\n [\r\n \"RED\",\r\n \"BLUE\",\r\n \"GREEN\",\r\n \"YELLOW\"\r\n ][index%4];\r\n\r\n }\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n TEAM PANEL\r\n========================================================= *\/\r\n\r\nfunction showTeams(){\r\n\r\n document.getElementById(\r\n \"adminMain\"\r\n ).innerHTML=`\r\n\r\n <div class=\"card\">\r\n\r\n <div class=\"kicker\">\r\n SECRET INFORMATION\r\n <\/div>\r\n\r\n <h2>\r\n Secret Team Assignment\r\n <\/h2>\r\n\r\n <div class=\"notice\">\r\n\r\n Students never see this screen.\r\n\r\n <br><br>\r\n\r\n Teams are assigned automatically\r\n and remain hidden until Round 19.\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"grid round-grid\"\r\n style=\"margin-top:18px\"\r\n >\r\n\r\n ${\r\n [\r\n \"RED\",\r\n \"BLUE\",\r\n \"GREEN\",\r\n \"YELLOW\"\r\n ]\r\n .map(\r\n group=>`\r\n\r\n <div class=\"card\">\r\n\r\n <h3>\r\n ${group}\r\n <\/h3>\r\n\r\n ${\r\n state.players\r\n .map(\r\n (player,index)=>\r\n\r\n state.secretGroups[index]\r\n ===group\r\n\r\n ?\r\n\r\n `\r\n <div\r\n style=\"\r\n padding:6px 0;\r\n color:#cbd2df\r\n \"\r\n >\r\n\r\n P${\r\n String(\r\n index+1\r\n ).padStart(\r\n 3,\r\n \"0\"\r\n )\r\n }\r\n\r\n \u2014\r\n ${esc(player)}\r\n\r\n <\/div>\r\n `\r\n\r\n :\r\n\r\n \"\"\r\n )\r\n .join(\"\")\r\n }\r\n\r\n <\/div>\r\n\r\n `\r\n )\r\n .join(\"\")\r\n }\r\n\r\n <\/div>\r\n\r\n\r\n <button\r\n class=\"btn\"\r\n style=\"margin-top:16px\"\r\n onclick=\"adminSection('game')\"\r\n >\r\n BACK\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n ROOM MAPPING\r\n========================================================= *\/\r\n\r\nfunction showMapping(){\r\n\r\n document.getElementById(\r\n \"adminMain\"\r\n ).innerHTML=`\r\n\r\n <div class=\"card\">\r\n\r\n <div class=\"kicker\">\r\n ROOM MAPPING\r\n <\/div>\r\n\r\n <h2>\r\n Secret Room \u2192 Answer Mapping\r\n <\/h2>\r\n\r\n <p\r\n class=\"subtitle\"\r\n style=\"\r\n text-align:left;\r\n margin:0 0 20px\r\n \"\r\n >\r\n\r\n Students only see room names.\r\n\r\n Admin decides which room represents\r\n A, B, C and D.\r\n\r\n <\/p>\r\n\r\n\r\n ${\r\n [0,1,2,3]\r\n .map(\r\n index=>`\r\n\r\n <div class=\"field\">\r\n\r\n <label>\r\n OPTION\r\n ${String.fromCharCode(65+index)}\r\n <\/label>\r\n\r\n <select\r\n onchange=\"\r\n state.mapping[\r\n ${index}\r\n ]=+this.value;\r\n save();\r\n \"\r\n >\r\n\r\n ${\r\n roomNames\r\n .map(\r\n (room,roomIndex)=>`\r\n\r\n <option\r\n value=\"${roomIndex}\"\r\n ${\r\n state.mapping[index]\r\n ===roomIndex\r\n ?\"selected\"\r\n :\"\"\r\n }\r\n >\r\n\r\n ${roomIcons[\r\n roomIndex\r\n ]}\r\n\r\n ${room}\r\n\r\n <\/option>\r\n\r\n `\r\n )\r\n .join(\"\")\r\n }\r\n\r\n <\/select>\r\n\r\n <\/div>\r\n\r\n `\r\n )\r\n .join(\"\")\r\n }\r\n\r\n\r\n <button\r\n class=\"btn primary\"\r\n onclick=\"shuffleMapping();render()\"\r\n >\r\n \ud83d\udd00 SHUFFLE MAPPING\r\n <\/button>\r\n\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"adminSection('game')\"\r\n >\r\n BACK\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n SHUFFLE\r\n========================================================= *\/\r\n\r\nfunction shuffleMapping(){\r\n\r\n state.mapping =\r\n [0,1,2,3]\r\n .sort(\r\n ()=>Math.random()-.5\r\n );\r\n\r\n save();\r\n\r\n toast(\r\n \"Room mapping shuffled\"\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n TIMER\r\n========================================================= *\/\r\n\r\nfunction startTimer(){\r\n\r\n clearInterval(\r\n window.gameTimer\r\n );\r\n\r\n state.timerLeft =\r\n state.timer;\r\n\r\n state.timerRunning=true;\r\n\r\n render();\r\n\r\n window.gameTimer =\r\n setInterval(\r\n ()=>{\r\n\r\n state.timerLeft--;\r\n\r\n const adminTimer =\r\n document.getElementById(\r\n \"adminTimer\"\r\n );\r\n\r\n if(adminTimer){\r\n\r\n adminTimer.textContent =\r\n state.timerLeft+\"s\";\r\n\r\n }\r\n\r\n if(state.timerLeft<=0){\r\n\r\n clearInterval(\r\n window.gameTimer\r\n );\r\n\r\n state.timerRunning=false;\r\n\r\n toast(\r\n \"TIME UP \u2014 LOCK ANSWERS\"\r\n );\r\n\r\n }\r\n\r\n },\r\n 1000\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n LOCK ROUND\r\n========================================================= *\/\r\n\r\nfunction lockRound(){\r\n\r\n state.answerLocked=true;\r\n\r\n save();\r\n\r\n toast(\r\n \"Round locked\"\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n REVEAL\r\n========================================================= *\/\r\n\r\nfunction revealRound(){\r\n\r\n const round =\r\n rounds[state.round];\r\n\r\n toast(\r\n \"Correct answer: \" +\r\n round[2]\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n ELIMINATE\r\n========================================================= *\/\r\n\r\nfunction eliminateWrong(){\r\n\r\n toast(\r\n \"Wrong-path players should now be eliminated.\"\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n NEXT ROUND\r\n========================================================= *\/\r\n\r\nfunction nextRound(){\r\n\r\n if(state.round<19){\r\n\r\n state.round++;\r\n\r\n state.answerLocked=false;\r\n\r\n state.timerLeft=\r\n state.timer;\r\n\r\n save();\r\n\r\n render();\r\n\r\n }\r\n\r\n else{\r\n\r\n toast(\r\n \"FINAL ROUND COMPLETE\"\r\n );\r\n\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n JUMP ROUND\r\n========================================================= *\/\r\n\r\nfunction jumpRound(index){\r\n\r\n state.round=index;\r\n\r\n state.answerLocked=false;\r\n\r\n state.timerLeft=\r\n state.timer;\r\n\r\n save();\r\n\r\n render();\r\n\r\n}\r\n\r\n\/* =========================================================\r\n RESET\r\n========================================================= *\/\r\n\r\nfunction resetGame(){\r\n\r\n if(\r\n confirm(\r\n \"Reset the entire game?\"\r\n )\r\n ){\r\n\r\n localStorage.removeItem(\r\n \"digitalSquidState\"\r\n );\r\n\r\n location.reload();\r\n\r\n }\r\n\r\n}\r\n\r\n\/* =========================================================\r\n PLAYER MODE\r\n========================================================= *\/\r\n\r\nfunction showPlayerSetup(){\r\n\r\n state.mode=\"player\";\r\n\r\n render();\r\n\r\n}\r\n\r\n\/* =========================================================\r\n PLAYER SCREEN\r\n========================================================= *\/\r\n\r\nfunction renderPlayer(app){\r\n\r\n const round =\r\n rounds[state.round];\r\n\r\n if(state.answerLocked){\r\n\r\n app.innerHTML=`\r\n\r\n <div class=\"player\">\r\n\r\n <div class=\"player-shell\">\r\n\r\n <div class=\"player-head\">\r\n\r\n <div class=\"logo\">\r\n DIGITAL\r\n <span>SQUID<\/span>\r\n <\/div>\r\n\r\n <div class=\"pill\">\r\n ROUND\r\n ${state.round+1}\/20\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"card\">\r\n\r\n <div class=\"kicker\">\r\n ANSWERS LOCKED\r\n <\/div>\r\n\r\n <h2>\r\n YOUR CHOICE HAS BEEN LOCKED.\r\n <\/h2>\r\n\r\n <p\r\n class=\"subtitle\"\r\n style=\"\r\n text-align:left;\r\n margin:0\r\n \"\r\n >\r\n\r\n Wait for the Game Master\r\n to reveal the result.\r\n\r\n <\/p>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n app.innerHTML=`\r\n\r\n <div class=\"player\">\r\n\r\n <div class=\"player-shell\">\r\n\r\n <div class=\"player-head\">\r\n\r\n <div>\r\n\r\n <div class=\"logo\">\r\n DIGITAL\r\n <span>SQUID<\/span>\r\n <\/div>\r\n\r\n <div class=\"label\">\r\n THINK \u2022 DISCUSS \u2022 CHOOSE\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"timer\"\r\n id=\"playerTimer\"\r\n >\r\n ${state.timerLeft}s\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"card\">\r\n\r\n <div class=\"toolbar\">\r\n\r\n <span class=\"kicker\">\r\n ROUND ${state.round+1}\r\n <\/span>\r\n\r\n <span class=\"pill\">\r\n ${esc(round[0])}\r\n <\/span>\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"visual player-visual\"\r\n >\r\n\r\n <div class=\"visual-inner\">\r\n\r\n ${esc(round[4])}\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"question\">\r\n\r\n ${esc(round[1])}\r\n\r\n <\/div>\r\n\r\n\r\n <div class=\"choice-grid\">\r\n\r\n ${\r\n round[3]\r\n .map(\r\n (option,index)=>`\r\n\r\n <button\r\n class=\"choice\"\r\n onclick=\"\r\n chooseRoom(\r\n ${index}\r\n )\r\n \"\r\n >\r\n\r\n <span class=\"letter\">\r\n\r\n ${\r\n String.fromCharCode(\r\n 65+index\r\n )\r\n }.\r\n\r\n <\/span>\r\n\r\n ${esc(option)}\r\n\r\n <\/button>\r\n\r\n `\r\n )\r\n .join(\"\")\r\n }\r\n\r\n <\/div>\r\n\r\n\r\n <div\r\n class=\"notice\"\r\n style=\"margin-top:16px\"\r\n >\r\n\r\n Choose the answer you\r\n believe is correct.\r\n\r\n <br><br>\r\n\r\n The room mapping is controlled\r\n secretly by the Game Master.\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n PLAYER CHOICE\r\n========================================================= *\/\r\n\r\nfunction chooseRoom(optionIndex){\r\n\r\n const selectedRoom =\r\n state.mapping[optionIndex];\r\n\r\n state.answerLocked=true;\r\n\r\n state.selections.demo =\r\n selectedRoom;\r\n\r\n const round =\r\n rounds[state.round];\r\n\r\n const correctIndex =\r\n round[3].indexOf(\r\n round[2]\r\n );\r\n\r\n const correctRoom =\r\n state.mapping[\r\n correctIndex\r\n ];\r\n\r\n\r\n \/*\r\n WRONG PATH\r\n *\/\r\n\r\n if(\r\n selectedRoom !== correctRoom\r\n ){\r\n\r\n state.mode=\"eliminate\";\r\n\r\n save();\r\n\r\n render();\r\n\r\n return;\r\n\r\n }\r\n\r\n\r\n \/*\r\n CORRECT PATH\r\n *\/\r\n\r\n save();\r\n\r\n render();\r\n\r\n\r\n setTimeout(\r\n ()=>{\r\n\r\n state.mode=\"player\";\r\n\r\n if(state.round<19){\r\n\r\n state.round++;\r\n\r\n }\r\n\r\n state.answerLocked=false;\r\n\r\n state.timerLeft=\r\n state.timer;\r\n\r\n save();\r\n\r\n render();\r\n\r\n },\r\n 1800\r\n );\r\n\r\n}\r\n\r\n\/* =========================================================\r\n ELIMINATION SCREEN\r\n========================================================= *\/\r\n\r\nfunction renderEliminate(app){\r\n\r\n app.innerHTML=`\r\n\r\n <div class=\"eliminate\">\r\n\r\n <div>\r\n\r\n <div class=\"kicker\">\r\n PLAYER STATUS\r\n <\/div>\r\n\r\n <h2>\r\n ELIMINATED\r\n <\/h2>\r\n\r\n <p>\r\n You chose the wrong path.\r\n <\/p>\r\n\r\n <button\r\n class=\"btn\"\r\n onclick=\"\r\n state.mode='player';\r\n state.answerLocked=false;\r\n save();\r\n render();\r\n \"\r\n >\r\n WATCH THE GAME\r\n <\/button>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n `;\r\n\r\n}\r\n\r\n\/* =========================================================\r\n START\r\n========================================================= *\/\r\n\r\nload();\r\n\r\nrender();\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Digital Squid \u2014 Marketing Survival Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","_yoast_wpseo_focuskw":"","rank_math_title":"","rank_math_description":"","rank_math_focus_keyword":""},"class_list":["post-695","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/695","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=695"}],"version-history":[{"count":4,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/695\/revisions"}],"predecessor-version":[{"id":714,"href":"https:\/\/kalhonaho.online\/index.php?rest_route=\/wp\/v2\/pages\/695\/revisions\/714"}],"wp:attachment":[{"href":"https:\/\/kalhonaho.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}