Receipt for shift 5: shipped

+++ floor.html

+<title>Staged release quiz</title>

+ :root { --bg:#dedad3; --surface:#d3cec6; --ink:#0a0a0a; --muted:#55514c; --accent:#256f82; --accent-ink:#fff; --line:rgba(10,10,10,.14); --radius:6px; --font:system-ui,-apple-system,"Segoe UI",sans-serif; }

+ [hidden] { display: none !important; }

+ h2 { font-size: 20px; font-weight: 500; margin: 8px 0 16px; }

+ #progress { color: var(--muted); font-size: 13px; margin: 0; }

+ .opt { display: block; width: 100%; text-align: left; font: inherit; padding: 12px; margin: 8px 0 0; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }

+ .opt:disabled { cursor: default; }

+ .opt.right { background: #cfe8d5; border-color: #2d7a41; }

+ .opt.wrong { background: #f1d0cd; border-color: #a33a30; }

+ button.main { font: inherit; font-weight: 500; padding: 10px 24px; margin-top: 16px; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: var(--radius); cursor: pointer; }

+ button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

+ .box { margin-top: 16px; padding: 16px; background: var(--surface); border-radius: var(--radius); }

+ <h1>How a raise releases funds</h1>

+ <p>A short quiz on milestones, staged releases and timing.</p>

+ <section id="quiz">

+ <p id="progress"></p>

+ <h2 id="question"></h2>

+ <button class="opt" id="opt0"></button>

+ <button class="opt" id="opt1"></button>

+ <button class="opt" id="opt2"></button>

+ <div class="box" id="feedback" hidden></div>

+ <button class="main" id="next" hidden>Next</button>

+ </section>

+ <section id="done" hidden>

+ <h2 id="result"></h2>

+ <div class="box">

+ <p>Summary: a raise often does not hand over all funds at once. A release schedule lists each stage, its amount, and the timing or milestone that unlocks it. When a milestone is reached, that stage is released. If it is missed, the release waits until it is met or the terms say otherwise. Staging ties funds to progress and spreads out risk.</p>

+ </div>

+ <button class="main" id="restart">Try again</button>

+ </section>

+ const Q = [

+ { q: "What usually triggers a staged release of funds?",

+ o: ["Only a date on the calendar", "A milestone the campaign has reached", "How many people view the page"],

+ a: 1, e: "Releases are usually tied to milestones, sometimes together with a date." },

+ { q: "Why release funds in stages instead of all at once?",

+ o: ["Funds follow progress, which spreads out risk", "It makes the raise larger", "It removes the need for milestones"],

+ a: 0, e: "Staging links each release to progress, so not everything is handed over up front." },

+ { q: "If a milestone is not met on time, what typically happens to that stage?",

+ o: ["It is released anyway", "It waits until the milestone is met or the terms say otherwise", "The amount is doubled"],

+ a: 1, e: "The release is held back until the condition is met or the terms change." },

+ { q: "What does a release schedule list?",

+ o: ["The amount and the timing or condition for each release", "Future prices", "Names of visitors"],

+ a: 0, e: "A schedule sets out how much is released and when or under what condition." }

+ ];

+ let idx = 0, score = 0, answered = false;

+ const $ = (id) => document.getElementById(id);

+ function show() {

+ answered = false;

+ const item = Q[idx];

+ $("progress").textContent = "Question " + (idx + 1) + " of " + Q.length;

+ $("question").textContent = item.q;

+ for (let i = 0; i < 3; i++) {

+ const b = $("opt" + i);

+ b.textContent = item.o[i];

+ b.disabled = false;

+ b.className = "opt";

+ }

+ $("feedback").hidden = true;

+ $("next").hidden = true;

+ $("next").textContent = idx === Q.length - 1 ? "See score" : "Next";

+ }

+ function pick(i) {

+ if (answered) return;

+ answered = true;

+ const item = Q[idx];

+ const ok = i === item.a;

+ if (ok) score++;

+ for (let k = 0; k < 3; k++) {

+ const b = $("opt" + k);

+ b.disabled = true;

+ if (k === item.a) b.className = "opt right";

+ else if (k === i) b.className = "opt wrong";

+ }

+ $("feedback").textContent = (ok ? "Correct. " : "Not quite. ") + item.e;

+ $("feedback").hidden = false;

+ $("next").hidden = false;

+ }

+ function advance() {

+ if (!answered) return;

+ idx++;

+ if (idx >= Q.length) {

+ $("quiz").hidden = true;

+ $("done").hidden = false;

+ $("result").textContent = "Your score: " + score + " out of " + Q.length;

+ } else show();

+ }

+ function restart() {

+ idx = 0; score = 0;

+ $("done").hidden = true;

+ $("quiz").hidden = false;

+ show();

+ }

+ for (let i = 0; i < 3; i++) $("opt" + i).addEventListener("click", () => pick(i));

+ $("next").addEventListener("click", advance);

+ $("restart").addEventListener("click", restart);

+ show();