Step 01 — Identify Yourself
Drop your email to take the test.
Your IQ score gets tied to your email so you can track and share it. You don't have to join the waitlist —
but if you score high, we'll know.
No spam. Required for share + leaderboard.
);
const ReadyScreen = ({ accent, sport, email, onStart, onChangeEmail }) => (
Step 02 — Pick a Sport, Press Start
Ready, {sport}?
10Questions
60sOn the clock
4Choices each
Playing as {email} ·
);
const QuestionView = ({ accent, question, idx, sport, picked, onPick }) => (
{sport} · Question {idx + 1}
{question.q}
{question.options.map((opt, i) => {
let state = 'idle';
if (picked !== null) {
if (i === question.correct) state = 'correct';
else if (i === picked) state = 'wrong';
else state = 'dimmed';
}
const styles = {
idle: {
border: '1px solid rgba(255,255,255,0.1)',
color: '#fff',
background: 'rgba(255,255,255,0.015)'
},
correct: {
border: `1px solid ${accent}`,
color: accent,
background: `${accent}15`,
boxShadow: `0 0 0 1px ${accent}, 0 0 30px -5px ${accent}80`
},
wrong: {
border: '1px solid #B84A4A',
color: '#FF8888',
background: '#B84A4A15'
},
dimmed: {
border: '1px solid rgba(255,255,255,0.06)',
color: '#555',
background: 'transparent'
}
}[state];
return (
);
})}
);
const ACS_BY_CORRECT = [140, 235, 330, 425, 510, 590, 665, 735, 805, 870, 955];
const ACS_TIERS = [
{ lo: 100, hi: 400, name: 'Bench', color: '#E5403E' },
{ lo: 400, hi: 700, name: 'Rookie', color: '#F08A3C' },
{ lo: 700, hi: 800, name: 'Pro', color: '#10B981' },
{ lo: 800, hi: 1000, name: 'Expert', color: '#D6AF4B' }
];
const ACS_TAGLINE = {
Bench: "No shame — but the tape is calling.",
Rookie: "Real fans go deeper. We'll get you there.",
Pro: "You see the game. Real fan energy.",
Expert: "You watch the tape. SportsCred was built for you."
};
const buildShareUrl = ({ acs, tier, sport }) => {
const url = new URL(window.location.href);
url.search = '';
url.hash = 'game';
url.searchParams.set('acs', acs);
url.searchParams.set('tier', tier.name.toLowerCase());
url.searchParams.set('sport', sport.toLowerCase());
return url.toString();
};
const createScoreCardFile = ({ acs, tier, sport, score, quizTotal, accent }) => {
const canvas = document.createElement('canvas');
const w = 1200;
const h = 630;
canvas.width = w;
canvas.height = h;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#080808';
ctx.fillRect(0, 0, w, h);
const grad = ctx.createLinearGradient(0, 0, w, h);
grad.addColorStop(0, 'rgba(229,64,62,0.22)');
grad.addColorStop(0.52, 'rgba(201,162,75,0.18)');
grad.addColorStop(1, 'rgba(25,209,122,0.16)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = 'rgba(255,255,255,0.1)';
ctx.lineWidth = 2;
ctx.strokeRect(44, 44, w - 88, h - 88);
const bar = ctx.createLinearGradient(80, 98, w - 80, 98);
bar.addColorStop(0, '#E5403E');
bar.addColorStop(0.5, '#E8C547');
bar.addColorStop(1, '#19D17A');
ctx.fillStyle = bar;
ctx.fillRect(80, 94, w - 160, 6);
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = '#FFFFFF';
ctx.font = '700 48px Impact, Anton, Arial Black, sans-serif';
ctx.letterSpacing = '4px';
ctx.fillText('SPORTSCRED', w / 2, 148);
ctx.fillStyle = accent;
ctx.font = '700 170px Impact, Anton, Arial Black, sans-serif';
ctx.fillText(String(acs), w / 2 - 50, 292);
ctx.fillStyle = 'rgba(255,255,255,0.38)';
ctx.font = '700 70px Impact, Anton, Arial Black, sans-serif';
ctx.fillText('/ 1000', w / 2 + 205, 320);
ctx.strokeStyle = accent;
ctx.lineWidth = 3;
ctx.strokeRect(w / 2 - 150, 386, 300, 78);
ctx.fillStyle = '#FFFFFF';
ctx.font = '700 58px Impact, Anton, Arial Black, sans-serif';
ctx.fillText(tier.name.toUpperCase(), w / 2, 427);
ctx.fillStyle = 'rgba(255,255,255,0.72)';
ctx.font = '500 28px Inter, Arial, sans-serif';
ctx.fillText(`${score} / ${quizTotal} correct · ${sport}`, w / 2, 505);
ctx.fillStyle = 'rgba(255,255,255,0.48)';
ctx.font = '500 24px JetBrains Mono, Menlo, monospace';
ctx.fillText('Take the test at SportsCred', w / 2, 560);
return new Promise((resolve) => {
canvas.toBlob((blob) => {
if (!blob) return resolve(null);
resolve(new File([blob], 'sportscred-score.png', { type: 'image/png' }));
}, 'image/png', 0.95);
});
};
const ResultsView = ({ accent, score, quizTotal = QUIZ_LENGTH, totalAnswered, sport, onReset, email }) => {
const acs = ACS_BY_CORRECT[Math.max(0, Math.min(10, score))];
const [waitlistStatus, setWaitlistStatus] = React.useState(() => window.getSportsCredWaitlistEmail?.() ? 'saved' : 'idle');
const activeIdx = (() => {
const i = ACS_TIERS.findIndex(t => acs < t.hi);
return i === -1 ? ACS_TIERS.length - 1 : i;
})();
const tier = ACS_TIERS[activeIdx];
const resultAccent = tier.color || accent;
React.useEffect(() => {
window.saveWaitlistLead?.({
email,
source: 'quiz_result',
sport,
acsScore: acs,
tier: tier.name,
quizScore: score,
quizTotal
});
}, [email, sport, acs, tier.name, score, quizTotal]);
React.useEffect(() => {
const handleJoined = () => setWaitlistStatus('saved');
window.addEventListener('sportscred:waitlist-joined', handleJoined);
return () => window.removeEventListener('sportscred:waitlist-joined', handleJoined);
}, []);
const handleJoinWaitlist = async () => {
if (waitlistStatus === 'saving' || waitlistStatus === 'saved') return;
setWaitlistStatus('saving');
const result = await window.saveWaitlistLead?.({
email,
source: 'waitlist_form',
sport,
acsScore: acs,
tier: tier.name,
quizScore: score,
quizTotal
});
setWaitlistStatus(result?.ok === true ? 'saved' : 'error');
};
const handleShare = async () => {
const shareUrl = buildShareUrl({ acs, tier, sport });
const text = `My SportsCred ACS: ${acs} / 1000 (${tier.name}) — ${sport}. Take the test:`;
const title = `SportsCred ACS: ${acs} / 1000`;
const card = await createScoreCardFile({ acs, tier, sport, score, quizTotal, accent: resultAccent });
try {
if (card && navigator.canShare?.({ files: [card] })) {
await navigator.share({ title, text, url: shareUrl, files: [card] });
window.saveWaitlistLead?.({ email, source: 'score_share', sport, acsScore: acs, tier: tier.name, quizScore: score, quizTotal });
return;
}
if (navigator.share) {
await navigator.share({ title, text, url: shareUrl });
window.saveWaitlistLead?.({ email, source: 'score_share', sport, acsScore: acs, tier: tier.name, quizScore: score, quizTotal });
return;
}
await navigator.clipboard?.writeText(`${text} ${shareUrl}`);
window.saveWaitlistLead?.({ email, source: 'score_share', sport, acsScore: acs, tier: tier.name, quizScore: score, quizTotal });
} catch (err) {}
};
return (
{/* eyebrow */}
A.C.S. Result · {sport} · {email}
{/* hero number — the star */}
{acs}
/ 1000
{/* tier chip */}
{tier.name}
{/* supporting line */}
{score} / {quizTotal} correct · {sport}{totalAnswered < quizTotal ? ` · time expired (${totalAnswered} answered)` : ''}
{/* tagline */}
{ACS_TAGLINE[tier.name]}
{/* tier ladder */}
{ACS_TIERS.map((t, i) => {
const isActive = i === activeIdx;
return (
);
})}
{/* CTA row */}