/* ============================================================ Guided Workshop — Results tab (revamped) Composition: 1. Header — title + "Result options" dropdown 2. Stat grid — 4 KPI cards (Attendance / Overall score / Score type / Actions) 3. Score breakdown — collapsible table by chapter showing per-item score-type / question-type / score 4. Question overview — one detail card per item with the actual content + distribution + AI summary Exports: window.ResultsTabRevamped Reads: window.GW_CHAPTERS, GW_ACTIONS window.gwViews.ContentView etc (for re-using item bodies) ============================================================ */ const { useState: rUseState, useMemo: rUseMemo, useEffect: rUseEffect, useRef: rUseRef } = React; /* ---------- Deterministic mock helpers ---------- Scores and distributions need to be stable across renders, so we derive everything from the item id via a tiny xfnv1a-style hash. */ function rHash(str) { let h = 2166136261; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); } return h >>> 0; } function rRand(seed) { /* mulberry32 */ let t = seed + 0x6D2B79F5; t = Math.imul(t ^ (t >>> 15), t | 1); t ^= t + Math.imul(t ^ (t >>> 7), t | 61); return ((t ^ (t >>> 14)) >>> 0) / 4294967296; } /* Score-type assignment: pick "Understanding", "Compliance", or "Performance" per item based on its semantic role. Heuristics: - content → Understanding - media → Understanding - evidence → Compliance - question/textarea/text → Compliance - question/rating/boolean → Performance - question/radio (poll) → mix — let id hash decide */ function scoreTypeFor(item) { if (!item) return "Understanding"; if (item.type === "content" || item.type === "media") return "Understanding"; if (item.type === "evidence") return "Compliance"; if (item.type === "question") { const q = item.questionType; if (q === "rating" || q === "boolean") return "Performance"; if (q === "textarea" || q === "text") return "Compliance"; /* radio — use hash */ return (rHash(item.id) % 3 === 0) ? "Performance" : (rHash(item.id) % 3 === 1) ? "Understanding" : "Compliance"; } return "Understanding"; } /* Per-item score on the 0–10 scale (matches the screenshot). */ function scoreFor(item) { const r = rRand(rHash(item.id || "x")); /* skew toward 4–8 to feel realistic */ return Math.round((3 + r * 6) * 10) / 10; } /* Action count per item — small integers. */ function actionsFor(item) { const r = rRand(rHash("a_" + (item.id || "x"))); return Math.floor(r * 6); /* 0..5 */ } /* ---------- Distribution helpers ---------- Build a question-type-shaped distribution for ANY question item, poll or individual. Mirrors computeDistribution from gwViews but doesn't require session data — we manufacture a plausible response count from the item id so individual questions also show results. */ const RT_TEXT_RESPONSES = [ "No blame, early speak up culture", "Aligned strategy to shift outcomes in a positive way for next 12 months", "More time spent targeting male middle aged employees", "Improved selection process", "1) Improve recruiting to ensure values fit for key roles, particularly leaders at all levels. Psychometric values fit testing? 2) share incidents, investigation findings and outcomes with leaders", "Improved selection process", "Aligned strategy to shift outcomes in a positive way for next 12 months", "Improved selection process", ]; const RT_TEXTAREA_RESPONSES = [ "\"I think our teams know, but they don't necessarily like it.\" \"Some of the teams actively pushing against it.\"", "\"From front-line, not everyone necessarily believes it is their accountability. They may call it out, but not necessarily their accountability.\" \"Helping leaders with further engaging in discussion when they get push-back and challenge on \"you are pushing me\"\"", "\"Teams may not have a clear understanding to identify the lower level hazards.\" On a journey here.", "50 — \"Still think half our workforce dont get this.\" >3000 odd people. Example shared of incident on-site with two females in the room and a comment made. Leader addressed.", ]; function syntheticDist(item) { if (!item || item.type !== "question") return null; const seed = rHash(item.id); const total = 30 + (seed % 80); /* 30..109 "responses" */ const t = item.questionType; if (t === "radio") { const opts = item.options || []; const N = opts.length || 1; /* Distribute total across options with a skew. */ const weights = Array.from({ length: N }, (_, i) => { const r = rRand(seed + i * 31); return 0.3 + r * 1.2; }); const sumW = weights.reduce((a, b) => a + b, 0); const counts = weights.map(w => Math.max(1, Math.round((w / sumW) * total))); return { counts, labels: opts, total }; } if (t === "rating") { const max = item.scale?.max || 5; const min = item.scale?.min || 1; const N = max - min + 1; const raw = Array.from({ length: N }, (_, i) => { const r = rRand(seed + i * 11); const weight = 0.3 + Math.abs(Math.sin((i / Math.max(1, N - 1)) * Math.PI)) * 1.2; return Math.max(1, Math.round(r * 100 * weight)); }); const sumW = raw.reduce((a, b) => a + b, 0); const counts = raw.map(c => Math.max(0, Math.round((c / sumW) * total))); return { counts, max, min, total }; } if (t === "boolean") { const yesPct = 40 + (seed % 35); const yes = Math.round((yesPct / 100) * total); return { yes, no: total - yes, total }; } if (t === "text") { const n = Math.min(RT_TEXT_RESPONSES.length, Math.max(3, total % 9)); return { responses: RT_TEXT_RESPONSES.slice(0, n), total }; } if (t === "textarea") { const n = Math.min(RT_TEXTAREA_RESPONSES.length, Math.max(3, total % 6)); return { responses: RT_TEXTAREA_RESPONSES.slice(0, n), total }; } return null; } /* Health % from a per-questionType dist: - radio: percent of responses in the "top half" of options - rating: percent at or above the midpoint - boolean: yes percent - text/area: percent of responders (== 100 by definition) */ function healthFromDist(item, dist) { if (!dist) return 0; const t = item.questionType; const total = dist.total || dist.counts?.reduce((a, b) => a + b, 0) || 0; if (total === 0) return 0; if (t === "radio") { const N = dist.counts.length; const half = Math.ceil(N / 2); const top = dist.counts.slice(0, half).reduce((a, b) => a + b, 0); return Math.round((top / total) * 100); } if (t === "rating") { const counts = dist.counts; const mid = Math.ceil(counts.length / 2); const top = counts.slice(mid).reduce((a, b) => a + b, 0); return Math.round((top / total) * 100); } if (t === "boolean") return Math.round((dist.yes / total) * 100); return 100; } /* Average for rating/radio (for the stat card) */ function averageFromDist(item, dist) { if (!dist) return 0; const t = item.questionType; if (t === "rating") { const total = dist.counts.reduce((a, b) => a + b, 0); if (!total) return 0; const sum = dist.counts.reduce((acc, c, i) => acc + c * (dist.min + i), 0); return sum / total; } if (t === "radio") { const total = dist.counts.reduce((a, b) => a + b, 0); if (!total) return 0; const sum = dist.counts.reduce((acc, c, i) => acc + c * (i + 1), 0); return sum / total; } return 0; } /* Per-question type bucket label (the "Question type" column in the screenshot — Formal / Poll / Initial / etc). */ function questionTypeFor(item) { if (!item) return null; if (item.type === "question" && item.mode === "poll") return "Poll"; if (item.type === "question") return "Formal"; if (item.type === "evidence") return "Initial"; if (item.type === "media") return "Formal"; if (item.type === "content") return "Formal"; return null; } /* Letter grade band from 0..10 score */ function gradeFor(score) { if (score >= 8.5) return "A+"; if (score >= 7.5) return "A"; if (score >= 6.5) return "B"; if (score >= 5.5) return "C"; if (score >= 4.0) return "D"; return "F"; } function gradeTone(grade) { if (grade === "A+" || grade === "A") return "green"; if (grade === "B" || grade === "C") return "amber"; return "red"; } /* Health score (%) derived from a per-question-type distribution. */ function healthScoreFromItem(item) { if (!item || item.type !== "question") return 0; const d = syntheticDist(item); return healthFromDist(item, d); } /* ---------- Icons ---------- */ const rIcons = { attendance: , score: , scoreType: , actions: , understand: , compliance: , performance:, sparkle: , caret: , download: , expand: , }; /* ===================================================================== Stat grid — 4 KPI cards across the top ===================================================================== */ function ResultsStatGrid({ stats }) { return (
{rIcons.attendance}

Attendance

Total participants
{stats.participants}
Total responses
{stats.responses}
{rIcons.score}

Overall Score

Avg. score
{stats.avgScore.toFixed(1)}
Health score
{stats.healthScore}%
{rIcons.scoreType}

Score type

Understanding
Compliance
Performance
{rIcons.actions}

Actions

Opportunity
{stats.actions.opportunity}
Action
{stats.actions.action}
Feedback
{stats.actions.feedback}
); } function ScoreTypeChip({ kind, small }) { const icon = kind === "Understanding" ? rIcons.understand : kind === "Compliance" ? rIcons.compliance : rIcons.performance; return ( {icon} ); } function GradePill({ grade }) { return {grade}; } /* ===================================================================== Score breakdown — collapsible table, one row per chapter, each chapter expanding to per-item rows. ===================================================================== */ function ScoreBreakdownTable({ chapters }) { const [open, setOpen] = rUseState(() => new Set([chapters[1]?.id])); /* default-expand chapter 2 */ const toggle = (id) => setOpen(prev => { const n = new Set(prev); n.has(id) ? n.delete(id) : n.add(id); return n; }); return (

Score breakdown

View scores of different categories of questions and actions.

{chapters.map((c) => { const isOpen = open.has(c.id); const chapterScore = c.items.length ? Math.round((c.items.reduce((s, it) => s + scoreFor(it), 0) / c.items.length) * 10) / 10 : 0; const chapterActions = c.items.reduce((s, it) => s + actionsFor(it), 0); return ( toggle(c.id)}> {isOpen && c.items.map((it) => { const st = scoreTypeFor(it); const qt = questionTypeFor(it); const sc = scoreFor(it); const ac = actionsFor(it); return ( ); })} ); })}
Module name Score type Question type Score Actions
— {c.items.length} {c.items.length === 1 ? "item" : "items"} {chapterScore.toFixed(1)} {chapterActions}
{it.num} {it.title}
{st}
 Formal {qt && qt !== "Formal" && {qt}} {sc.toFixed(1)} {ac}
); } function DistributionForQuestion({ item }) { const dist = syntheticDist(item); if (!dist) return null; const t = item.questionType; const gv = window.gwViews; if (!gv || !gv.RadioChart) return null; return (
{t === "radio" && } {t === "rating" && } {t === "boolean" && } {t === "text" && } {t === "textarea" && }
); } /* ===================================================================== Per-item result card — handles every item type ===================================================================== */ function QuestionResultCard({ chapter, item, gwViews }) { const [open, setOpen] = rUseState(true); const st = scoreTypeFor(item); const qt = questionTypeFor(item); const isQuestion = item.type === "question"; const dist = isQuestion ? syntheticDist(item) : null; const avg = isQuestion ? averageFromDist(item, dist) : 0; const max = item.scale?.max || (item.questionType === "rating" ? 5 : 5); const health = isQuestion ? healthFromDist(item, dist) : 0; /* Helper to know whether to show the stat row (only when there's an average score concept). */ const showAvg = isQuestion && (item.questionType === "rating" || item.questionType === "radio"); const showHealth = isQuestion; /* Body — re-use the actual content viewers for content/media/evidence so the results tab mirrors what the completer saw. Question items get the per-type chart instead. */ const renderBody = () => { if (!gwViews) return null; if (item.type === "content") return {}} />; if (item.type === "media") return {}} />; if (item.type === "evidence") return {}} />; return null; }; return (
setOpen(o => !o)}>
Chapter {chapter.num}: {chapter.title}

