// ─── HOMEWORK TAB — quizzes (Porter/Tate/Criteria), story, scores, manifesto ──
const { useState: useHWState } = React;
function HomeworkTab({ homework, setHomework, onJumpToSchool }) {
const [view, setView] = useHWState("overview");
const update = (path, value) => {
setHomework(h => {
const next = JSON.parse(JSON.stringify(h || {}));
let cur = next;
for (let i = 0; i < path.length - 1; i++) {
cur[path[i]] = cur[path[i]] || {};
cur = cur[path[i]];
}
cur[path[path.length - 1]] = value;
return next;
});
};
const VIEWS = [
{ id:"overview", label:"Overview" },
{ id:"porter", label:"About Porter" },
{ id:"tate", label:"About Tate" },
{ id:"criteria", label:"Our criteria" },
{ id:"story", label:"Story prompts" },
{ id:"scores", label:"School scores" },
{ id:"profile", label:"Our profile" },
];
return (
Homework · for both of you
The decision is not the school.
It's the conversation getting there.
Each of you takes the quizzes alone first — no peeking. Then you compare.
The system reweights the schools based on what you both said matters.
{VIEWS.map(v => {
const active = view === v.id;
return (
);
})}
{view === "overview" &&
}
{view === "porter" &&
}
{view === "tate" &&
}
{view === "criteria" &&
}
{view === "story" &&
}
{view === "scores" &&
}
{view === "profile" &&
}
);
}
// ─── Overview ────────────────────────────────────────
function HWOverview({ homework, setView }) {
const h = homework || {};
const cards = [
{ id:"porter", eyebrow:"01 · Porter", title:"About Porter", body:"Six prompts. Jamie, Tom, then Together.", progress: kidProgress(h, "porter") },
{ id:"tate", eyebrow:"02 · Tate", title:"About Tate", body:"Same six prompts, for our second.", progress: kidProgress(h, "tate") },
{ id:"criteria", eyebrow:"03 · Criteria", title:"Our criteria", body:"Rate ten dimensions 1–10 separately. Weights drive the ranking.", progress: critProgress(h) },
{ id:"story", eyebrow:"04 · Story", title:"Story prompts", body:"Five reflective prompts. Voice or type.", progress: storyProgress(h) },
{ id:"scores", eyebrow:"05 · Scores", title:"Score schools after each tour", body:"Tom + Jamie rate each school out of 10 on the criteria.", progress: scoresProgress(h) },
{ id:"profile", eyebrow:"06 · Output", title:"Our profile", body:"A weighted ranking + priorities manifesto, written for you.", progress: null },
];
return (
The six modules
Work through these between now and the first round of tours.
{cards.map((c, i) => (
))}
);
}
function kidProgress(h, kidId) {
const k = (h.kidQuiz || {})[kidId] || {};
const j = PORTER_PROMPTS.filter(p => (k.jamie || {})[p.id]?.trim?.()).length;
const t = PORTER_PROMPTS.filter(p => (k.tom || {})[p.id]?.trim?.()).length;
const tg = PORTER_PROMPTS.filter(p => (k.together || {})[p.id]?.trim?.()).length;
if (j===0 && t===0 && tg===0) return { label:"Not started", complete:false };
const total = PORTER_PROMPTS.length;
return { label:`J ${j}/${total} · T ${t}/${total} · Together ${tg}/${total}`, complete: j===total && t===total };
}
function critProgress(h) {
const j = Object.keys((h.criteria||{}).jamie || {}).length;
const t = Object.keys((h.criteria||{}).tom || {}).length;
if (j===0 && t===0) return { label:"Not started", complete:false };
return { label:`J ${j}/${CRITERIA.length} · T ${t}/${CRITERIA.length}`, complete: j===CRITERIA.length && t===CRITERIA.length };
}
function storyProgress(h) {
const j = STORY_PROMPTS.filter(p => ((h.story||{}).jamie || {})[p.id]?.trim?.()).length;
const t = STORY_PROMPTS.filter(p => ((h.story||{}).tom || {})[p.id]?.trim?.()).length;
if (j===0 && t===0) return { label:"Not started", complete:false };
return { label:`J ${j}/${STORY_PROMPTS.length} · T ${t}/${STORY_PROMPTS.length}`, complete: j===STORY_PROMPTS.length && t===STORY_PROMPTS.length };
}
function scoresProgress(h) {
const scored = SHORTLIST.filter(s => {
const sc = (h.scores || {})[s.name] || {};
return CRITERIA.some(c => sc[c.id]?.jamie != null || sc[c.id]?.tom != null);
}).length;
if (scored === 0) return { label:"Not started", complete:false };
return { label:`${scored}/${SHORTLIST.length} schools`, complete: scored === SHORTLIST.length };
}
// ─── Kid quiz (Porter or Tate) ────────────────────────
function KidQuiz({ kidId, homework, update }) {
const [pass, setPass] = useHWState("jamie");
const kid = KIDS.find(k => k.id === kidId) || KIDS[0];
const passes = [
{ id:"jamie", label:"Jamie alone", color:"var(--forest)" },
{ id:"tom", label:"Tom alone", color:"var(--gold)" },
{ id:"together", label:"Together", color:"var(--forest-deep)" },
];
const data = ((homework?.kidQuiz || {})[kidId] || {})[pass] || {};
const set = (id, v) => update(["kidQuiz", kidId, pass, id], v);
return (
About {kid.name}
Who is he, really?
Each of you answers alone first. The 'together' pass is the conversation.
{passes.map(p => {
const active = pass === p.id;
return (
);
})}
{PORTER_PROMPTS.map((p, i) => (
{String(i+1).padStart(2,"0")}
set(p.id, v)} placeholder={p.placeholder} rows={3} />
))}
);
}
// ─── Criteria sliders ─────────────────────────────────
function CriteriaQuiz({ homework, update }) {
const [who, setWho] = useHWState("jamie");
const data = (homework?.criteria || {})[who] || {};
const set = (id, v) => update(["criteria", who, id], v);
return (
Our criteria
Set the weight, 1–10. Don't average — go honest.
These weights drive the ranking. Pick separately, then compare.
{who === "compare" ? (
{CRITERIA.map(c => (
))}
) : (
{CRITERIA.map(c => (
{c.label}
{c.desc}
set(c.id, v)} accent={who==="jamie"?"var(--forest)":"var(--gold)"} />
))}
)}
);
}
// ─── Story prompts ────────────────────────────────────
function StoryQuiz({ homework, update }) {
const [who, setWho] = useHWState("jamie");
const data = (homework?.story || {})[who] || {};
const set = (id, v) => update(["story", who, id], v);
return (
Story prompts
Reflective, not analytical. Use the mic.
{who === "compare" ? (
{STORY_PROMPTS.map(p => {
const j = ((homework?.story || {}).jamie || {})[p.id];
const t = ((homework?.story || {}).tom || {})[p.id];
if (!j?.trim() && !t?.trim()) return null;
return (
);
})}
) : (
{STORY_PROMPTS.map(p => (
set(p.id, v)} placeholder={p.placeholder} rows={4} />
))}
)}
);
}
// ─── School scores ────────────────────────────────────
function ScoresView({ homework, update, onJumpToSchool }) {
const [school, setSchool] = useHWState(SHORTLIST[0].name);
const sc = ((homework?.scores || {})[school]) || {};
const setScore = (critId, who, v) => update(["scores", school, critId, who], v);
const setNote = (who, v) => update(["scores", school, "_notes", who], v);
return (
School scores
Score after each tour. Out of ten. Both of you.
Walk out of the tour, sit in the car, score before you talk. Then talk.
{/* School picker */}
{SHORTLIST.map(s => {
const active = school === s.name;
return (
);
})}
{/* Per-criterion scoring */}
{CRITERIA.map(c => (
{c.label}
Jamie
setScore(c.id, "jamie", v)} accent="var(--forest)" />
Tom
setScore(c.id, "tom", v)} accent="var(--gold)" />
))}
{/* Tour notes */}
Jamie's notes
setNote("jamie", v)} placeholder="What stood out. Use the mic." rows={3} />
Tom's notes
setNote("tom", v)} placeholder="What stood out. Use the mic." rows={3} />
);
}
// ─── Profile output: weighted ranking + manifesto ─────
function ProfileView({ homework, setView, onJumpToSchool }) {
const ranked = computeRanking(homework);
const haveScores = ranked.length > 0 && ranked[0].score > 0;
const j = (homework?.criteria || {}).jamie || {};
const t = (homework?.criteria || {}).tom || {};
const topCriteria = CRITERIA
.map(c => ({ ...c, weight: ((j[c.id]||0) + (t[c.id]||0)) / 2 }))
.filter(c => c.weight > 0)
.sort((a,b) => b.weight - a.weight)
.slice(0, 5);
return (
Our profile
Here's what you said matters — and how the schools rank for it.
Updates live as you score schools. Honest in, honest out.
{/* Top criteria */}
{topCriteria.length > 0 ? (
What you both weight highest
{topCriteria.map((c, i) => (
0{i+1}
{c.label}
weight {c.weight.toFixed(1)}
))}
) : (
setView("criteria")} />
)}
{/* Ranking */}
Weighted school ranking
{haveScores ? (
{ranked.map((r, i) => (
))}
);
}
function computeRanking(h) {
if (!h) return [];
const j = (h.criteria||{}).jamie || {};
const t = (h.criteria||{}).tom || {};
return SHORTLIST.map(s => {
const sc = (h.scores||{})[s.name] || {};
let total = 0, totalW = 0, scoredCount = 0;
CRITERIA.forEach(c => {
const sj = sc[c.id]?.jamie, st = sc[c.id]?.tom;
const wj = j[c.id], wt = t[c.id];
if (sj == null && st == null) return;
scoredCount++;
const avgScore = (sj!=null && st!=null) ? (sj+st)/2 : (sj!=null ? sj : st);
const avgWeight = (wj!=null && wt!=null) ? (wj+wt)/2 : (wj!=null ? wj : (wt!=null ? wt : 5));
total += avgScore * avgWeight;
totalW += avgWeight;
});
const score = totalW > 0 ? total / totalW : 0;
return { name: s.name, score, scoredCount };
}).filter(r => r.scoredCount > 0).sort((a,b) => b.score - a.score);
}
function Manifesto({ homework, topCriteria }) {
const lines = [];
if (topCriteria.length >= 1) lines.push(`What we want most: ${topCriteria.slice(0,3).map(c => c.label.toLowerCase()).join(", ")}.`);
const stories = STORY_PROMPTS.map(p => {
const j = ((homework?.story||{}).jamie || {})[p.id];
const t = ((homework?.story||{}).tom || {})[p.id];
return { label:p.label, j, t };
}).filter(s => s.j?.trim() || s.t?.trim());
if (!lines.length && !stories.length) {
return Your manifesto appears once you've answered the criteria and story prompts.
;
}
return (
{lines.map((l, i) => (
{l}
))}
{stories.length > 0 && (
{stories.slice(0,3).map((s, i) => (
{s.label}
{s.j?.trim() &&
Jamie — {s.j}
}
{s.t?.trim() &&
Tom — {s.t}
}
))}
)}
{opts.map(o => {
const active = who === o.id;
return (
);
})}
);
}
window.HomeworkTab = HomeworkTab;