);
}
/* ---------- Start here (welcome) ---------- */
function StartHere({ name, setName, completeCount, firstIncomplete, goTask, goto }) {
const pages = [
{ icon: Icon.grid, t: "Dashboard", d: "Your progress bar, the seven exam domains with their weights, and the three themes that run through everything." },
{ icon: Icon.book, t: "Lessons (30)", d: "One page per exam objective. Each is a self-contained lesson with a claude.ai chat walkthrough and a question you must answer correctly to complete it." },
{ icon: Icon.layers, t: "Scenarios (6)", d: "End-to-end business workflows the exam is built around — each step links to the lesson that teaches it." },
{ icon: Icon.book, t: "Cheat sheet", d: "The high-yield facts to memorise, grouped by domain, each pointing to the lesson that proves it." },
{ icon: Icon.target, t: "Mock exam", d: "A 60-question exam scored 100–1000 (pass ≥ 720), just like the real exam. Retake with a fresh set anytime." },
];
const anatomy = [
["Concept", "the idea in one or two sentences"],
["🔗 Analogy", "a plain-language metaphor so it clicks"],
["▶ Play the walkthrough", "step through a realistic claude.ai conversation"],
["✗ Anti-pattern / ✓ Right way", "the trap vs the fix"],
["⚠ Common confusion", "the mistake learners actually make"],
["★ Exam tip", "how it shows up on the test"],
["Question", "answer it correctly to complete the lesson"],
];
return (
Welcome to the course
Claude Certified Associate — Foundations
A self-paced study course for the Associate Foundations exam (CCAO-F). Work through 30 short
lessons across 7 domains — each with a claude.ai chat walkthrough and a question — track your progress,
and finish with a completion certificate. Everything is saved in your browser.
setName(e.target.value)} maxLength={40} />
Used to greet you and on your completion certificate. Stored only in this browser — never sent anywhere.
Real business workflows that compose the lesson concepts — a campaign content pipeline, an ops process redesign, a compliance-safe analysis, and more. Each step links to the lesson that teaches it.
);
}
/* ---------- Mock exam ---------- */
function shuffle(arr) {
const a = arr.slice();
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 EXAM_WEIGHTS = { d1: 14, d2: 21, d3: 12, d4: 16, d5: 12, d6: 15, d7: 10 };
/* Draw n questions in proportion to the real exam's domain weights. */
function pickWeighted(pool, n) {
const byDom = {};
pool.forEach((q) => { (byDom[q.domain] = byDom[q.domain] || []).push(q); });
Object.keys(byDom).forEach((k) => { byDom[k] = shuffle(byDom[k]); });
const picks = [], chosen = new Set();
Object.keys(EXAM_WEIGHTS).forEach((d) => {
const want = Math.min((byDom[d] || []).length, Math.round((n * EXAM_WEIGHTS[d]) / 100));
(byDom[d] || []).slice(0, want).forEach((q) => { picks.push(q); chosen.add(q.id); });
});
if (picks.length < n) {
shuffle(pool.filter((q) => !chosen.has(q.id))).slice(0, n - picks.length).forEach((q) => picks.push(q));
}
return shuffle(picks.slice(0, n));
}
function fmtTime(s) {
const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), r = s % 60;
const mm = String(m).padStart(2, "0"), ss = String(r).padStart(2, "0");
return h > 0 ? `${h}:${mm}:${ss}` : `${m}:${ss}`;
}
const SEC_PER_Q = 120; // 2 min/question — the full 60-question exam = 120 min, like the real exam
function MockExam({ goTask }) {
const bank = (CCAF.mock && CCAF.mock.length) ? CCAF.mock : CCAF.questions;
const maxN = bank.length;
const lengths = [60, 20, 10].filter((n) => n <= maxN);
if (!lengths.includes(maxN) && maxN < 60) lengths.unshift(maxN);
const [phase, setPhase] = useState("setup"); // setup | run | done
const [mode, setMode] = useState("exam"); // exam | practice
const [length, setLength] = useState(lengths[0]);
const [exam, setExam] = useState([]);
const [answers, setAnswers] = useState({});
const [timeLeft, setTimeLeft] = useState(0);
const [onlyWrong, setOnlyWrong] = useState(false);
const keys = ["A", "B", "C", "D"];
const begin = (len, m) => {
setExam(pickWeighted(bank, len)); setAnswers({}); setLength(len); setMode(m);
setTimeLeft(len * SEC_PER_Q); setOnlyWrong(false); setPhase("run");
if (window.scrollTo) window.scrollTo(0, 0);
};
const finish = () => { setPhase("done"); if (window.scrollTo) window.scrollTo(0, 0); };
const reset = () => { setPhase("setup"); setExam([]); setAnswers({}); };
// one overall countdown (exam mode only); auto-submits when it reaches zero
useEffect(() => {
if (phase !== "run" || mode !== "exam") return;
if (timeLeft <= 0) { setPhase("done"); if (window.scrollTo) window.scrollTo(0, 0); return; }
const t = setTimeout(() => setTimeLeft((s) => s - 1), 1000);
return () => clearTimeout(t);
}, [phase, mode, timeLeft]);
const answered = exam.filter((q) => answers[q.id] != null).length;
const correctCount = exam.filter((q) => answers[q.id] === q.answer).length;
const scaled = Math.round(100 + (correctCount / (exam.length || 1)) * 900);
const pass = scaled >= 720;
// ---------- Setup ----------
if (phase === "setup") {
return (
Mock exam
Mock exam
A blueprint-aligned question bank covering all 30 exam objectives. The full exam is
60 questions, scored 100–1000 — passing is ≥ 720, like the real exam. Questions are drawn in
proportion to the official domain weights.
Length
{lengths.map((n) => (
))}
Mode
{mode === "exam" ? `⏱ ${fmtTime(length * SEC_PER_Q)} timer · no feedback until you submit` : "Untimed · each answer is graded as you go"}
You've worked through every domain, every walkthrough, and answered every question correctly.
You're ready to put these patterns to work — and to sit the exam with confidence.