/* ipma-slides.jsx — SINGLE SOURCE OF TRUTH for the IPMA-D course slideware. Loaded by the Learner LMS, the Trainer portal and the Educator dashboard so every environment renders the exact same 20 slides from the same data. Exports (on window): IPMA_SL — the 20-slide data array IPMASlideCard — self-contained slide renderer (no external CSS / Icon deps) IPMADeckOverlay — a portal slide viewer (prev/next + thumbnail rail) This file deliberately depends on NOTHING but React, so it behaves identically in all three portals. Colours use the shared --vh-* / --display CSS variables that every portal defines; the dotted-hex background is injected here. */ /* ─────────────────────────────────────── SLIDE DATA (20 slides) ── */ const IPMA_SL = [ { n: 1, type: "cover", title: "Training IPMA D", sub: "Individual Competence Baseline · Version 4", credit: "Van Haren Academy" }, { n: 2, type: "bullets", head: "Introduction", label: "Agenda", lead: null, items: ["Introduce yourself", "Learning objectives for participants", "House rules: mobile, e-mail, breaks, lunch", "IPMA and IPMA accreditation levels", "Course objectives", "Training approach and schedule"] }, { n: 3, type: "bullets", head: "IPMA NL", label: "About IPMA", lead: "The International Project Management Association (IPMA) is a federation of national PM associations in over 70 countries.", items: ["IPMA NL: more than 2,400 project manager members", "Develops and promotes PM competence worldwide", "ICB4 is the global standard for individual PM competence"] }, { n: 4, type: "cols3", head: "IPMA Individual Competence Baseline", sub: "ICB4 — Three competence areas", cols: [{ n: "05", name: "Perspective", color: "#3bc1ce", desc: "Contextual competencies" }, { n: "10", name: "People", color: "#1281c4", desc: "Personal & interpersonal" }, { n: "13", name: "Practice", color: "#c0392b", desc: "Technical PM" }], footer: "Knowledge + Skills + Abilities → Competencies" }, { n: 5, type: "levels", head: "IPMA Accreditation Levels", levels: [{ code: "D", col: "#e8a020", title: "PM Associate", desc: "Knowledge of all PM elements. Can support a PM on limited complex projects." }, { code: "C", col: "#7a5ad6", title: "Project Manager", desc: "Can manage limited complex projects independently." }, { code: "B", col: "#1281c4", title: "Senior PM", desc: "Can manage complex projects." }, { code: "A", col: "#c0392b", title: "Projects Director", desc: "Can manage a portfolio or programme." }] }, { n: 6, type: "steps", head: "IPMA-D Certification Process", steps: [{ n: 1, label: "Prerequisites", desc: "No requirements. Experience in projects is an advantage." }, { n: 2, label: "Written Exam", desc: "3 hours, multiple choice covering all 28 ICB4 competence elements." }, { n: 3, label: "Pass Mark", desc: "Minimum 55% correct answers required to pass." }, { n: 4, label: "Certificate", desc: "Valid 5 years. Renewal through continuing education (CPD)." }] }, { n: 7, type: "objectives", head: "Learning Objectives", intro: "Upon completion of this course, participants:", items: ["Have knowledge of all project management elements", "Can support a PM of a limited complex project", "Are prepared for the IPMA-D written examination", "Can apply ICB4 competence elements in practical situations"] }, { n: 8, type: "schedule", head: "Training Schedule", days: [{ n: 1, title: "Introduction & Project Preparation", color: "#c0392b" }, { n: 2, title: "Project Definition & Delivery", color: "#1281c4" }, { n: 3, title: "People Competencies", color: "#7a5ad6" }, { n: 4, title: "Perspective Competencies", color: "#3bc1ce" }] }, { n: 9, type: "section", area: "Practice Competence Elements", chapter: "Project Orientation & Project Preparation", day: "Day 1" }, { n: 10, type: "toc", head: "Project Orientation and Project Preparation", ref: "Project Management by ICB4", items: ["03 · Project Orientation", "04.01 · Project Preparation Stage", "04.02 · Stakeholders", "04.03 · Project Organisation", "04.04 · Requirements and Objectives", "04.05 · Risk and Opportunity"] }, { n: 11, type: "competence", num: "3.01", head: "Project Orientation", level: "C2", area: "Practice", def: "The competence to determine whether an initiative can best be carried out as a project and apply the principles of project management." }, { n: 12, type: "comparison", head: "What is a Project?", left: { src: "ICB4", text: "A unique, temporary, multi-disciplinary and organised endeavour to realise agreed deliverables within predefined requirements and constraints." }, right: { src: "PRINCE2", text: "A temporary organisation that is created for the purpose of delivering one or more business products according to an agreed Business Case." }, footer: "Both emphasise: temporary · unique · organised · goal-oriented" }, { n: 13, type: "formula", head: "Why Carry Out a Project?", headline: "Implement Changes!", formula: "E = Q × A", explain: "Effectiveness = Quality × Acceptance", note: "A perfect solution (Q=10) with zero acceptance (A=0) = zero effectiveness." }, { n: 14, type: "stats", head: "Derailment of Projects", src: "Standish Group International, UK 2021 — IT Projects", stats: [{ v: "29%", l: "Successful", c: "var(--vh-teal)" }, { v: "53%", l: "Not successful", c: "var(--vh-orange)" }, { v: "18%", l: "Cancelled", c: "#c0392b" }], insight: "More than 70% of IT projects fail to deliver on time, on budget and in scope." }, { n: 15, type: "bullets", head: "What is a Successful Project?", label: "Definition", lead: "A project is successful to the extent to which it satisfies the relevant stakeholders.", items: ["Delivered on time and within budget", "Meets the agreed specifications", "Achieves the intended business outcome", "Stakeholders consider it a success"], note: "Project management success ≠ project success." }, { n: 16, type: "bullets", head: "When is the User Satisfied?", label: "User Perspective", items: ["The purpose of the project is desired", "The urgency is felt, constraints are clear", "They have control over their immediate environment", "Actively involved throughout the project", "Purpose and constraints are well understood"] }, { n: 17, type: "stats", head: "Project Success — Reality Check", src: "Industry research", stats: [{ v: "✓ Spec", l: "Conform specifications", c: "var(--vh-blue-500)" }, { v: "✓ Budget", l: "Within budget", c: "var(--vh-teal)" }, { v: "3×", l: "Over budget", c: "var(--vh-orange)" }, { v: "4×", l: "Over schedule", c: "#c0392b" }], insight: "Meeting specifications is not enough if budget and time overrun." }, { n: 18, type: "emphasis", head: "Project Success", headline: "USERS FIRST", body: "User involvement and acceptance are the strongest predictors of project success — ahead of technical quality, budget adherence, and schedule performance.", src: "Standish Group CHAOS Report" }, { n: 19, type: "cols3", head: "Work Forms", sub: "Increasing predictability →", cols: [{ n: "Ad hoc", name: "Improvisation", color: "#7a5ad6", desc: "Flexible, demand-driven" }, { n: "Standard", name: "Process approach", color: "#1281c4", desc: "Specified, efficient, routine" }, { n: "Planned", name: "Plan-based work", color: "#c0392b", desc: "Predictable, result-oriented" }], footer: "Projects sit in the 'plan-based' work category" }, { n: 20, type: "steps", head: "Project-based Work — The Phases", steps: [{ n: 1, label: "Agree the assignment", desc: "Project preparation stage — clarify objectives, scope, constraints, organisation." }, { n: 2, label: "Plan the assignment", desc: "Project definition stage — create the project management plan." }, { n: 3, label: "Execute the assignment", desc: "Project execution stage(s) — deliver the work packages." }, { n: 4, label: "Hand over & close", desc: "Project closure — transfer output, capture lessons learned." }] }]; /* Short speaker-note per slide — surfaced in the Trainer live session. */ const IPMA_NOTES = { 0: "Welcome the group. Set the tone: 4 days, exam-focused but practical. Quick round of introductions.", 1: "Walk through the agenda. Agree house rules together — phones on silent, breaks every 90 min.", 2: "Position IPMA as the global federation. Stress ICB4 is competence-based, not just knowledge.", 3: "Introduce the Eye of Competence: Perspective (5), People (10), Practice (13). Ask which area they find hardest.", 4: "Clarify D vs C in practice — D supports, C runs limited-complex projects independently.", 5: "Walk the certification path. Reassure: no prerequisites for D, 55% pass mark.", 6: "Tie each objective back to their day job. Ask for one project they want to apply this to.", 7: "Preview the 4 days. Note Day 1 is the foundation everything else builds on.", 8: "Section divider — we now enter the Practice competence elements. Energy check before the deep dive.", 9: "Map the chapter to the book. Point learners to ICB4 reference numbers.", 10: "Define Project Orientation. Ask: when is something a project vs business-as-usual?", 11: "Compare ICB4 and PRINCE2 definitions. Draw out the shared words: temporary, unique, organised.", 12: "Emphasise the formula E = Q × A here. Ask participants for examples from their own projects before advancing.", 13: "Use the Standish numbers to provoke discussion — why do 70% of projects struggle?", 14: "Success ≠ delivery. A project can be 'on time, on budget' and still fail the stakeholders.", 15: "Shift to the user's view. What makes THEM feel a project succeeded?", 16: "Reality check: specs alone aren't enough. Budget and schedule overruns are the norm.", 17: "Land the key message: USERS FIRST. Acceptance beats technical perfection.", 18: "Work forms model — projects are plan-based work. Contrast with improvisation and routine.", 19: "Close the practice intro with the 4 phases. Preview tomorrow's project definition stage.", }; /* ─────────────────────────────── inline icons (self-contained) ── */ function IpmaIcon({ name, size = 18, color = "currentColor", stroke = 2 }) { const paths = { graduation: ["M3 9l9-5 9 5-9 5z", "M7 11v5c0 1 2.2 2.5 5 2.5s5-1.5 5-2.5v-5", "M21 9v5"], check: ["M5 13l4 4L19 7"], }[name] || []; return ( {paths.map((d, i) => )} ); } /* Inject the dotted-hex background once, scoped to .ipma-hexfield. */ (function injectIpmaCss() { if (typeof document === "undefined" || document.getElementById("ipma-slides-css")) return; const st = document.createElement("style"); st.id = "ipma-slides-css"; st.textContent = ".ipma-hexfield{position:absolute;inset:0;opacity:.5;pointer-events:none;" + "background-image:radial-gradient(rgba(148,191,230,.45) 1.1px,transparent 1.2px);" + "background-size:18px 18px;-webkit-mask-image:linear-gradient(120deg,transparent,#000 60%);" + "mask-image:linear-gradient(120deg,transparent,#000 60%)}"; document.head.appendChild(st); })(); /* ─────────────────────────────────────── SLIDE CARD RENDERER ── */ function IPMASlideCard({ s }) { const navy = "#0e1a35";const white = "#fff"; const base = { width: "100%", height: "100%", position: "relative", overflow: "hidden", fontFamily: "var(--display)", boxSizing: "border-box" }; if (s.type === "cover") return (
{s.title}
{s.sub &&
{s.sub}
} {s.credit &&
{s.credit}
}
); if (s.type === "section") return (
{s.day}
{s.area}
{s.chapter}
); if (s.type === "formula" || s.type === "emphasis") return (
{s.head}
{s.headline &&
{s.headline}
} {s.formula &&
{s.formula}
} {s.explain &&
{s.explain}
} {(s.note || s.body) &&
{s.note || s.body}
} {s.src &&
{s.src}
}
); if (s.type === "stats") return (
{s.head}
{s.src &&
{s.src}
}
{s.stats.map((st, i) =>
{st.v}
{st.l}
)}
{s.insight &&
{s.insight}
}
); if (s.type === "cols3") return (
{s.head}
{s.sub &&
{s.sub}
}
{s.cols.map((c, i) =>
{c.n}
{c.name}
{c.desc}
)}
{s.footer &&
{s.footer}
}
); if (s.type === "comparison") return (
{s.head}
{[s.left, s.right].map((side, i) =>
{side.src}
{side.text}
)}
{s.footer &&
{s.footer}
}
); if (s.type === "levels") return (
{s.head}
{s.levels.map((lv, i) =>
{lv.code}
{lv.title}
{lv.desc}
)}
); if (s.type === "steps") return (
{s.head}
{s.steps.map((st, i) =>
{st.n}
{st.label}
{st.desc}
)}
); if (s.type === "schedule") return (
{s.head}
{s.days.map((d) =>
Day {d.n}
{d.title}
)}
); if (s.type === "objectives") return (
{s.head}
{s.intro &&
{s.intro}
}
{s.items.map((it, i) =>
{it}
)}
); if (s.type === "competence") return (
Competence Element {s.num} · {s.area} · Level {s.level}
{s.head}
"{s.def}"
); if (s.type === "toc") return (
{s.head}
{s.ref &&
Reference: {s.ref}
}
{s.items.map((it, i) =>
{it}
)}
); // default: bullets return (
{s.label &&
{s.label}
}
{s.head}
{s.lead &&
{s.lead}
}
{s.items && s.items.map((it, i) =>
›{it}
)}
{s.note &&
{s.note}
}
); } /* ─────────────────── auto-fit wrapper: renders the slide at a fixed 1280×720 design size and scales it to fit any container (letterboxed), so the px-based slide always keeps correct proportions regardless of the box it lives in. Used by the Trainer live stage and the Educator overlay. */ function ScaledSlide({ s, radius = 8, shadow = true }) { const baseW = 1280, baseH = 720; const ref = React.useRef(null); const [d, setD] = React.useState(null); React.useLayoutEffect(() => { const el = ref.current; if (!el) return; const update = () => { const r = el.getBoundingClientRect(); if (r.width && r.height) { const sc = Math.min(r.width / baseW, r.height / baseH); setD({ sc: sc, w: baseW * sc, h: baseH * sc }); } }; update(); const ro = new ResizeObserver(update); ro.observe(el); return () => ro.disconnect(); }, []); return (
{d &&
}
); } /* ─────────────────────── shared portal viewer (Educator / generic) ── */ function IPMADeckOverlay({ onClose, title = "IPMA-D® Certification — Official Slideware", startIdx = 0 }) { const TOTAL = IPMA_SL.length; const [idx, setIdx] = React.useState(startIdx); const go = (n) => setIdx(Math.max(0, Math.min(TOTAL - 1, n))); React.useEffect(() => { function k(e) { if (e.key === "ArrowRight") go(idx + 1); else if (e.key === "ArrowLeft") go(idx - 1); else if (e.key === "Escape") onClose && onClose(); } window.addEventListener("keydown", k); return () => window.removeEventListener("keydown", k); }, [idx]); return ReactDOM.createPortal(
● Official slideware · synced {title} Slide {idx + 1} / {TOTAL}
{IPMA_SL.map((sl, i) =>
go(i)} style={{ flex: "none", height: 56, aspectRatio: "16 / 9", borderRadius: 5, overflow: "hidden", cursor: "pointer", border: i === idx ? "2.5px solid #f99d25" : "2.5px solid transparent", opacity: i === idx ? 1 : .5, position: "relative" }}>
)}
, document.body); } Object.assign(window, { IPMA_SL, IPMA_NOTES, IpmaIcon, IPMASlideCard, ScaledSlide, IPMADeckOverlay });