{item.num} {item.title}

Formal {qt && qt !== "Formal" && {qt}}
{open && (
{/* Question stats — only meaningful for interactive questions */} {isQuestion && (showAvg || showHealth) && (
{showAvg && (
{rIcons.score}
Average score {avg.toFixed(2)} out of {max.toFixed(2)}
)} {showHealth && (
{rIcons.compliance}
Health score {health}%
)}
{rIcons.attendance}
Responses {dist?.total || 0}
)} {/* Body — content / media / evidence renders the actual content viewer */} {renderBody()} {/* Per-question-type chart */} {isQuestion && } {/* AI summary only when there's a question (or any answered item) */} {isQuestion && } {/* Session notes only on items that captured commentary */} {(isQuestion || (item.type === "media" && item.commentBox)) && ( )}
)}
); } /* AI summary block — short synthesised paragraph keyed by the dist's leaning. Doesn't call Claude (rate-limit hostile per card). */ function AiSummary({ item }) { const seed = rHash(item.id); const lean = seed % 3; const text = lean === 0 ? `Responses cluster around the positive bands. The team broadly agrees the foundations are in place — there's appetite to push further but no signal of widespread resistance.` : lean === 1 ? `Sharply split. About a third are clearly behind it, another third sit on the fence, and a meaningful tail pushes back. Worth a follow-up conversation to understand the dissent.` : `Overwhelmingly skewed to the lower bands. Take this as a signal that the framing or the process itself needs revisiting before any individual action items.`; return (
{rIcons.sparkle} AI Summary

{text}

); } function SessionNotes({ item }) { const NOTES_SEED = [ "\"I think our teams know, but they don't necessarily like it.\" \"Some of the teams actively pushing against it.\"", "\"From front-line, not everyone necessarily believes it is their accountability. They may call it out, but not necessarily their accountability.\" \"Helping leaders with further engaging in discussion when they get push-back and challenge on \"you are pushing me\"", "\"Teams may not have a clear understanding to identify the lower level hazards.\" On a journey here.", "50 — \"Still think half our workforce dont get this.\" >3000 odd people. Example shared of incident on-site with two females in the room and a comment made. Leader addressed. \"Bunch of people get it and some people don't.\"", ]; return (
Session Notes
    {NOTES_SEED.map((n, i) =>
  • {n}
    • )}
); } /* ===================================================================== Results header ===================================================================== */ function ResultsHeader() { const [open, setOpen] = rUseState(false); return (

Workshop results

Showing detailed results of each question.

{open && (
    setOpen(false)}>
)}
); } /* ===================================================================== Question overview — layout A: chapter rail + foldable sections ===================================================================== */ function QuestionOverviewRail({ chapters, gwViews }) { /* Track open state per chapter and the current rail-target */ const [open, setOpen] = rUseState(() => new Set([chapters[0]?.id])); const [active, setActive] = rUseState(chapters[0]?.id); const containerRef = rUseRef(null); const sectionRefs = rUseRef({}); const toggle = (id) => setOpen(prev => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; }); const goTo = (id) => { setActive(id); setOpen(prev => { const n = new Set(prev); n.add(id); return n; }); /* Defer so the section is mounted before we scroll */ requestAnimationFrame(() => { const el = sectionRefs.current[id]; if (!el) return; const rect = el.getBoundingClientRect(); const offsetTop = rect.top + window.scrollY - 80; /* leave room for the workshop topbar */ window.scrollTo({ top: offsetTop, behavior: "smooth" }); }); }; /* Per-chapter score roll-up (reuse the helper from ScoreBreakdownTable) */ const chapterScore = (c) => c.items.length ? Math.round((c.items.reduce((s, it) => s + scoreFor(it), 0) / c.items.length) * 10) / 10 : 0; return (

Question overview & scores

View details of each question with results from workshop.

{chapters.map((c) => { const isOpen = open.has(c.id); const sc = chapterScore(c); return (
{ if (el) sectionRefs.current[c.id] = el; }} > {isOpen && (
{c.items.map((item) => ( ))}
)}
); })}
); } /* ===================================================================== Question overview — layout C: chapter tabs ===================================================================== */ function QuestionOverviewTabs({ chapters, gwViews }) { const [activeId, setActiveId] = rUseState(chapters[0]?.id); const activeChapter = chapters.find(c => c.id === activeId) || chapters[0]; const chapterScore = (c) => c.items.length ? Math.round((c.items.reduce((s, it) => s + scoreFor(it), 0) / c.items.length) * 10) / 10 : 0; return (

Question overview & scores

View details of each question with results from workshop. Switch chapters with the tabs above.

{chapters.map((c) => { const isActive = c.id === activeId; return ( ); })}
{activeChapter && activeChapter.items.map((item) => ( ))}
); } /* ===================================================================== Top-level revamped Results tab ===================================================================== */ function ResultsTabRevamped({ layout = "rail" }) { const chapters = window.GW_CHAPTERS; const actions = window.GW_ACTIONS || []; const gwViews = window.gwViews; const stats = rUseMemo(() => { /* Attendance — derive from the polls that have session data; fall back to plausible defaults. */ let participants = 320; let responses = 0; for (const c of chapters) for (const it of c.items) { if (it.session) responses = Math.max(responses, it.session.responded || 0); } if (responses === 0) responses = 80; /* Avg score across all items */ const allItems = chapters.flatMap(c => c.items); const avgScore = allItems.length ? allItems.reduce((s, it) => s + scoreFor(it), 0) / allItems.length : 0; /* Health score (%) — average across question items only */ const qItems = allItems.filter(it => it.type === "question"); const allHealth = qItems.length ? Math.round(qItems.reduce((s, it) => s + healthScoreFromItem(it), 0) / qItems.length) : 0; /* Per score-type grade */ const byType = { Understanding: [], Compliance: [], Performance: [] }; for (const it of allItems) byType[scoreTypeFor(it)].push(scoreFor(it)); const grades = { Understanding: gradeFor(byType.Understanding.reduce((s, n) => s + n, 0) / Math.max(1, byType.Understanding.length)), Compliance: gradeFor(byType.Compliance.reduce((s, n) => s + n, 0) / Math.max(1, byType.Compliance.length)), Performance: gradeFor(byType.Performance.reduce((s, n) => s + n, 0) / Math.max(1, byType.Performance.length)), }; /* Action bucket counts — use GW_ACTIONS' priority field if present */ const actCounts = { opportunity: 0, action: 0, feedback: 0 }; actions.forEach((a) => { const p = (a.priority || "med"); if (p === "high") actCounts.opportunity++; else if (p === "low") actCounts.feedback++; else actCounts.action++; }); /* Backfill to match the screenshot numbers if zeros */ if (actCounts.opportunity === 0) actCounts.opportunity = 3; if (actCounts.action === 0) actCounts.action = 1; if (actCounts.feedback === 0) actCounts.feedback = 5; return { participants, responses, avgScore, healthScore: allHealth, grades, actions: actCounts }; }, [chapters, actions]); /* Pairs of (chapter, item) — flattened (used only if a future "all" layout shows the whole list). */ const allPairs = rUseMemo(() => { const out = []; for (const c of chapters) for (const it of c.items) out.push({ chapter: c, item: it }); return out; }, [chapters]); return (
{layout === "tabs" ? : }
); } window.ResultsTabRevamped = ResultsTabRevamped;