// Interactive demo + emotional story sections
const { useState, useEffect, useRef } = React;
// ─── Interactive Rubric Demo ─────────────────────────────────────────
// User clicks a deduction on a graded paper. The right side composes
// an appeal email letter-by-letter, citing the rubric back at the teacher.
const MARKS = [
{
id: 'q2',
label: 'Q2 · −3 points',
teacherNote: '— show your work in step 3',
rubric: 'Solutions must include full intermediate steps for chain rule applications.',
yourWork: 'Step 3: applied chain rule (d/dx of sin(u))',
appeal: "Hi Professor Ramirez,\n\nThanks for the detailed feedback on Problem Set 4. On Q2, I do show the chain rule in step 3 — I differentiate sin(u) and substitute back. Could you take a second look at line 4 of my work? I believe the rubric criterion for intermediate steps is met.\n\nHappy to walk through it in office hours if helpful.\n\nBest,\nMaya"
},
{
id: 'q3',
label: 'Q3 · −2 points',
teacherNote: '— wrong method',
rubric: 'Any valid technique earning the correct antiderivative receives full credit.',
yourWork: 'Used u-substitution. Result matches expected answer ±C.',
appeal: "Hi Professor Ramirez,\n\nQuick question about Q3. The rubric says any valid technique earning the correct antiderivative receives full credit. I used u-substitution and arrived at the expected result (off by a constant of integration). Would you be open to reconsidering the method deduction?\n\nThank you for the time,\nMaya"
},
{
id: 'q5',
label: 'Q5 · −5 points',
teacherNote: '— missing units',
rubric: 'Units required on final answers only, not intermediate computations.',
yourWork: 'Final answer carries units (m/s²). Intermediate lines are unitless.',
appeal: "Hi Professor Ramirez,\n\nOn Q5, my final answer includes units (m/s²) — the rubric notes units are required on final answers only, not intermediate work. Could the deduction be revisited under that criterion?\n\nGratefully,\nMaya"
},
];
function InteractiveDemo() {
const [active, setActive] = useState('q2');
const [typed, setTyped] = useState('');
const mark = MARKS.find(m => m.id === active);
useEffect(() => {
setTyped('');
let cancelled = false; let i = 0;
const tick = () => {
if (cancelled) return;
i++;
if (i <= mark.appeal.length) { setTyped(mark.appeal.slice(0,i)); setTimeout(tick, 14); }
};
const t = setTimeout(tick, 250);
return () => { cancelled = true; clearTimeout(t); };
}, [active]);
return (
Try the demo
Watch the appeal write itself.
A real graded paper. Real rubric language. Click each deduction to see how Regrade builds your case.
{/* graded paper */}
PROBLEM SET 4 · CALCULUS II · FALL 2026
Maya Rivera — graded 11/03
B−
}
tone="bad"
/>
}
tone="bad"
/>
}
tone="bad"
/>
CLICK ANY RED MARK
{/* appeal panel */}
Appeal builder · {mark.label}
Your case
DRAFTING
Draft to send
{typed}
{
const to = window.getWaitlistEmail ? window.getWaitlistEmail() : 'hello@regrade.app';
const subject = encodeURIComponent('Appeal draft (Regrade demo)');
const body = encodeURIComponent(mark.appeal);
const href = `mailto:${to}?subject=${subject}&body=${body}`;
if (window.openMailtoUrl) window.openMailtoUrl(href);
else window.location.assign(href);
}}>Open in Mail
);
}
function QuestionRow({ num, body, answer, mark, tone }) {
return (
{num}
{body}
→ {answer}
{typeof mark === 'string'
? {mark}
: mark}
);
}
function MarkClicker({ id, active, onClick, label, note }) {
const isOn = active === id;
return (
);
}
function CitationLine({ label, body, tone = 'cream' }) {
const accent = tone === 'cyan' ? '#7DD3FC' : '#FFFFFF';
return (
{label}
{body}
);
}
// ─── Stories from the inbox — emotional rotating cards ──────────────
const STORIES = [
{
name: 'Maya, sophomore',
tag: 'First in family · Bio major · 3.7 GPA',
before: "I felt sick walking past her office every Tuesday.",
after: "Sent the email Thursday. Got the regrade Monday.",
delta: '+8 pts',
course: 'Calculus II',
color: '#7DD3FC',
},
{
name: 'Arjun, freshman',
tag: 'International · CS · second language',
before: "I rewrote that email seven times. Never sent any of them.",
after: "Regrade got the tone right in one try. She apologized.",
delta: '+12 pts',
course: 'Discrete Math',
color: '#4FA8E0',
},
{
name: 'Jordan, transfer',
tag: 'Community college · single parent · works nights',
before: "I don't have time to be polite for forty-five minutes.",
after: "Sixty seconds, on the bus. Got my Pell standing back.",
delta: '+15 pts',
course: 'English Comp',
color: '#E27D6B',
},
{
name: 'Priya, senior',
tag: 'Pre-med · scholarship · 3 jobs',
before: "He grades on tone. I'm not white. I noticed.",
after: "Regrade wrote it like the kid who sits next to me wrote it.",
delta: '+6 pts',
course: 'Organic Chemistry',
color: '#7DD3FC',
},
{
name: 'Devon, junior',
tag: 'First-gen · veteran · age 28',
before: "I'm too old to feel stupid asking 'is this fair?'",
after: "It wasn't fair. Now it's fixed.",
delta: '+9 pts',
course: 'Statistics',
color: '#4FA8E0',
},
];
function StoriesCarousel() {
const [idx, setIdx] = useState(0);
const containerRef = useRef(null);
const dragRef = useRef({ down: false, startX: 0, scroll: 0 });
const [paused, setPaused] = useState(false);
// auto rotate
useEffect(() => {
if (paused) return;
const t = setInterval(() => setIdx(i => (i + 1) % STORIES.length), 4200);
return () => clearInterval(t);
}, [paused]);
// drag-to-scroll for the row
useEffect(() => {
const el = containerRef.current; if (!el) return;
const down = (e) => {
dragRef.current.down = true;
dragRef.current.startX = (e.touches?.[0]?.clientX ?? e.clientX);
dragRef.current.scroll = el.scrollLeft;
setPaused(true);
};
const move = (e) => {
if (!dragRef.current.down) return;
const x = (e.touches?.[0]?.clientX ?? e.clientX);
el.scrollLeft = dragRef.current.scroll - (x - dragRef.current.startX);
};
const up = () => { dragRef.current.down = false; };
el.addEventListener('mousedown', down);
window.addEventListener('mousemove', move);
window.addEventListener('mouseup', up);
el.addEventListener('touchstart', down, { passive: true });
el.addEventListener('touchmove', move, { passive: true });
el.addEventListener('touchend', up);
return () => {
el.removeEventListener('mousedown', down);
window.removeEventListener('mousemove', move);
window.removeEventListener('mouseup', up);
el.removeEventListener('touchstart', down);
el.removeEventListener('touchmove', move);
el.removeEventListener('touchend', up);
};
}, []);
// scroll the row to the active index
useEffect(() => {
const el = containerRef.current; if (!el) return;
const card = el.children[idx]; if (!card) return;
const elRect = el.getBoundingClientRect();
const cRect = card.getBoundingClientRect();
const target = el.scrollLeft + (cRect.left - elRect.left) - (elRect.width/2 - cRect.width/2);
el.scrollTo({ left: target, behavior: 'smooth' });
}, [idx]);
return (