Spaces:

eaglelandsonce
/

AB_730_Learning_Game

Running

App Files Files Community

eaglelandsonce commited on Feb 19

Commit

0700dee

verified ·

1 Parent(s): 292622d

Create index.html

Browse files

Files changed (1) hide show

index.html +876 -0

index.html ADDED Viewed

	@@ -0,0 +1,876 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Copilot Quest — Adventure Quiz</title>
+  <style>
+    :root {
+      --bg: #0b1020;
+      --panel: rgba(255,255,255,.06);
+      --text: rgba(255,255,255,.92);
+      --muted: rgba(255,255,255,.70);
+      --border: rgba(255,255,255,.12);
+      --shadow: 0 12px 30px rgba(0,0,0,.35);
+      --radius: 18px;
+      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+    }
+    html, body {
+      height: 100%;
+      margin: 0;
+      background: radial-gradient(1200px 900px at 20% 10%, rgba(120,200,255,.15), transparent 60%),
+                  radial-gradient(900px 700px at 80% 40%, rgba(200,120,255,.12), transparent 60%),
+                  radial-gradient(900px 700px at 40% 90%, rgba(120,255,200,.10), transparent 60%),
+                  var(--bg);
+      color: var(--text);
+      font-family: var(--sans);
+    }
+    .wrap { max-width: 1100px; margin: 0 auto; padding: 18px; box-sizing: border-box; }
+    header { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; }
+    .brand { display:flex; gap:12px; align-items:center; }
+    .logo {
+      width: 44px; height: 44px; border-radius: 14px;
+      background: linear-gradient(135deg, rgba(120,200,255,.35), rgba(200,120,255,.25));
+      border: 1px solid var(--border); box-shadow: var(--shadow);
+      display:grid; place-items:center; font-weight:800; letter-spacing:.5px;
+    }
+    h1 { font-size: 18px; margin: 0; line-height: 1.1; }
+    .subtitle { font-size: 12px; color: var(--muted); margin-top: 2px; }
+    .grid { display:grid; grid-template-columns: 1.6fr .9fr; gap:14px; }
+    @media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }
+    .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
+    .card .hd { padding: 14px 16px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--border); display:flex; gap:10px; align-items:center; justify-content:space-between; }
+    .card .bd { padding: 16px; }
+    .btnrow { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
+    button {
+      border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--text);
+      border-radius: 14px; padding: 10px 12px; cursor: pointer; transition: transform .06s ease, background .12s ease;
+      font-weight: 600;
+    }
+    button:hover { background: rgba(255,255,255,.10); }
+    button:active { transform: translateY(1px); }
+    button.primary { background: rgba(120,200,255,.18); border-color: rgba(120,200,255,.30); }
+    button.danger { background: rgba(255,120,140,.12); border-color: rgba(255,120,140,.26); }
+    button.small { padding: 7px 10px; border-radius: 12px; font-size: 12px; }
+    .stats { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
+    .stat { padding: 12px; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 16px; }
+    .stat .k { font-size: 12px; color: var(--muted); }
+    .stat .v { font-size: 18px; font-weight: 800; margin-top: 2px; font-family: var(--mono); }
+    .hearts { letter-spacing: 2px; font-size: 16px; margin-top: 4px; font-family: var(--mono); }
+    .pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.05); font-size:12px; color: var(--muted); }
+    .question { font-size: 15px; line-height: 1.45; white-space: pre-wrap; margin: 0 0 14px 0; }
+    .hint { color: var(--muted); font-size: 12px; margin-top: -4px; margin-bottom: 10px; }
+    .choices { display:grid; gap: 10px; }
+    label.choice {
+      display:flex; gap:10px; align-items:flex-start; padding: 12px;
+      border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.04);
+      cursor: pointer;
+    }
+    label.choice:hover { background: rgba(255,255,255,.07); }
+    .choice .letter {
+      width: 30px; height: 30px; border-radius: 12px;
+      background: rgba(255,255,255,.07); border: 1px solid var(--border);
+      display:grid; place-items:center; font-weight:800; font-family: var(--mono); flex: 0 0 auto;
+    }
+    .choice .txt { color: var(--text); line-height: 1.35; font-size: 14px; }
+    .msg { margin-top: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.05); white-space: pre-wrap; }
+    .msg.good { border-color: rgba(120,255,180,.35); }
+    .msg.bad  { border-color: rgba(255,120,140,.35); }
+    .msg.warn { border-color: rgba(255,210,120,.35); }
+    .map { display:grid; gap: 10px; }
+    .node { padding: 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.04); }
+    .node .t { font-weight: 800; margin-bottom: 4px; }
+    .node .d { color: var(--muted); font-size: 12px; line-height: 1.35; }
+    .node.active { border-color: rgba(120,200,255,.35); background: rgba(120,200,255,.10); }
+    .node.done { border-color: rgba(120,255,180,.35); background: rgba(120,255,180,.08); }
+    .inventory { display:grid; gap: 8px; margin-top: 10px; }
+    .item { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.04); font-size: 13px; }
+    .item .name { font-weight: 800; margin-bottom: 2px; }
+    .item .desc { color: var(--muted); font-size: 12px; line-height: 1.35; }
+    .foot { color: var(--muted); font-size: 12px; margin-top: 10px; line-height: 1.35; }
+    .kbd { font-family: var(--mono); font-size: 12px; padding: 2px 6px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.05); }
+    /* --- music controls --- */
+    #musicVol{
+      width: 140px;
+      height: 28px;
+      vertical-align: middle;
+      accent-color: rgba(120,200,255,.85);
+      opacity: .92;
+    }
+  </style>
+</head>
+<body>
+  <div class="wrap">
+    <header>
+      <div class="brand">
+        <div class="logo">CQ</div>
+        <div>
+          <h1>Copilot Quest</h1>
+          <div class="subtitle">Adventure-styled multiple-choice practice game (offline, single file)</div>
+        </div>
+      </div>
+      <div class="btnrow">
+        <button class="small" id="btnSound">Sound: On</button>
+        <button class="small" id="btnMusic">Music: On</button>
+        <input id="musicVol" type="range" min="0" max="100" value="25" title="Music volume" />
+        <button class="small" id="btnSave">Save</button>
+        <button class="small" id="btnLoad">Load</button>
+        <button class="small danger" id="btnReset">Reset</button>
+      </div>
+    </header>
+    <div class="grid">
+      <section class="card">
+        <div class="hd">
+          <div>
+            <span class="pill" id="badgeRegion">Region: —</span>
+            <span class="pill" id="badgeProgress">Progress: —</span>
+          </div>
+          <div class="btnrow">
+            <button class="primary" id="btnPrimary">Start</button>
+          </div>
+        </div>
+        <div class="bd">
+          <p class="question" id="story"></p>
+          <div id="qArea" style="display:none;">
+            <p class="question" id="qText"></p>
+            <div class="hint" id="qHint"></div>
+            <div class="choices" id="choices"></div>
+          </div>
+          <div class="msg" id="msg" style="display:none;"></div>
+          <div class="foot">
+            Tip: For multi-select questions, pick the exact set of answers (order doesn’t matter). Your state is saved to your browser via <span class="kbd">Save</span>/<span class="kbd">Load</span>.
+          </div>
+        </div>
+      </section>
+      <aside class="card">
+        <div class="hd">
+          <div><strong>Adventurer Sheet</strong></div>
+          <div class="pill" id="badgeMode">Mode: —</div>
+        </div>
+        <div class="bd">
+          <div class="stats">
+            <div class="stat">
+              <div class="k">HP</div>
+              <div class="v hearts" id="hp"></div>
+            </div>
+            <div class="stat">
+              <div class="k">Level</div>
+              <div class="v" id="lvl"></div>
+            </div>
+            <div class="stat">
+              <div class="k">XP</div>
+              <div class="v" id="xp"></div>
+            </div>
+            <div class="stat">
+              <div class="k">Gold</div>
+              <div class="v" id="gold"></div>
+            </div>
+          </div>
+          <h3 style="margin:14px 0 8px 0; font-size:14px;">Map</h3>
+          <div class="map" id="map"></div>
+          <h3 style="margin:14px 0 8px 0; font-size:14px;">Inventory</h3>
+          <div class="inventory" id="inv"></div>
+        </div>
+      </aside>
+    </div>
+  </div>
+<script>
+  const QUESTION_BANK = [{"id": "T1-Q1", "topic": 1, "qnum": 1, "stem": "You are using Microsoft 365 Copilot to enhance your productivity in Microsoft\nExcel.\nWhich two tasks can you achieve by using Copilot in Excel? Each correct answer\npresents a complete the solution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "Customize the conditional formatting rules for your data."}, {"id": "B", "text": "Insert a custom chart that has specific formatting."}, {"id": "C", "text": "Generate a summary of key insights from your data."}, {"id": "D", "text": "Build a pivot table based on your data."}], "answer": ["C", "D"], "multi": true}, {"id": "T1-Q2", "topic": 1, "qnum": 2, "stem": "You are using Microsoft 365 Copilot to enhance your productivity in Microsoft\nWord.\nWhich two tasks can you achieve by using Copilot in Word? Each correct answer\npresents a complete the solution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "Insert a table of contents based on the headings in your document."}, {"id": "B", "text": "Customize the page margins to match your company's document standards."}, {"id": "C", "text": "Generate a summary of the key points in your document."}, {"id": "D", "text": "Insert a custom watermark that has specific text and formatting."}], "answer": ["A", "C"], "multi": true}, {"id": "T1-Q3", "topic": 1, "qnum": 3, "stem": "You are using Microsoft 365 Copilot to enhance your productivity in Microsoft\nOutlook.\nWhich two tasks can you achieve by using Copilot in Outlook? Each correct\nanswer presents a complete the solution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "Insert a custom HTML signature that has specific formatting."}, {"id": "B", "text": "Generate a draft response to an email based on the context of the conversation."}, {"id": "C", "text": "Create a summary of unread emails in your inbox."}, {"id": "D", "text": "Customize the folder structure to organize your emails."}], "answer": ["B", "C"], "multi": true}, {"id": "T1-Q4", "topic": 1, "qnum": 4, "stem": "You have a Microsoft 365 Copilot license.\nYou are preparing a business presentation by using Copilot in PowerPoint.\nWhich two tasks can you achieve by using Copilot in PowerPoint? Each correct\nanswer presents a complete the solution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "Insert a custom animation for a specific object on a slide."}, {"id": "B", "text": "Create a slide layout based on the content of your presentation."}, {"id": "C", "text": "Customize the design theme of your presentation to match your company's branding."}, {"id": "D", "text": "Produce a summary slide based on the key points in your presentation."}], "answer": ["B", "D"], "multi": true}, {"id": "T1-Q5", "topic": 1, "qnum": 5, "stem": "You are using Microsoft 365 Copilot to enhance your productivity in Microsoft\nTeams.\nWhich two tasks can you achieve by using Copilot in Teams? Each correct answer\npresents a complete the solution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "Mute and unmute participants in a meeting based on their location."}, {"id": "B", "text": "Create a custom background and add the background to your video calls."}, {"id": "C", "text": "Create a meeting summary, including key decisions and action items."}, {"id": "D", "text": "Draft a response to a channel message based on the context of the conversation."}], "answer": ["C", "D"], "multi": true}, {"id": "T1-Q6", "topic": 1, "qnum": 6, "stem": "A colleague from another company shares a link to a prompt.\nWhen you select the link, you receive the following response: \"Prompt not found.\nSorry, it looks like the prompt is no longer available.\"\nWhat is a possible cause of the response?", "options": [{"id": "A", "text": "The prompt is outdated."}, {"id": "B", "text": "The prompt is outside of your organization."}, {"id": "C", "text": "The prompt contains a reference to a file that you do NOT have access to."}, {"id": "D", "text": "The prompt is a scheduled prompt."}, {"id": "E", "text": "The prompt contains a file that has a sensitivity label applied."}], "answer": ["B"], "multi": false}, {"id": "T1-Q7", "topic": 1, "qnum": 7, "stem": "You run a saved prompt and receive the following response: \"You asked for a\nsummary of File.docx. However, the file appears to be either empty, corrupted, or\nin a format that I cannot process.\"\nWhat is a possible cause of the response?", "options": [{"id": "A", "text": "You did NOT schedule the prompt to run."}, {"id": "B", "text": "You ran the prompt from a web app instead of a desktop app."}, {"id": "C", "text": "You used the wrong agent to run the prompt."}, {"id": "D", "text": "You do NOT have access to the file."}], "answer": ["D"], "multi": false}, {"id": "T1-Q8", "topic": 1, "qnum": 8, "stem": "You receive several images from a colleague.\nYou suspect that the images were generated by using Microsoft 365 Copilot.\nWhat can you use to verify whether the images were AI-generated?", "options": [{"id": "A", "text": "file names"}, {"id": "B", "text": "watermarks"}, {"id": "C", "text": "content credentials"}, {"id": "D", "text": "file descriptions"}], "answer": ["C"], "multi": false}, {"id": "T1-Q9", "topic": 1, "qnum": 9, "stem": "You are a merchandiser who is planning for the upcoming season.\nYou prompt Microsoft 365 Copilot to suggest which products to stock based on\nhistorical sales data. Without reviewing the suggestions or checking current\nmarket trends, you place a large order based solely on the output of Copilot.\nWhat is this an example of?", "options": [{"id": "A", "text": "verification"}, {"id": "B", "text": "overreliance"}, {"id": "C", "text": "fabrication"}, {"id": "D", "text": "prompt injection"}], "answer": ["B"], "multi": false}, {"id": "T1-Q10", "topic": 1, "qnum": 10, "stem": "You are comparing the difference between Microsoft 365 Copilot and Microsoft\n365 Copilot Chat.\nWhat is available in both versions?", "options": [{"id": "A", "text": "the Researcher agent"}, {"id": "B", "text": "Copilot Pages"}, {"id": "C", "text": "Copilot Notebooks"}], "answer": ["B"], "multi": false}, {"id": "T1-Q11", "topic": 1, "qnum": 11, "stem": "You are discussing Microsoft 365 Copilot with a colleague. The colleague asks\nwhich data Copilot uses to answer questions when using the Work scope.\nWhat should you tell your colleague?", "options": [{"id": "A", "text": "Copilot provides responses based only on data that the user can access and the general knowledge that Copilot was trained on."}, {"id": "B", "text": "Copilot provides responses based on all the data in your organization's Microsoft 365 environment and the general knowledge that Copilot was trained on."}, {"id": "C", "text": "Copilot provides responses based only on data that the user can access."}, {"id": "D", "text": "Copilot provides responses based only on the general knowledge that Copilot was trained on."}], "answer": ["A"], "multi": false}, {"id": "T1-Q18", "topic": 1, "qnum": 18, "stem": "You open Microsoft 356 Copilot as shown in the following exhibit.\nWhat can you infer about the Standings conversation?", "options": [{"id": "A", "text": "The conversation contains only anonymous data."}, {"id": "B", "text": "The conversation contains a verified response."}, {"id": "C", "text": "The conversation was added to a notebook."}, {"id": "D", "text": "The conversation contains a scheduled prompt."}, {"id": "E", "text": "The conversation was shared."}], "answer": ["A"], "multi": false}, {"id": "T2-Q2", "topic": 2, "qnum": 2, "stem": "You are using Microsoft 365 Copilot to plan a trip and have asked Copilot to\nremember several details about the trip.\nYou cancel the trip plans.\nYou need to ensure that Copilot forgets the details.\nWhat should you do?", "options": [{"id": "A", "text": "From the My Account portal, delete the Copilot activity history."}, {"id": "B", "text": "From Copilot, delete memories."}, {"id": "C", "text": "From Copilot, delete custom instructions."}, {"id": "D", "text": "From Copilot, delete all the conversation about the trip."}], "answer": ["B"], "multi": false}, {"id": "T2-Q3", "topic": 2, "qnum": 3, "stem": "You are a marketing assistant preparing for a budget meeting with your manager.\nYou need to evaluate key spending and performance trends from the last year to\nunderstand which marketing channels deliver the best return on investment\n(ROI).\nWhat should you use in Microsoft 365 Copilot to achieve the goal? More than one\nanswer choice may achieve the goal. Select the BEST answer.", "options": [{"id": "A", "text": "the Analyst agent"}, {"id": "B", "text": "Chat"}, {"id": "C", "text": "the Researcher agent"}, {"id": "D", "text": "a notebook"}], "answer": ["A"], "multi": false}, {"id": "T2-Q4", "topic": 2, "qnum": 4, "stem": "You have several pages in Microsoft 365 Copilot related to the research you are\ndoing for a new product.\nYou need to simplify your ability to have many different Copilot conversations\nabout the pages.\nWhat should you do first?", "options": [{"id": "A", "text": "Create a story."}, {"id": "B", "text": "Add the pages to a notebook."}, {"id": "C", "text": "Add the pages to a conversation."}, {"id": "D", "text": "Download the pages locally."}], "answer": ["B"], "multi": false}, {"id": "T2-Q5", "topic": 2, "qnum": 5, "stem": "You are creating a custom analytics agent in the Microsoft 365 Copilot app. The\nagent will use Microsoft Excel files that contain sales data as knowledge.\nYou need to ensure that the agent can create visualizations, perform\nmathematical operations, create aggregations, and analyze the data in the files.\nWhat should you add to the agent?", "options": [{"id": "A", "text": "a suggested prompt"}, {"id": "B", "text": "code interpreter"}, {"id": "C", "text": "image generator"}, {"id": "D", "text": "a template"}], "answer": ["A"], "multi": false}, {"id": "T2-Q6", "topic": 2, "qnum": 6, "stem": "You create a prompt in Microsoft 365 Copilot to help you create a draft project\nreport.\nYou need the prompt to be available in the Copilot Prompt Gallery.\nWhat should you do first?", "options": [{"id": "A", "text": "Create a notebook."}, {"id": "B", "text": "Add an agent."}, {"id": "C", "text": "Create a page."}, {"id": "D", "text": "Run the prompt."}], "answer": ["D"], "multi": false}, {"id": "T2-Q7", "topic": 2, "qnum": 7, "stem": "You create a Microsoft 365 Copilot notebook and add a file named Process.docx\nfrom a local folder.\nYesterday, you updated Process.docx in the local folder.\nWhat will occur when you chat in the notebook?", "options": [{"id": "A", "text": "The chat will reference the most recent version of Process.docx."}, {"id": "B", "text": "The chat will reference both versions of Process.docx."}, {"id": "C", "text": "The chat will reference only the original version of Process.docx."}], "answer": ["C"], "multi": false}, {"id": "T2-Q8", "topic": 2, "qnum": 8, "stem": "You have several separate Microsoft 365 Copilot conversations.\nYou need to gather the conversations so that you can find them more easily, and\nthe conversations can share the same reference material.\nWhat is the best solution to achieve the goal? More than one answer choice may\nachieve the goal. Select the BEST answer.", "options": [{"id": "A", "text": "a notebook"}, {"id": "B", "text": "an agent"}, {"id": "C", "text": "an app"}, {"id": "D", "text": "a page"}], "answer": ["A"], "multi": false}, {"id": "T2-Q9", "topic": 2, "qnum": 9, "stem": "You plan to use a notebook in Microsoft 365 Copilot.\nWhat is the purpose of a notebook?", "options": [{"id": "A", "text": "to create a transcript of a conversation that you can easily email to other users"}, {"id": "B", "text": "to provide a private location that can be used to organize reference materials across related conversations"}, {"id": "C", "text": "to generate a summary of all the interactions you had with Copilot during a specific conversation"}], "answer": ["B"], "multi": false}, {"id": "T2-Q10", "topic": 2, "qnum": 10, "stem": "You have a Microsoft Excel workbook open that contains a table. The table\ncontains sales data and the following columns:\n• OrderDate\n• OrderNumber\n• Amount\nYou plan to use Microsoft Copilot in Excel to generate a monthly summary of the\nsales data in the table.\nWhat should you include in the prompt to generate an effective summary? More\nthan one answer choice may achieve the goal. Select the BEST answer.", "options": [{"id": "A", "text": "the desired format of the response"}, {"id": "B", "text": "a specific cell range from the worksheet"}, {"id": "C", "text": "the file name of the workbook"}, {"id": "D", "text": "the clear goal of the summary"}, {"id": "E", "text": "a formula to calculate monthly totals"}], "answer": ["D"], "multi": false}, {"id": "T2-Q11", "topic": 2, "qnum": 11, "stem": "You are creating a prompt in Microsoft 365 Copilot to get information about a\nproposal.\nYou need to ensure that the response is grounded in the proposal's information.\nWhat is the best approach to achieve the goal? More than one answer choice may\nachieve the goal. Select the BEST answer.", "options": [{"id": "A", "text": "Add context about the intended audience."}, {"id": "B", "text": "Instruct Copilot to rely on its training data to infer proposal details."}, {"id": "C", "text": "Reference the proposal content in the prompt."}, {"id": "D", "text": "Add a specific goal that you want Copilot to accomplish."}], "answer": ["C"], "multi": false}, {"id": "T2-Q12", "topic": 2, "qnum": 12, "stem": "You need to improve prompt-grounding during a Microsoft 365 Copilot\nconversation.\nWhat is the best approach to achieve the goal? More than one answer choice may\nachieve the goal. Select the BEST answer.", "options": [{"id": "A", "text": "Use shorter prompts."}, {"id": "B", "text": "Provide the desired output format."}, {"id": "C", "text": "Avoid technical jargon."}, {"id": "D", "text": "Reference specific files."}], "answer": ["D"], "multi": false}, {"id": "T2-Q13", "topic": 2, "qnum": 13, "stem": "You create a Microsoft 365 Copilot notebook and add a file named Process.docx\nfrom a Microsoft SharePoint site as a reference.\nYesterday, a user updated Process.docx in the SharePoint site.\nWhat will occur when you chat in the notebook?", "options": [{"id": "A", "text": "The chat will reference only the original version of Process.docx."}, {"id": "B", "text": "The chat will reference the most recent version of Process.docx."}, {"id": "C", "text": "The chat will reference both versions of Process.docx."}], "answer": ["B"], "multi": false}, {"id": "T2-Q14", "topic": 2, "qnum": 14, "stem": "You use Microsoft 365 Copilot.\nYou discover that you had a conversation that used a knowledge source that\ncontains confidential information.\nYou need to delete the conversation data without requiring administrative\napproval. You must retain your other conversations, if possible.\nWhat should you use?", "options": [{"id": "A", "text": "the Microsoft 365 admin center"}, {"id": "B", "text": "the My Account portal in Microsoft 365 Copilot"}, {"id": "C", "text": "the Microsoft Purview compliance portal"}, {"id": "D", "text": "the Microsoft 365 Copilot app"}], "answer": ["B"], "multi": false}, {"id": "T2-Q15", "topic": 2, "qnum": 15, "stem": "You have an open Microsoft 365 Copilot conversation.\nYou need to chat with an agent named Agent1 during the conversation.\nWhat should you enter to call Agent1?", "options": [{"id": "A", "text": "[Agent1]"}, {"id": "B", "text": "#Agent1"}, {"id": "C", "text": "/Agent1"}, {"id": "D", "text": "@Agent1"}], "answer": ["D"], "multi": false}, {"id": "T2-Q16", "topic": 2, "qnum": 16, "stem": "You use Microsoft 365 Copilot.\nYou regularly upload the same five files to Copilot chats.\nYou need to simplify referencing the files in the chats.\nWhat are two ways to achieve the goal? Each correct answer presents a complete\nsolution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "Create an agent that has a knowledge source."}, {"id": "B", "text": "Send a prompt that includes the files, and then save the prompt."}, {"id": "C", "text": "Create a notebook that references the files."}, {"id": "D", "text": "Ask the data engineers to create a fine-tuned model."}, {"id": "E", "text": "Zip the documents and upload the ZIP file to the chats."}], "answer": ["B", "C"], "multi": true}, {"id": "T2-Q17", "topic": 2, "qnum": 17, "stem": "You have a Microsoft 365 subscription.\nYou do NOT have a Microsoft 365 Copilot license.\nWhen you send a prompt in Microsoft 365 Copilot Chat, which three sources does\nCopilot Chat use to respond? Each correct answer presents part of the solution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "chat data in Microsoft Teams"}, {"id": "B", "text": "your organization's databases"}, {"id": "C", "text": "the prompt context"}, {"id": "D", "text": "organizational data in Microsoft 365"}, {"id": "E", "text": "internet search data"}, {"id": "F", "text": "the conversation history"}], "answer": ["C", "E", "F"], "multi": true}, {"id": "T2-Q18", "topic": 2, "qnum": 18, "stem": "You are a project coordinator for a small consulting firm.\nYou are responsible for tracking client communications, managing project\ntimelines, and preparing weekly status updates for internal stakeholders.\nYou have a Microsoft 365 Copilot license.\nYou create an agent to help you monitor project milestones, follow up on client\nemails, and generate weekly summary reports.\nWith whom can you share the agent?", "options": [{"id": "A", "text": "only the people in your organization"}, {"id": "B", "text": "the people in your organization and people that have personal Microsoft accounts"}, {"id": "C", "text": "only Microsoft Teams channel members"}, {"id": "D", "text": "any person who has a valid email address"}], "answer": ["A"], "multi": false}, {"id": "T3-Q3", "topic": 3, "qnum": 3, "stem": "You plan to summarize a proposal for a partnership between your company and\nanother company.\nYou need to use Microsoft 365 Copilot to summarize the information in the\nproposal as a bulleted list of three to five key points for a project kickoff meeting.\nEach bullet point must be concise and simply worded.\nWhich two details should you include in the prompt? Each correct answer\npresents part of the solution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "a list of contact details for key stakeholders of the partnership"}, {"id": "B", "text": "profiles of both companies generated by using the Researcher agent"}, {"id": "C", "text": "a specific knowledge source to ground the response"}, {"id": "D", "text": "concise instructions for what to do with the proposal"}], "answer": ["B", "C"], "multi": true}, {"id": "T3-Q4", "topic": 3, "qnum": 4, "stem": "In a Microsoft 365 Copilot conversation, you generate a report, and then edit the\nreport in a page.\nYou need to collaborate with a colleague on the report.\nWhat are two ways to achieve the goal? Each correct answer presents a complete\nthe solution.\nNOTE: Each correct selection is worth one point.", "options": [{"id": "A", "text": "Mention the colleague in the page."}, {"id": "B", "text": "Open the page in Microsoft Word."}, {"id": "C", "text": "Share the page link."}, {"id": "D", "text": "Add the page to a notebook."}], "answer": ["B", "C"], "multi": true}, {"id": "T3-Q5", "topic": 3, "qnum": 5, "stem": "You attend many Microsoft Teams meetings.\nYou want to ensure that you can catch up on key points and next steps after each\nmeeting.\nWhich Microsoft 365 Copilot feature should you use after the meetings?", "options": [{"id": "A", "text": "Recap"}, {"id": "B", "text": "Meeting Whiteboard"}, {"id": "C", "text": "Meeting info"}, {"id": "D", "text": "Thread summaries"}], "answer": ["A"], "multi": false}, {"id": "T3-Q6", "topic": 3, "qnum": 6, "stem": "You are creating a custom agent in the Microsoft 365 Copilot app for the\nmarketing team at your company. The agent will be used to produce marketing\ncollateral, including copy, logos and artwork.\nWhat should you add to the agent? More than one answer choice may achieve the\ngoal. Select the BEST answer.", "options": [{"id": "A", "text": "code interpreter"}, {"id": "B", "text": "image generator"}, {"id": "C", "text": "a suggested prompt"}, {"id": "D", "text": "a template"}], "answer": ["B"], "multi": false}, {"id": "T3-Q7", "topic": 3, "qnum": 7, "stem": "You use Microsoft 365 Copilot to create a proposal in Microsoft Word based on a\ndocument in a Microsoft SharePoint library.\nYou need to ensure that the information cited in the proposal is accurate.\nWhat is the best approach to achieve the goal? More than one answer choice may\nachieve the goal. Select the BEST answer.", "options": [{"id": "A", "text": "Manually verify the citations in the generated content."}, {"id": "B", "text": "Use Copilot in Word to verify the citations."}, {"id": "C", "text": "Create an agent that contains your organization's editorial standards and use the agent to verify the citations."}, {"id": "D", "text": "Create a notebook that contains all the reference material and use the notebook to verify the citations."}], "answer": ["B"], "multi": false}, {"id": "T3-Q9", "topic": 3, "qnum": 9, "stem": "You sign in to the Microsoft 365 Copilot app by using your work account as shown\nin the following exhibit.\nA colleague tells you that when they open the Microsoft 365 Copilot app, they\nhave access to the Researcher agent.\nYou need to access to the Researcher agent.\nWhat should you do?", "options": [{"id": "A", "text": "Request a Microsoft 365 Copilot license from an administrator."}, {"id": "B", "text": "Select Explore agents and then search for Researcher."}, {"id": "C", "text": "Sign in to the Copilot app by using a personal account."}, {"id": "D", "text": "From Microsoft Edge, use your work account to sign in to https://copilot.microsoft.com."}], "answer": ["A"], "multi": false}];
+  const REGIONS = [
+    {
+      id: 1,
+      title: "The App Isles (Topic 1)",
+      desc: "Excel Caverns, Word Citadel, Outlook Docks, PowerPoint Peaks, Teams Tavern… prove you can wield Copilot across Microsoft 365 apps.",
+      reward: "Badge of Productivity"
+    },
+    {
+      id: 2,
+      title: "The Notebook Labyrinth (Topic 2)",
+      desc: "Notebooks, agents, grounding, prompts, and sharing rules. Keep your answers anchored or the labyrinth loops forever.",
+      reward: "Grounding Compass"
+    },
+    {
+      id: 3,
+      title: "The Content Forge (Topic 3)",
+      desc: "Draft, analyze, cite, and collaborate. Beware: the Citation Wraith punishes lazy verification.",
+      reward: "Quill of Clarity"
+    },
+  ];
+  // ---------- helpers ----------
+  const $ = (id) => document.getElementById(id);
+  const clamp = (n, a, b) => Math.max(a, Math.min(b, n));
+  const sortLetters = (arr) => [...arr].sort();
+  const eqSet = (a,b) => JSON.stringify(sortLetters(a)) === JSON.stringify(sortLetters(b));
+  const nowIso = () => new Date().toISOString();
+  // ---------- audio (offline SFX via Web Audio) ----------
+  let audioCtx = null;
+  let sfxEnabled = true;
+  const SFX_KEY = "copilot-quest-sfx-enabled-v1";
+  function loadSfxPref() {
+    try {
+      const v = localStorage.getItem(SFX_KEY);
+      if (v === "0" || v === "1") sfxEnabled = (v === "1");
+    } catch (e) {}
+  }
+  function saveSfxPref() {
+    try { localStorage.setItem(SFX_KEY, sfxEnabled ? "1" : "0"); } catch (e) {}
+  }
+  function setSoundButton() {
+    const b = $("btnSound");
+    if (!b) return;
+    const supported = !!(window.AudioContext || window.webkitAudioContext);
+    if (!supported) {
+      b.textContent = "Sound: Unsupported";
+      b.disabled = true;
+      return;
+    }
+    b.textContent = sfxEnabled ? "Sound: On" : "Sound: Off";
+  }
+  function initAudio() {
+    if (!sfxEnabled) return;
+    if (!audioCtx) {
+      const AC = window.AudioContext || window.webkitAudioContext;
+      if (!AC) return;
+      audioCtx = new AC();
+    }
+    if (audioCtx.state === "suspended") audioCtx.resume();
+  }
+  function playTone(freq, duration = 0.07, type = "sine", gain = 0.05, when = 0) {
+    if (!sfxEnabled) return;
+    initAudio();
+    if (!audioCtx) return;
+    const t0 = audioCtx.currentTime + when;
+    const osc = audioCtx.createOscillator();
+    const g = audioCtx.createGain();
+    osc.type = type;
+    osc.frequency.setValueAtTime(freq, t0);
+    // Simple "blip" envelope
+    g.gain.setValueAtTime(0.0001, t0);
+    g.gain.exponentialRampToValueAtTime(gain, t0 + 0.01);
+    g.gain.exponentialRampToValueAtTime(0.0001, t0 + duration);
+    osc.connect(g);
+    g.connect(audioCtx.destination);
+    osc.start(t0);
+    osc.stop(t0 + duration + 0.02);
+  }
+  function playPattern(notes) {
+    // notes: [{ f:Hz, d:sec, w:sec, t:type, g:gain }]
+    let offset = 0;
+    notes.forEach(n => {
+      playTone(n.f, n.d ?? 0.07, n.t ?? "sine", n.g ?? 0.05, offset);
+      offset += (n.w ?? n.d ?? 0.07);
+    });
+  }
+  function playSfx(name) {
+    switch (name) {
+      case "click":
+        playTone(520, 0.03, "triangle", 0.035);
+        break;
+      case "start":
+        playPattern([
+          { f: 440, d: 0.05, w: 0.05, t: "triangle", g: 0.05 },
+          { f: 660, d: 0.06, w: 0.06, t: "triangle", g: 0.05 },
+          { f: 880, d: 0.08, w: 0.08, t: "sine",     g: 0.055 },
+        ]);
+        break;
+      case "enter":
+        playPattern([
+          { f: 523, d: 0.05, w: 0.05, t: "triangle", g: 0.05 },
+          { f: 784, d: 0.07, w: 0.07, t: "triangle", g: 0.05 },
+        ]);
+        break;
+      case "correct":
+        playPattern([
+          { f: 784,  d: 0.06, w: 0.06, t: "sine", g: 0.055 },
+          { f: 988,  d: 0.06, w: 0.06, t: "sine", g: 0.055 },
+          { f: 1175, d: 0.08, w: 0.08, t: "sine", g: 0.060 },
+        ]);
+        break;
+      case "wrong":
+        playPattern([
+          { f: 220, d: 0.08, w: 0.08, t: "sawtooth", g: 0.040 },
+          { f: 180, d: 0.08, w: 0.08, t: "sawtooth", g: 0.040 },
+          { f: 140, d: 0.10, w: 0.10, t: "sawtooth", g: 0.040 },
+        ]);
+        break;
+      case "relic":
+        playPattern([
+          { f: 880,  d: 0.04, w: 0.04, t: "triangle", g: 0.050 },
+          { f: 1320, d: 0.05, w: 0.05, t: "triangle", g: 0.050 },
+        ]);
+        break;
+      case "region":
+        playPattern([
+          { f: 523, d: 0.07, w: 0.07, t: "triangle", g: 0.050 },
+          { f: 659, d: 0.07, w: 0.07, t: "triangle", g: 0.050 },
+          { f: 784, d: 0.09, w: 0.09, t: "sine",     g: 0.055 },
+        ]);
+        break;
+      case "victory":
+        playPattern([
+          { f: 659,  d: 0.07, w: 0.07, t: "triangle", g: 0.050 },
+          { f: 784,  d: 0.07, w: 0.07, t: "triangle", g: 0.050 },
+          { f: 988,  d: 0.10, w: 0.10, t: "sine",     g: 0.060 },
+          { f: 1319, d: 0.14, w: 0.14, t: "sine",     g: 0.060 },
+        ]);
+        break;
+      case "gameover":
+        playPattern([
+          { f: 196, d: 0.10, w: 0.10, t: "sawtooth", g: 0.040 },
+          { f: 165, d: 0.12, w: 0.12, t: "sawtooth", g: 0.040 },
+          { f: 131, d: 0.16, w: 0.16, t: "sawtooth", g: 0.040 },
+        ]);
+        break;
+      case "save":
+        playPattern([
+          { f: 660, d: 0.04, w: 0.04, t: "triangle", g: 0.040 },
+          { f: 880, d: 0.05, w: 0.05, t: "triangle", g: 0.040 },
+        ]);
+        break;
+      case "load":
+        playPattern([
+          { f: 880, d: 0.04, w: 0.04, t: "triangle", g: 0.040 },
+          { f: 660, d: 0.05, w: 0.05, t: "triangle", g: 0.040 },
+        ]);
+        break;
+      case "reset":
+        playPattern([
+          { f: 330, d: 0.06, w: 0.06, t: "triangle", g: 0.040 },
+          { f: 220, d: 0.08, w: 0.08, t: "triangle", g: 0.040 },
+        ]);
+        break;
+      default:
+        break;
+    }
+  }
+  // ---------- background music (embedded MP3; offline) ----------
+  let bgm = null;
+  let bgmEnabled = true; // default ON (toggle with button)
+  let bgmVolume = 0.25;
+  const BGM_KEY = "copilot-quest-bgm-enabled-v1";
+  const BGM_VOL_KEY = "copilot-quest-bgm-vol-v1";
+  const BGM_SRC = ''; // Music removed to reduce file size. You can add an external MP3 URL here if needed.
+  function initBgm() {
+    if (!bgm) {
+      bgm = new Audio(BGM_SRC);
+      bgm.loop = true;
+      bgm.preload = "auto";
+    }
+  }
+  function loadBgmPref() {
+    try {
+      const e = localStorage.getItem(BGM_KEY);
+      if (e === "0" || e === "1") bgmEnabled = (e === "1");
+      const v = localStorage.getItem(BGM_VOL_KEY);
+      if (v !== null && v !== undefined && v !== "") {
+        const n = Number(v);
+        if (!Number.isNaN(n)) bgmVolume = clamp(n, 0, 1);
+      }
+    } catch (e) {}
+  }
+  function saveBgmPref() {
+    try {
+      localStorage.setItem(BGM_KEY, bgmEnabled ? "1" : "0");
+      localStorage.setItem(BGM_VOL_KEY, String(bgmVolume));
+    } catch (e) {}
+  }
+  function setMusicUi() {
+    const b = $("btnMusic");
+    const s = $("musicVol");
+    if (b) b.textContent = bgmEnabled ? "Music: On" : "Music: Off";
+    if (s) s.value = String(Math.round(bgmVolume * 100));
+  }
+  async function tryPlayBgm() {
+    if (!bgmEnabled) return;
+    initBgm();
+    if (!bgm) return;
+    bgm.volume = clamp(bgmVolume, 0, 1);
+    try {
+      // Must be called during/after a user gesture in most browsers.
+      await bgm.play();
+    } catch (e) {
+      // Ignore autoplay blocks; we'll try again on the next user gesture.
+    }
+  }
+  function pauseBgm() {
+    if (bgm) bgm.pause();
+  }
+  // Try to start music on the first user gesture (Start button click, etc.)
+  document.addEventListener("pointerdown", () => {
+    // resume web-audio sfx if it exists & was suspended
+    if (audioCtx && audioCtx.state === "suspended") audioCtx.resume();
+    tryPlayBgm();
+  }, { once: true });
+  function regionIntroText(region) {
+    return [
+      "🧭 Welcome, Adventurer.",
+      "",
+      `You’ve stepped into ${region.title}.`,
+      region.desc,
+      "",
+      "Rule of the realm: answer challenges to gain XP + gold + relics. Miss too many, and your HP hits zero…",
+      "",
+      "Press “Enter Region” when you’re ready."
+    ].join("\n");
+  }
+  function flavorFor(question) {
+    const t = question.topic;
+    if (t === 1) return "A gatekeeper blocks the path. It speaks in app-terms and awaits your choice.";
+    if (t === 2) return "The corridor walls are made of sticky notes and notebooks. Choose wisely or loop back.";
+    return "The forge roars. A scroll demands precision. A wrong answer smudges the ink of fate.";
+  }
+  function relicFor(question) {
+    const base = question.topic === 1 ? "App Rune" : question.topic === 2 ? "Notebook Sigil" : "Forge Charm";
+    return {
+      name: `${base} ${question.topic}-${question.qnum}`,
+      desc: question.multi
+        ? "A relic that rewards exact multi-select mastery."
+        : "A relic that rewards decisive single-choice clarity."
+    };
+  }
+  // ---------- state ----------
+  const DEFAULT = {
+    ver: 1,
+    mode: "title",       // title | intro | question | feedback | regionDone | finished | gameOver
+    regionId: 1,
+    order: [],
+    pos: 0,
+    hp: 3,
+    xp: 0,
+    gold: 0,
+    lvl: 1,
+    inventory: [],
+    last: null,
+    startedAt: null,
+  };
+  let state = structuredClone(DEFAULT);
+  function computeLevel(xp) {
+    return 1 + Math.floor(Math.sqrt(xp / 40));
+  }
+  function regionQuestions(regionId) {
+    return QUESTION_BANK.filter(q => q.topic === regionId);
+  }
+  function buildRunOrder() {
+    function shuffle(arr) {
+      const a = [...arr];
+      for (let i = a.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [a[i], a[j]] = [a[j], a[i]];
+      }
+      return a;
+    }
+    const byRegion = REGIONS.map(r => shuffle(regionQuestions(r.id)));
+    return byRegion.flat().map(q => q.id);
+  }
+  function getCurrentQuestion() {
+    const qid = state.order[state.pos];
+    return QUESTION_BANK.find(q => q.id === qid);
+  }
+  function regionProgress() {
+    const regQ = regionQuestions(state.regionId);
+    const completedInRegion = regQ.filter(q => {
+      const idx = state.order.indexOf(q.id);
+      return idx !== -1 && idx < state.pos;
+    }).length;
+    return { done: completedInRegion, total: regQ.length };
+  }
+  function fullProgress() {
+    return { done: clamp(state.pos, 0, state.order.length), total: state.order.length };
+  }
+  // ---------- rendering ----------
+  function renderMap() {
+    const map = $("map");
+    map.innerHTML = "";
+    REGIONS.forEach(r => {
+      const div = document.createElement("div");
+      div.className = "node";
+      if (r.id < state.regionId) div.classList.add("done");
+      if (r.id === state.regionId) div.classList.add("active");
+      const rQs = regionQuestions(r.id);
+      const done = rQs.filter(q => {
+        const idx = state.order.indexOf(q.id);
+        return idx !== -1 && idx < state.pos;
+      }).length;
+      div.innerHTML = `<div class="t">${r.title}</div>
+                       <div class="d">${r.desc}</div>
+                       <div class="d" style="margin-top:6px;">Progress: <span class="kbd">${done}/${rQs.length}</span></div>`;
+      map.appendChild(div);
+    });
+  }
+  function renderStats() {
+    $("hp").textContent = "♥".repeat(state.hp) + "·".repeat(Math.max(0, 3 - state.hp));
+    $("xp").textContent = String(state.xp);
+    $("gold").textContent = String(state.gold);
+    $("lvl").textContent = String(state.lvl);
+    $("badgeMode").textContent = `Mode: ${state.mode}`;
+    const reg = REGIONS.find(r => r.id === state.regionId);
+    $("badgeRegion").textContent = `Region: ${reg ? reg.title : "—"}`;
+    const rp = regionProgress();
+    const fp = fullProgress();
+    $("badgeProgress").textContent = `Progress: ${rp.done}/${rp.total} (Total ${fp.done}/${fp.total})`;
+  }
+  function renderInventory() {
+    const inv = $("inv");
+    inv.innerHTML = "";
+    if (!state.inventory.length) {
+      const empty = document.createElement("div");
+      empty.className = "item";
+      empty.innerHTML = `<div class="name">Inventory empty</div>
+                         <div class="desc">Win encounters to collect relics.</div>`;
+      inv.appendChild(empty);
+      return;
+    }
+    state.inventory.slice().reverse().slice(0, 8).forEach(it => {
+      const div = document.createElement("div");
+      div.className = "item";
+      div.innerHTML = `<div class="name">${it.name}</div><div class="desc">${it.desc}</div>`;
+      inv.appendChild(div);
+    });
+  }
+  function setMsg(kind, text) {
+    const box = $("msg");
+    box.style.display = "block";
+    box.className = `msg ${kind || ""}`;
+    box.textContent = text;
+  }
+  function hideMsg() {
+    const box = $("msg");
+    box.style.display = "none";
+    box.textContent = "";
+    box.className = "msg";
+  }
+  function showQuestion(q) {
+    $("qArea").style.display = "block";
+    $("qText").textContent = q.stem;
+    $("qHint").textContent = q.multi ? "Select ALL correct answers (multi-select)." : "Select ONE answer.";
+    const choices = $("choices");
+    choices.innerHTML = "";
+    const inputType = q.multi ? "checkbox" : "radio";
+    q.options.forEach(opt => {
+      const id = `opt-${q.id}-${opt.id}`;
+      const lab = document.createElement("label");
+      lab.className = "choice";
+      lab.setAttribute("for", id);
+      lab.innerHTML = `
+        <div class="letter">${opt.id}</div>
+        <div style="display:flex; gap:10px; align-items:flex-start; width:100%;">
+          <input id="${id}" name="answer" type="${inputType}" value="${opt.id}" style="margin-top:6px;">
+          <div class="txt">${opt.text}</div>
+        </div>
+      `;
+      choices.appendChild(lab);
+    });
+  }
+  function getSelected() {
+    const inputs = Array.from(document.querySelectorAll("input[name='answer']"));
+    return inputs.filter(i => i.checked).map(i => i.value);
+  }
+  function clearSelected() {
+    Array.from(document.querySelectorAll("input[name='answer']")).forEach(i => { i.checked = false; i.disabled = false; });
+  }
+  function render() {
+    renderStats();
+    renderMap();
+    renderInventory();
+    const primary = $("btnPrimary");
+    const story = $("story");
+    const qArea = $("qArea");
+    if (state.mode === "title") {
+      qArea.style.display = "none";
+      hideMsg();
+      story.textContent = [
+        "⚔️ Copilot Quest is a practice adventure built from your question bank.",
+        "",
+        "Goal: clear all regions without losing all HP.",
+        "",
+        "Press Start to begin."
+      ].join("\n");
+      primary.textContent = "Start";
+      primary.onclick = () => {
+        playSfx('start');
+        tryPlayBgm();
+        state = structuredClone(DEFAULT);
+        state.startedAt = nowIso();
+        state.order = buildRunOrder();
+        state.mode = "intro";
+        state.regionId = 1;
+        state.pos = 0;
+        render();
+      };
+      return;
+    }
+    if (state.mode === "intro") {
+      qArea.style.display = "none";
+      hideMsg();
+      const region = REGIONS.find(r => r.id === state.regionId);
+      story.textContent = regionIntroText(region);
+      primary.textContent = "Enter Region";
+      primary.onclick = () => { playSfx('enter'); tryPlayBgm(); state.mode = "question"; render(); };
+      return;
+    }
+    if (state.mode === "question") {
+      hideMsg();
+      const q = getCurrentQuestion();
+      if (!q) { state.mode = "finished"; render(); return; }
+      if (q.topic !== state.regionId) { state.mode = "regionDone"; render(); return; }
+      story.textContent = "🗺️ " + flavorFor(q);
+      showQuestion(q);
+      primary.textContent = "Submit";
+      primary.onclick = () => {
+        playSfx('click');
+        const chosen = getSelected();
+        if (!chosen.length) { setMsg("warn", "Pick an answer first."); return; }
+        const correct = q.answer;
+        const ok = eqSet(chosen, correct);
+        state.last = { qid: q.id, chosen, correct, ok };
+        if (ok) {
+          playSfx('correct');
+          state.xp += q.multi ? 18 : 12;
+          state.gold += q.multi ? 9 : 6;
+          state.lvl = computeLevel(state.xp);
+          state.inventory.push({ ...relicFor(q), gainedAt: nowIso() });
+          playSfx('relic');
+          setMsg("good", `✅ Correct!\nYou gained XP and gold, and found a relic.\n\nCorrect answer: ${correct.join(", ")}`);
+        } else {
+          playSfx('wrong');
+          state.hp = clamp(state.hp - 1, 0, 3);
+          setMsg("bad", `❌ Not quite.\n\nYour answer: ${chosen.join(", ")}\nCorrect answer: ${correct.join(", ")}\n\nHP -1`);
+        }
+        state.mode = state.hp <= 0 ? "gameOver" : "feedback";
+        if (state.mode === "gameOver") playSfx('gameover');
+        render();
+      };
+      return;
+    }
+    if (state.mode === "feedback") {
+      primary.textContent = "Continue";
+      primary.onclick = () => {
+        playSfx('click');
+        clearSelected();
+        state.pos += 1;
+        const next = state.order[state.pos];
+        const nextQ = QUESTION_BANK.find(q => q.id === next);
+        if (!nextQ) state.mode = "finished";
+        if (!nextQ) playSfx('victory');
+        else if (nextQ.topic !== state.regionId) state.mode = "regionDone";
+        else state.mode = "question";
+        render();
+      };
+      Array.from(document.querySelectorAll("input[name='answer']")).forEach(i => i.disabled = true);
+      return;
+    }
+    if (state.mode === "regionDone") {
+      qArea.style.display = "none";
+      hideMsg();
+      const region = REGIONS.find(r => r.id === state.regionId);
+      const rp = regionProgress();
+      story.textContent = [
+        `🏁 Region cleared: ${region.title}`,
+        `You overcame ${rp.total} encounters here.`,
+        "",
+        `Reward: ${region.reward}`,
+        "",
+        "Press Continue to travel onward."
+      ].join("\n");
+      primary.textContent = (state.regionId < REGIONS.length) ? "Continue" : "Finish";
+      primary.onclick = () => {
+        playSfx('region');
+        state.regionId = clamp(state.regionId + 1, 1, REGIONS.length);
+        state.mode = "intro";
+        render();
+      };
+      return;
+    }
+    if (state.mode === "finished") {
+      qArea.style.display = "none";
+      hideMsg();
+      const fp = fullProgress();
+      const score = Math.round((state.xp / (fp.total * 18)) * 100);
+      story.textContent = [
+        "🏆 Victory!",
+        "",
+        `You cleared the realm with Level ${state.lvl}.`,
+        `XP: ${state.xp}   Gold: ${state.gold}`,
+        `Relics: ${state.inventory.length}`,
+        "",
+        `Completion: ${fp.done}/${fp.total}`,
+        `Final Score (rough): ${clamp(score, 0, 100)}%`,
+        "",
+        "Replay to shuffle encounters and reinforce memory."
+      ].join("\n");
+      primary.textContent = "Play Again";
+      primary.onclick = () => { playSfx('click'); state.mode = "title"; render(); };
+      return;
+    }
+    if (state.mode === "gameOver") {
+      qArea.style.display = "none";
+      hideMsg();
+      story.textContent = [
+        "💀 Game Over.",
+        "",
+        "Your HP hit zero. The realm’s guardians demand more grounding and careful reading.",
+        "",
+        "Press Retry to start over."
+      ].join("\n");
+      primary.textContent = "Retry";
+      primary.onclick = () => { playSfx('click'); state.mode = "title"; render(); };
+      return;
+    }
+  }
+  // ---------- persistence ----------
+  const KEY = "copilot-quest-save-v1";
+  function save() {
+    playSfx('save');
+    localStorage.setItem(KEY, JSON.stringify(state));
+    setMsg("good", "Saved to this browser.");
+  }
+  function load() {
+    playSfx('load');
+    const raw = localStorage.getItem(KEY);
+    if (!raw) { setMsg("warn", "No save found in this browser yet."); return; }
+    try {
+      const obj = JSON.parse(raw);
+      state = Object.assign(structuredClone(DEFAULT), obj);
+      setMsg("good", "Loaded!");
+      render();
+    } catch (e) {
+      setMsg("bad", "Could not load save (corrupted).");
+    }
+  }
+  function reset() {
+    playSfx('reset');
+    localStorage.removeItem(KEY);
+    state = structuredClone(DEFAULT);
+    render();
+  }
+  $("btnSave").onclick = save;
+  $("btnLoad").onclick = load;
+  $("btnReset").onclick = reset;
+  loadSfxPref();
+  setSoundButton();
+  const btnSound = $("btnSound");
+  loadBgmPref();
+  setMusicUi();
+  const btnMusic = $("btnMusic");
+  if (btnMusic) {
+    btnMusic.onclick = async () => {
+      bgmEnabled = !bgmEnabled;
+      saveBgmPref();
+      setMusicUi();
+      if (bgmEnabled) {
+        await tryPlayBgm();
+        playSfx("click");
+      } else {
+        pauseBgm();
+        playSfx("click");
+      }
+    };
+  }
+  const musicVol = $("musicVol");
+  if (musicVol) {
+    musicVol.oninput = () => {
+      bgmVolume = clamp(Number(musicVol.value) / 100, 0, 1);
+      if (bgm) bgm.volume = bgmVolume;
+      saveBgmPref();
+    };
+  }
+  // Pause music when tab is hidden; resume when visible (if enabled)
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) {
+      pauseBgm();
+    } else {
+      tryPlayBgm();
+    }
+  });
+  if (btnSound) {
+    btnSound.onclick = () => {
+      sfxEnabled = !sfxEnabled;
+      saveSfxPref();
+      setSoundButton();
+      if (sfxEnabled) playSfx("click");
+    };
+  }
+  render();
+</script>
+</body>
+</html>