js script

app.js

@@ -0,0 +1,686 @@
+
+      /* ------------ Data ------------ */
+      const PURPOSES = [
+        {
+          id: "research",
+          title: "Health Research (HRA)",
+          blurb: "Scientific knowledge.",
+          refs: [],
+        },
+        {
+          id: "quality",
+          title: "Quality Improvement",
+          blurb: "Improve your own service.",
+          refs: [],
+        },
+        {
+          id: "statistics",
+          title: "Statistics / Official",
+          blurb: "Org/regional/national stats.",
+          refs: [],
+        },
+        {
+          id: "innovation",
+          title: "Innovation / AI",
+          blurb: "Tool/algorithm/model.",
+          refs: [],
+        },
+        {
+          id: "anon",
+          title: "Exclusively Anonymized Data",
+          blurb: "No reasonable reidentification risk.",
+          refs: [],
+        },
+      ];
+
+      const STEPS = [
+        {
+          num: 1,
+          key: "classification",
+          title: "Project classification",
+          items: [
+            { k: "1a", label: "(a) Confirm pathway.", req: true },
+            {
+              k: "1b",
+              label: "(b) Controller / joint controller — Art. 4(7).",
+              req: true,
+            },
+            { k: "1c", label: "(c) 1-page summary.", req: true },
+            { k: "1d", label: "(d) Special categories? — Art. 9.", req: true },
+            { k: "1e", label: "(e) Vulnerable groups screened.", req: true },
+            {
+              k: "1f",
+              label: "(f) DPIA screening / DPIA — Art. 35.",
+              req: true,
+            },
+            { k: "1g", label: "(g) Transfers (if any) — Chap. V.", req: false },
+            {
+              k: "1h",
+              label: "(h) Plan anonymization/pseudonymization — Recital 26.",
+              req: false,
+            },
+          ],
+        },
+        {
+          num: 2,
+          key: "legal",
+          title: "Legal basis & consent",
+          items: [
+            { k: "2a", label: "(a) Art. 6 lawful basis.", req: true },
+            { k: "2b", label: "(b) Art. 9(2) condition.", req: true },
+            {
+              k: "2d",
+              label: "(d) Purpose limitation — Art. 5(1)(b).",
+              req: true,
+            },
+            {
+              k: "2c",
+              label: "(c) Consent quality/withdrawal (if used).",
+              req: false,
+            },
+            {
+              k: "2e",
+              label: "(e) Research/statistics safeguards — Art. 89.",
+              req: false,
+            },
+          ],
+        },
+        {
+          num: 3,
+          key: "ethics",
+          title: "Approvals",
+          items: [
+            {
+              k: "3a",
+              label: "(a) Research: IRB/HRA §§2–4, §9, §33.",
+              req: true,
+              showFor: ["research"],
+            },
+            {
+              k: "3b",
+              label: "(b) Statistics: HRL §19–19h.",
+              req: true,
+              showFor: ["statistics"],
+            },
+            {
+              k: "3c",
+              label: "(c) QI/Other: internal governance.",
+              req: true,
+              showFor: ["quality", "other"],
+            },
+            {
+              k: "3d",
+              label: "(d) Innovation/AI: risk review / AI Act.",
+              req: true,
+              showFor: ["innovation"],
+            },
+            {
+              k: "3e",
+              label: "(e) RoPA + notices — Arts. 30, 13/14.",
+              req: true,
+            },
+          ],
+        },
+        {
+          num: 4,
+          key: "access",
+          title: "Data access & contracts",
+          items: [
+            { k: "4a", label: "(a) Access route confirmed.", req: true },
+            { k: "4b", label: "(b) DPA / sharing / DUA ready.", req: true },
+            { k: "4c", label: "(c) Minimize data — Art. 5(1)(c).", req: true },
+            { k: "4d", label: "(d) Transfers (if any) — Chap. V.", req: false },
+          ],
+        },
+        {
+          num: 5,
+          key: "security",
+          title: "Security & privacy",
+          items: [
+            { k: "5a", label: "(a) TOMs — Art. 32.", req: true },
+            { k: "5b", label: "(b) Pseudonymize; separate keys.", req: true },
+            { k: "5c", label: "(c) DPIA outcomes signed.", req: true },
+            { k: "5d", label: "(d) Breach plan — 33/34.", req: true },
+          ],
+        },
+        {
+          num: 6,
+          key: "quality",
+          title: "Data minimization and quality",
+          items: [
+            { k: "6a", label: "(a) Provenance & dictionary.", req: true },
+            {
+              k: "6b",
+              label: "(b) Validation / missing data plan.",
+              req: true,
+            },
+          ],
+        },
+        {
+          num: 7,
+          key: "analysis",
+          title: "Analysis & AI development",
+          items: [
+            { k: "7a", label: "(a) Extract matches approvals.", req: true },
+            {
+              k: "7c",
+              label: "(c) AI docs & bias checks (if AI).",
+              req: true,
+              showFor: ["innovation"],
+            },
+          ],
+        },
+        {
+          num: 8,
+          key: "compliance",
+          title: "Compliance monitoring and auditing",
+          items: [
+            { k: "8a", label: "(a) Internal audit.", req: true },
+            { k: "8b", label: "(b) Keep RoPA up to date.", req: true },
+          ],
+        },
+        {
+          num: 9,
+          key: "closeout",
+          title: "Dissemination, closeout, retention & deletion",
+          items: [
+            { k: "9a", label: "(a) Disclosure control OK.", req: true },
+            {
+              k: "9c",
+              label: "(c) Retention/deletion — Art. 5(1)(e).",
+              req: true,
+            },
+          ],
+        },
+      ];
+
+      /* Flow questions derived from the flowchart */
+      const FLOW = {
+        1: {
+          q: "Project classification complete & documented?",
+          onYes: 2,
+          onNo: 1,
+        },
+        2: { q: "Valid legal route and consent completed?", onYes: 3, onNo: 2 },
+        3: {
+          q: "All ethical and regulatory approvals in place?",
+          onYes: 4,
+          onNo: 3,
+        },
+        4: { q: "Data access route & contracts are ok?", onYes: 5, onNo: 4 },
+        5: {
+          q: "Information security & privacy measures and risks controlled?",
+          onYes: 6,
+          onNo: 5,
+        },
+        6: { q: "Proceed to analysis?", onYes: 7, onNo: 6 },
+        /* Step 7 has several conditional checks in order */
+        7: [
+          { q: "Extract matches necessary approvals?", yes: 8, no: 3 },
+          { q: "Any new purpose?", yes: 1, no: "next" },
+          { q: "Any new approvals needed?", yes: 3, no: "next" },
+          { q: "Any new access/contracts?", yes: 4, no: 8 },
+        ],
+        8: { q: "Any gaps found?", onYes: 4, onNo: 9 },
+        9: { q: "Retain/reuse beyond plan?", onYes: 1, onNo: "end" },
+      };
+
+      /* ------------ State ------------ */
+      const STORAGE = "suhr_flow_v1";
+      const $ = (s) => document.querySelector(s);
+      const $$ = (s) => Array.from(document.querySelectorAll(s));
+      const state = {
+        purpose: null,
+        checks: {},
+        savedAt: null,
+        visible: 0,
+        step: 0,
+        subQ: 0,
+        reachedEnd: false, // track if user ever reached the end screen
+      };
+
+      /* ------------ Purpose UI ------------ */
+      function renderPurposes() {
+        const host = $("#purposeList");
+        host.innerHTML = "";
+        PURPOSES.forEach((p) => {
+          const el = document.createElement("label");
+          el.className = "option";
+          el.innerHTML = `
+            <input type="radio" name="purpose" value="${p.id}">
+            <div style="display:flex;justify-content:space-between;gap:8px">
+              <div><b>${p.title}</b><div class="tiny" style="margin-top:4px">${
+            p.blurb
+          }</div></div>
+              <span class="tag gdpr">${
+                p.id === "anon" ? "No GDPR" : "GDPR"
+              }</span>
+            </div>`;
+          el.addEventListener("click", () => {
+            state.purpose = p.id;
+            save(true);
+            $("#anonMsg").classList.toggle("hidden", state.purpose !== "anon");
+            if (p.id === "anon") {
+              hideFlow();
+              renderDots(0);
+              $("#timeline").innerHTML = "";
+              $("#finish").classList.remove("show");
+              state.reachedEnd = false;
+              return;
+            }
+            // start at step 1
+            state.visible = 1;
+            state.step = 1;
+            state.subQ = 0;
+            state.reachedEnd = false;
+            save(true);
+            $("#finish").classList.remove("show");
+            renderDots(state.visible);
+            renderTimeline();
+            showFlow();
+            askCurrent(); // auto-expand step 1
+          });
+          host.appendChild(el);
+        });
+        if (state.purpose) {
+          $$('input[name="purpose"]').forEach((i) => {
+            if (i.value === state.purpose) {
+              i.checked = true;
+              i.closest(".option").classList.add("active");
+            }
+          });
+          $("#anonMsg").classList.toggle("hidden", state.purpose !== "anon");
+        }
+      }
+
+      /* ------------ Timeline (accordion) ------------ */
+      function renderTimeline() {
+        const host = $("#timeline");
+        host.innerHTML = "";
+        if (!state.purpose || state.purpose === "anon") return;
+        const v = state.visible || 1;
+        for (let i = 0; i < v; i++) addStep(host, STEPS[i], i + 1);
+        expandDetailsForStep(state.step);
+      }
+
+      function addStep(host, step, idx) {
+        const done = isStepComplete(step);
+        const sec = document.createElement("section");
+        sec.className = "step" + (done ? " done" : "");
+        sec.dataset.step = step.key;
+        sec.innerHTML = `
+          <div class="head">
+            <div class="title">
+              <span class="num">${step.num}</span>
+              <div><b>${step.title}</b></div>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center">
+              <span class="badge" id="badge_${step.key}">${
+          done ? "Complete ✓" : "In progress"
+        }</span>
+              <button class="toggle" data-fold="${step.key}">Details</button>
+            </div>
+          </div>
+          <div class="body fold" id="fold_${step.key}">
+            <ul class="list"></ul>
+          </div>`;
+        const ul = sec.querySelector(".list");
+        step.items.forEach((it) => {
+          if (it.showFor && !it.showFor.includes(state.purpose)) return;
+          const checked = !!state.checks[step.key]?.[it.k];
+          const li = document.createElement("li");
+          li.className = "li";
+          const id = `${step.key}_${it.k}`;
+          li.innerHTML = `
+            <div class="letters">${it.k}</div>
+            <label for="${id}">${it.label}${
+            it.req
+              ? ` <span class='req'>★</span>`
+              : " <span class='opt'>(opt)</span>"
+          }</label>
+            <div style="display:flex;align-items:center;gap:8px">
+              <input class="chk" type="checkbox" id="${id}" ${
+            checked ? "checked" : ""
+          }/>
+              <svg class="box" viewBox="0 0 24 24" aria-hidden="true"><path class="tick" d="M5 13l4 4L19 7"/></svg>
+            </div>`;
+          li.querySelector(".chk").addEventListener("change", (e) => {
+            (state.checks[step.key] ??= {})[it.k] = e.target.checked;
+            save(true);
+
+            const nowDone = isStepComplete(step);
+            $("#badge_" + step.key).textContent = nowDone
+              ? "Complete ✓"
+              : "In progress";
+            if (nowDone && !sec.classList.contains("done")) {
+              sec.classList.add("done");
+              if (idx === 1) advanceToStep(2); // auto show Step 2 when Step 1 completes
+            } else if (!nowDone) {
+              sec.classList.remove("done");
+            }
+
+            renderDots(state.visible); // refresh top dots' done state
+            updateProgress();
+
+            // If the end screen is visible (or was reached before), update/show its message when all steps are complete.
+            if ($("#finish").classList.contains("show")) {
+              refreshFinishBanner();
+            } else if (state.reachedEnd && allStepsComplete()) {
+              finish();
+            }
+          });
+          ul.appendChild(li);
+        });
+
+        // "Details" toggle
+        sec.querySelector(".toggle").addEventListener("click", () => {
+          const pane = document.getElementById("fold_" + step.key);
+          pane.classList.toggle("fold");
+        });
+
+        host.appendChild(sec);
+      }
+
+      /* Expand current step details and collapse others while asking each question */
+      function expandDetailsForStep(stepNum) {
+        if (!stepNum) return;
+        // collapse all
+        $$("#timeline .body").forEach((pane) => pane.classList.add("fold"));
+        const current = STEPS[stepNum - 1];
+        if (!current) return;
+        const pane = document.getElementById("fold_" + current.key);
+        if (pane) pane.classList.remove("fold");
+      }
+
+      /* ------------ Dots / progress ------------ */
+      function renderDots(visible) {
+        const d = $("#dots");
+        d.innerHTML = "";
+        for (let i = 1; i <= STEPS.length; i++) {
+          const stepObj = STEPS[i - 1];
+          const stepDone = isStepComplete(stepObj);
+          const dot = document.createElement("div");
+          dot.className =
+            "dot" +
+            (i <= visible ? " unlocked" : "") +
+            (i === state.step ? " active" : "") +
+            (stepDone ? " done" : "");
+          dot.textContent = i;
+          dot.setAttribute(
+            "aria-label",
+            `Step ${i}${stepDone ? " complete" : ""}`
+          );
+          if (i <= visible) {
+            dot.addEventListener("click", () => {
+              state.step = i;
+              state.subQ = 0;
+              save(true);
+              askCurrent();
+              scrollToStep(i);
+              highlightDot();
+            });
+          }
+          d.appendChild(dot);
+        }
+        updateProgress();
+      }
+      function highlightDot() {
+        $$("#dots .dot").forEach((el, idx) => {
+          el.classList.toggle("active", idx + 1 === state.step);
+        });
+      }
+      function scrollToStep(n) {
+        const el = document.querySelector(`.step:nth-of-type(${n})`);
+        if (!el) return;
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+        el.animate(
+          [
+            { outlineColor: "#56b4e9", outlineWidth: "0px" },
+            { outlineColor: "#56b4e9", outlineWidth: "6px" },
+            { outlineColor: "transparent", outlineWidth: "0px" },
+          ],
+          { duration: 800 }
+        );
+      }
+
+      /* ------------ Flow controller (Yes/No) ------------ */
+      const flow = $("#flow"),
+        qtxt = $("#qtxt"),
+        yesBtn = $("#yesBtn"),
+        noBtn = $("#noBtn");
+
+      function showFlow() {
+        flow.classList.remove("hidden");
+      }
+      function hideFlow() {
+        flow.classList.add("hidden");
+      }
+
+      function askCurrent() {
+        // Reset finish visibility text live region while navigating
+        $("#finish").classList.remove("show");
+
+        if (state.purpose === "anon" || !state.step) {
+          hideFlow();
+          return;
+        }
+
+        // Ensure the current step's checklist is expanded (and others collapsed)
+        expandDetailsForStep(state.step);
+
+        // Step 7 special sequence
+        if (state.step === 7) {
+          const seq = FLOW[7];
+          let idx = state.subQ;
+          if (idx >= seq.length) {
+            state.step = 8;
+            state.subQ = 0;
+            renderDots(state.visible);
+            askCurrent();
+            return;
+          }
+          const node = seq[idx];
+          qtxt.textContent = node.q;
+          yesBtn.onclick = () => {
+            if (node.yes === "next") {
+              state.subQ++;
+              askCurrent();
+              return;
+            }
+            goto(node.yes);
+          };
+          noBtn.onclick = () => {
+            if (node.no === "next") {
+              state.subQ++;
+              askCurrent();
+              return;
+            }
+            goto(node.no);
+          };
+          return;
+        }
+
+        // Regular step question
+        const node = FLOW[state.step];
+        if (!node) {
+          hideFlow();
+          return;
+        }
+        qtxt.textContent = node.q;
+        yesBtn.onclick = () => goto(node.onYes);
+        noBtn.onclick = () => goto(node.onNo);
+      }
+
+      function goto(dest) {
+        if (dest === "end") {
+          finish();
+          return;
+        }
+        // move
+        state.step = dest;
+        state.subQ = 0;
+        if (state.step > state.visible) state.visible = state.step; // grow visibility
+        renderDots(state.visible);
+        renderTimeline();
+        askCurrent();
+        scrollToStep(state.step);
+        save(true);
+      }
+
+      /* Called when step 1 completes to auto reveal step 2 */
+      function advanceToStep(n) {
+        if (state.visible < n) {
+          state.visible = n;
+          renderDots(state.visible);
+          renderTimeline();
+          scrollToStep(n);
+        }
+        state.step = n;
+        state.subQ = 0;
+        askCurrent();
+        save(true);
+      }
+
+      /* ------------ Helpers ------------ */
+      function isStepComplete(step) {
+        const d = state.checks[step.key] || {};
+        const req = step.items.filter(
+          (it) => !(it.showFor && !it.showFor.includes(state.purpose)) && it.req
+        );
+        return req.length ? req.every((it) => !!d[it.k]) : true;
+      }
+      function allStepsComplete() {
+        if (!state.purpose || state.purpose === "anon") return false;
+        return STEPS.every((s) => isStepComplete(s));
+      }
+      function updateProgress() {
+        let total = 0,
+          done = 0;
+        STEPS.forEach((s) => {
+          if (state.purpose === "anon" && s.num > 1) return;
+          s.items.forEach((it) => {
+            if (it.showFor && !it.showFor.includes(state.purpose)) return;
+            if (it.req) {
+              total++;
+              if (state.checks[s.key]?.[it.k]) done++;
+            }
+          });
+        });
+        const pct = total ? Math.round((100 * done) / total) : 0;
+        $("#pbar").style.width = pct + "%";
+      }
+
+      /* ------------ Finish ------------ */
+      function finish() {
+        hideFlow();
+        state.reachedEnd = true;
+        save(true);
+
+        const ok = allStepsComplete();
+        const finishEl = $("#finish");
+        const titleEl = $("#finishTitle");
+        const subEl = $("#finishSub");
+        const confettiHost = $("#confetti");
+
+        if (ok) {
+          titleEl.textContent = "End 🎉";
+          subEl.textContent = "All flow checks passed.";
+          confettiHost.innerHTML = "";
+          confetti(24);
+        } else {
+          titleEl.textContent = "End";
+          subEl.textContent = "";
+          confettiHost.innerHTML = ""; // no confetti if not fully complete
+        }
+        finishEl.classList.add("show");
+      }
+
+      function refreshFinishBanner() {
+        // Update finish banner live without toggling visibility
+        const ok = allStepsComplete();
+        const titleEl = $("#finishTitle");
+        const subEl = $("#finishSub");
+        const confettiHost = $("#confetti");
+
+        if (ok) {
+          titleEl.textContent = "End 🎉";
+          subEl.textContent = "All flow checks passed.";
+          confettiHost.innerHTML = "";
+          confetti(24);
+        } else {
+          titleEl.textContent = "End";
+          subEl.textContent = "";
+          confettiHost.innerHTML = "";
+        }
+      }
+
+      function confetti(n) {
+        const host = $("#confetti");
+        host.innerHTML = "";
+        for (let i = 0; i < n; i++) {
+          const piece = document.createElement("i");
+          piece.style.setProperty("--dx", Math.random() * 300 - 150 + "px");
+          piece.style.left = 20 + Math.random() * 60 + "%";
+          piece.style.background = i % 2 ? "#0072B2" : "#E69F00";
+          piece.style.animationDelay = Math.random() * 0.4 + "s";
+          host.appendChild(piece);
+        }
+      }
+
+      /* ------------ Save/Load ------------ */
+      function save(quiet = false) {
+        state.savedAt = Date.now();
+        localStorage.setItem(STORAGE, JSON.stringify(state));
+        if (!quiet) updateProgress();
+      }
+      function load() {
+        try {
+          const raw = localStorage.getItem(STORAGE);
+          if (raw) Object.assign(state, JSON.parse(raw));
+        } catch (e) {}
+      }
+
+      /* ------------ Clear / Reset ------------ */
+      function clearAll() {
+        try {
+          localStorage.removeItem(STORAGE);
+        } catch (e) {}
+        state.purpose = null;
+        state.checks = {};
+        state.savedAt = null;
+        state.visible = 0;
+        state.step = 0;
+        state.subQ = 0;
+        state.reachedEnd = false;
+
+        renderPurposes();
+        renderDots(0);
+        $("#timeline").innerHTML = "";
+        $("#finish").classList.remove("show");
+        $("#anonMsg").classList.add("hidden");
+        hideFlow();
+        updateProgress();
+      }
+
+      /* ------------ Boot ------------ */
+      load();
+      renderPurposes();
+      if (state.purpose && state.purpose !== "anon") {
+        state.visible = state.visible || 1;
+        state.step = state.step || 1;
+        renderDots(state.visible);
+        renderTimeline();
+        showFlow();
+        askCurrent();
+      } else {
+        hideFlow();
+      }
+      updateProgress();
+
+      // Clear button handler
+      document.getElementById("clearBtn").addEventListener("click", () => {
+        const ok = confirm(
+          "Clear all saved progress and do fresh start? This will remove your selections!"
+        );
+        if (ok) clearAll();
+      });