PDF clock generation problem fixed - 2

Author: psriraj3

node_modules/.tmp/tsconfig.app.tsbuildinfo

@@ -321,7 +321,13 @@ export default function App() {
                   {!generated ? (
                       <div className="card">No set yet.</div>
                   ) : mode === "focus" ? (
-                      <FocusMode key={generated.seed} subject={subject} ukYear={ukYear} difficulty={difficulty} seed={seed} />
+                      <FocusMode
+                          subject={subject}
+                          ukYear={ukYear}
+                          difficulty={difficulty}
+                          seed={seed}
+                          topic={topic} // ✅ whatever your maths topic state variable is
+                      />
                   ) : mode === "practice" ? (
                       <PracticeRunner key={generated.seed} set={generated} />
                   ) : (

src/App.tsx

@@ -0,0 +1,176 @@
+// src/core/timeClock.ts
+
+export type ClockTime = { h: number; m: number };
+
+function getOptions(q: any): string[] {
+  const opts = q?.options ?? q?.choices ?? q?.mcqOptions ?? q?.answers;
+  return Array.isArray(opts) ? opts.map(String) : [];
+}
+
+function clamp(n: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, n));
+}
+
+export function parseClockTimeFromString(s: string): ClockTime | null {
+  const m = String(s ?? "").match(/\b(\d{1,2})\s*:\s*(\d{2})\b/);
+  if (!m) return null;
+  const h = Number(m[1]);
+  const mm = Number(m[2]);
+  if (!Number.isFinite(h) || !Number.isFinite(mm)) return null;
+  if (mm < 0 || mm > 59) return null;
+  if (h < 0 || h > 23) return null;
+  return { h, m: mm };
+}
+
+function analogHour(h24: number) {
+  const h = ((h24 % 12) + 12) % 12;
+  return h === 0 ? 12 : h;
+}
+
+function matchOptionIndexByTime(opts: string[], t: ClockTime): number {
+  const th = analogHour(t.h);
+  for (let i = 0; i < opts.length; i++) {
+    const ot = parseClockTimeFromString(opts[i]);
+    if (!ot) continue;
+    if (analogHour(ot.h) === th && ot.m === t.m) return i;
+  }
+  return -1;
+}
+
+function letterToIndex(v: string): number | null {
+  const s = String(v ?? "").trim().toUpperCase();
+  const m = s.match(/\b([A-Z])\b/);
+  if (!m?.[1]) return null;
+  return m[1].charCodeAt(0) - 65;
+}
+
+function numberToIndex(v: any, len: number): number | null {
+  const n = typeof v === "number" ? v : Number(String(v ?? "").trim());
+  if (!Number.isFinite(n)) return null;
+  if (n >= 0 && n < len) return n;
+  if (n >= 1 && n <= len) return n - 1;
+  return null;
+}
+
+function getQuestionId(q: any): string | null {
+  const id = q?.id ?? q?.qid ?? q?.uid ?? q?.key ?? q?.slug ?? q?.questionId ?? q?.uuid ?? q?.meta?.id;
+  if (typeof id === "string" && id.trim()) return id.trim();
+  if (typeof id === "number" && Number.isFinite(id)) return String(id);
+  return null;
+}
+
+export function looksLikeTimeMcq(q: any): boolean {
+  const opts = getOptions(q);
+  if (opts.length < 3) return false;
+
+  const timeLike = opts.filter((o) => /\b\d{1,2}\s*:\s*\d{2}\b/.test(String(o))).length;
+  if (timeLike >= 3) return true;
+
+  const text = `${q?.prompt ?? q?.question ?? q?.stem ?? q?.text ?? ""}`.toLowerCase();
+  return text.includes("time") && (text.includes("clock") || timeLike >= 2);
+}
+
+/**
+ * IMPORTANT FIX:
+ * If options exist, we FIRST map answer => option index (letter/index/text).
+ * Only then do we parse a time string from the answer, and even then ONLY if it matches an option.
+ */
+export function resolveClockTimeFromSet(set: any, q: any, index: number): ClockTime | null {
+  const opts = getOptions(q);
+
+  // explicit fields (rare; if present, still require matching an option when options exist)
+  const explicit =
+      q?.clockTime ?? q?.time ?? q?.meta?.clockTime ?? q?.meta?.time ?? q?.data?.clockTime ?? q?.data?.time;
+  if (explicit != null) {
+    const t = parseClockTimeFromString(String(explicit));
+    if (t) {
+      if (opts.length === 0) return t;
+      const mi = matchOptionIndexByTime(opts, t);
+      if (mi >= 0) return parseClockTimeFromString(opts[mi]) ?? t;
+    }
+  }
+
+  // answer key by id or parallel
+  const qid = getQuestionId(q);
+  const ak = Array.isArray(set?.answerKey) ? set.answerKey : [];
+
+  let answer: any = undefined;
+  if (qid) {
+    const hit = ak.find((k: any) => String(k?.questionId ?? k?.id ?? k?.qid ?? "") === qid);
+    answer = hit?.answer ?? hit?.value ?? hit?.correct ?? hit;
+  }
+  if (answer == null && ak.length === (Array.isArray(set?.questions) ? set.questions.length : -1)) {
+    const k = ak[index];
+    answer = k?.answer ?? k?.value ?? k?.correct ?? k;
+  }
+
+  const ansStr = answer == null ? "" : String(answer);
+
+  // ✅ If MCQ options exist: prefer letter/index/text mapping to OPTIONS (prevents “random time” bug)
+  if (opts.length > 0 && ansStr.trim()) {
+    const li = letterToIndex(ansStr);
+    if (li != null && li >= 0 && li < opts.length) {
+      const t = parseClockTimeFromString(opts[li]);
+      if (t) return t;
+    }
+
+    const ni = numberToIndex(answer, opts.length);
+    if (ni != null) {
+      const t = parseClockTimeFromString(opts[ni]);
+      if (t) return t;
+    }
+
+    const exactIdx = opts.findIndex((o) => String(o).trim() === ansStr.trim());
+    if (exactIdx >= 0) {
+      const t = parseClockTimeFromString(opts[exactIdx]);
+      if (t) return t;
+    }
+  }
+
+  // Parse time from answer text ONLY if it matches an option (answers can contain multiple times)
+  if (answer != null) {
+    const t = parseClockTimeFromString(ansStr);
+    if (t) {
+      if (opts.length === 0) return t;
+      const mi = matchOptionIndexByTime(opts, t);
+      if (mi >= 0) return parseClockTimeFromString(opts[mi]) ?? t;
+    }
+  }
+
+  // Last resort: pick the first time-like option (keeps worksheet complete if key is odd)
+  for (const o of opts) {
+    const t = parseClockTimeFromString(String(o));
+    if (t) return t;
+  }
+
+  return null;
+}
+
+export function clockSvgDataUri(time: ClockTime, size = 160): string {
+  const h = ((time.h % 12) + 12) % 12;
+  const m = clamp(time.m, 0, 59);
+
+  const minuteDeg = (m / 60) * 360;
+  const hourDeg = ((h + m / 60) / 12) * 360;
+
+  const ticks = Array.from({ length: 12 })
+      .map((_, i) => {
+        const thick = i % 3 === 0 ? 2.2 : 1.4;
+        const y1 = 6;
+        const y2 = i % 3 === 0 ? 16 : 13;
+        const deg = i * 30;
+        return `<line x1="50" y1="${y1}" x2="50" y2="${y2}" stroke="black" stroke-width="${thick}" stroke-linecap="round" transform="rotate(${deg} 50 50)" />`;
+      })
+      .join("");
+
+  const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 100 100" role="img" aria-label="Clock">
+  <circle cx="50" cy="50" r="48" fill="white" stroke="black" stroke-width="2" />
+  ${ticks}
+  <line x1="50" y1="50" x2="50" y2="22" stroke="black" stroke-width="4" stroke-linecap="round" transform="rotate(${hourDeg} 50 50)" />
+  <line x1="50" y1="50" x2="50" y2="12" stroke="black" stroke-width="3" stroke-linecap="round" transform="rotate(${minuteDeg} 50 50)" />
+  <circle cx="50" cy="50" r="2.5" fill="black" />
+</svg>`;
+
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}