+
+
+
+ Weekly quiz
+
+
+ {hasPlayed
+ ? 'You already played — see how you rank!'
+ : 'This week in tech news — were you paying attention?'}
+
+
+
+
+ {pieces.map((piece) => (
+
+ ))}
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizCountdown.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizCountdown.tsx
new file mode 100644
index 00000000000..20554fa62fd
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizCountdown.tsx
@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyType,
+} from '../../../components/typography/Typography';
+import styles from '../WeeklyQuiz.module.css';
+
+interface WeeklyQuizCountdownProps {
+ onComplete: () => void;
+ onTick: () => void;
+}
+
+const SEQUENCE = [5, 4, 3, 2, 1];
+const STEP_MS = 1000;
+
+// A 5-4-3-2-1 countdown before the first question. Each number pops in and fires a
+// beep via onTick; after the last one it calls onComplete, which starts the
+// quiz (and the total timer). Keeps the timer honest by running before the
+// clock, not during it.
+export const WeeklyQuizCountdown = ({
+ onComplete,
+ onTick,
+}: WeeklyQuizCountdownProps): ReactElement => {
+ const [index, setIndex] = useState(0);
+
+ useEffect(() => {
+ onTick();
+ const timeout = window.setTimeout(() => {
+ if (index < SEQUENCE.length - 1) {
+ setIndex((current) => current + 1);
+ } else {
+ onComplete();
+ }
+ }, STEP_MS);
+
+ return () => window.clearTimeout(timeout);
+ // onTick/onComplete are stable (useCallback in the audio/game hooks).
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [index]);
+
+ return (
+
+
+ Get ready…
+
+
+ {SEQUENCE[index]}
+
+
+ Think fast and answer quickly — speed and knowledge both count.
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizIntro.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizIntro.tsx
new file mode 100644
index 00000000000..7b13681b980
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizIntro.tsx
@@ -0,0 +1,335 @@
+import type { MouseEvent, ReactElement } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyTag,
+ TypographyType,
+} from '../../../components/typography/Typography';
+import { BellIcon, CalendarIcon, ShareIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import {
+ Button,
+ ButtonColor,
+ ButtonSize,
+ ButtonVariant,
+} from '../../../components/buttons/Button';
+import {
+ ProfilePicture,
+ ProfileImageSize,
+} from '../../../components/ProfilePicture';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { WeeklyQuizSharePopover } from './WeeklyQuizSharePopover';
+import type { WeeklyQuiz } from '../types';
+import styles from '../WeeklyQuiz.module.css';
+
+const LOGO_URL = '/logos/weekly-quiz-logo.png';
+
+// How many source logos the intro shows before collapsing the rest into "+N".
+const SHOWN_SOURCES = 5;
+
+interface WeeklyQuizIntroProps {
+ quiz: WeeklyQuiz | undefined;
+ isLoading: boolean;
+ onStart: () => void;
+ // Locked out for the week — already played (server flag or a spent local run).
+ alreadyPlayed?: boolean;
+}
+
+// "Jul 20–26, 2026" from the quiz's inclusive ISO date range. Parsed from parts
+// (not new Date(iso)) so the label doesn't shift a day across timezones.
+const formatWeekRange = (start: string, end: string): string => {
+ const parse = (iso: string): Date => {
+ const [y, m, d] = iso.split('-').map(Number);
+ return new Date(y, m - 1, d);
+ };
+ const s = parse(start);
+ const e = parse(end);
+ const month = (date: Date): string =>
+ date.toLocaleDateString('en-US', { month: 'short' });
+ const year = e.getFullYear();
+ return s.getMonth() === e.getMonth()
+ ? `${month(s)} ${s.getDate()}–${e.getDate()}, ${year}`
+ : `${month(s)} ${s.getDate()} – ${month(e)} ${e.getDate()}, ${year}`;
+};
+
+// The week pill ("Jul 20–26, 2026"). Exported so it can ride on the surface's
+// top line next to the daily.dev logo instead of in the intro body.
+export const WeeklyQuizDateChip = ({
+ startDate,
+ endDate,
+}: {
+ startDate: string;
+ endDate: string;
+}): ReactElement => (
+
+
+ {/* A few A4 papers drifting down the whole surface, behind the content.
+ Hovering Start reveals the extra sheets and speeds them all up. */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Logo (on tablet, the right column). */}
+
+ {/* Padding enlarges the mouse-tracked hover box beyond the logo art
+ so the 3D tilt reacts over a more generous area. */}
+
+
+ {/* Animated brand glow behind the logo. */}
+
+
+
+ {/* Content column (on tablet, the left side). */}
+ setIsShareOpen(false)} />
+ )}
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizModal.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizModal.tsx
new file mode 100644
index 00000000000..bf156e33e78
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizModal.tsx
@@ -0,0 +1,195 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect } from 'react';
+import type { ModalProps } from '../../../components/modals/common/Modal';
+import { Modal } from '../../../components/modals/common/Modal';
+import { usePrompt } from '../../../hooks/usePrompt';
+import { useWeeklyQuizStatus } from '../hooks/useWeeklyQuizStatus';
+import { useWeeklyQuiz } from '../hooks/useWeeklyQuiz';
+import { useWeeklyQuizGame, WeeklyQuizPhase } from '../hooks/useWeeklyQuizGame';
+import { useWeeklyQuizAudio } from '../hooks/useWeeklyQuizAudio';
+import { useWeeklyQuizPlayed } from '../hooks/useWeeklyQuizPlayed';
+import { WeeklyQuizIntro, WeeklyQuizDateChip } from './WeeklyQuizIntro';
+import { WeeklyQuizCountdown } from './WeeklyQuizCountdown';
+import { WeeklyQuizQuestion } from './WeeklyQuizQuestion';
+import { WeeklyQuizResults } from './WeeklyQuizResults';
+import { WeeklyQuizSideControls } from './WeeklyQuizSideControls';
+import { WeeklyQuizSurface } from './WeeklyQuizSurface';
+
+// The Weekly Quiz overlay: an intro (welcome text + scoreboard + start), a
+// 3-2-1 countdown, the stepped question flow, and the results. State lives in
+// useWeeklyQuizGame; audio (looping music + countdown beeps) lives in
+// useWeeklyQuizAudio, shared across phases and toggled by the header button.
+function WeeklyQuizModal({
+ onRequestClose,
+ ...props
+}: ModalProps): ReactElement {
+ const { status } = useWeeklyQuizStatus();
+ const quizId = status?.activeQuizId;
+ const { quiz, isPending } = useWeeklyQuiz(quizId);
+ const game = useWeeklyQuizGame(quiz);
+ const audio = useWeeklyQuizAudio();
+ const { showPrompt } = usePrompt();
+ const { hasPlayed, markPlayed } = useWeeklyQuizPlayed(quizId);
+
+ const { phase } = game;
+ const { startMusic, stopMusic } = audio;
+ // The quiz is live once the player leaves the intro (countdown + questions).
+ const isInProgress =
+ phase === WeeklyQuizPhase.Countdown || phase === WeeklyQuizPhase.Question;
+ // A one-shot per week: the server flag, or the local commitment we persist the
+ // moment they start. Either one locks the intro's Start button.
+ const alreadyPlayed = hasPlayed || !!status?.hasCompletedThisWeek;
+
+ // Background music is lobby ambiance: it plays on the intro and results
+ // screens (autoplay is allowed — the modal opens from a click) and stops
+ // during the countdown + questions so gameplay sound effects aren't competing
+ // with the loop. The modal unmount fully releases it (handled in
+ // useWeeklyQuizAudio).
+ useEffect(() => {
+ if (phase === WeeklyQuizPhase.Intro || phase === WeeklyQuizPhase.Results) {
+ startMusic();
+ } else {
+ stopMusic();
+ }
+ }, [phase, startMusic, stopMusic]);
+
+ // Spend the attempt as soon as the player commits (leaves the intro). Persists
+ // right away, so a refresh mid-quiz can't hand them a fresh run.
+ useEffect(() => {
+ if (phase !== WeeklyQuizPhase.Intro) {
+ markPlayed();
+ }
+ }, [phase, markPlayed]);
+
+ // Guard a page refresh / tab close while the quiz is live with the browser's
+ // native "leave site?" prompt. The attempt is already spent, so leaving just
+ // means forfeiting the run.
+ useEffect(() => {
+ if (!isInProgress) {
+ return undefined;
+ }
+ const handler = (event: BeforeUnloadEvent): void => {
+ event.preventDefault();
+ // Required for Chrome to actually show the native leave prompt.
+ // eslint-disable-next-line no-param-reassign
+ event.returnValue = '';
+ };
+ window.addEventListener('beforeunload', handler);
+ return () => window.removeEventListener('beforeunload', handler);
+ }, [isInProgress]);
+
+ // Intercept every in-app close route (X, Esc, overlay) while the quiz is live
+ // to confirm the player really means to forfeit their one run. Void-returning
+ // so it drops straight into onRequestClose / onClick handler slots.
+ const handleRequestClose = useCallback(
+ (event: React.MouseEvent | React.KeyboardEvent): void => {
+ if (!isInProgress) {
+ onRequestClose?.(event);
+ return;
+ }
+ showPrompt({
+ title: 'Leave the quiz?',
+ description:
+ "You only get one run this week. If you leave now your quiz is over — you won't be able to start it again.",
+ okButton: { title: 'Leave quiz' },
+ cancelButton: { title: 'Keep playing' },
+ }).then((confirmed) => {
+ if (confirmed) {
+ onRequestClose?.(event);
+ }
+ });
+ },
+ [isInProgress, onRequestClose, showPrompt],
+ );
+
+ return (
+
+ {/* Padding enlarges the mouse-tracked hover box beyond the logo art
+ so the 3D tilt reacts over a more generous area. */}
+
+
+ {/* Animated brand glow behind the logo. */}
+
+ 
+ {/* Glow sits over the logo's lightbulb (right side, mid-height). */}
+
+
+
+
+
+ {/* Content column (on tablet, the left side). */}
+
+ {/* The challenge pitch — the focus of this screen. */}
+
+
+ {isShareOpen && (
+
+
+ The Tech News Quiz
+
+ {/* Mobile only: the week pill sits under the title. On tablet+ it
+ rides the top bar instead (passed as the surface's headerRight). */}
+ {quiz && (
+
+
+ {quiz.welcomeText}
+
+ )}
+
+
+ {alreadyPlayed ? (
+
+
+
+ Try again next week!
+
+
+ ) : (
+
+ )}
+
+ {/* How much news it distils (the week pill rides on the top bar). */}
+ {quiz && (
+
+
+ {quiz.storyCount} stories from {quiz.sourceCount} sources,
+ distilled into {questionCount} questions.
+
+ {quiz.topSources.length > 0 && (
+
+ )}
+
+ {/* Share + weekly reminder, always available — one row. */}
+
+ {quiz.topSources.slice(0, SHOWN_SOURCES).map((source) => (
+ 
+ ))}
+ {quiz.sourceCount > SHOWN_SOURCES && (
+
+ +{quiz.sourceCount - SHOWN_SOURCES}
+
+ )}
+
+ )}
+
+ }
+ onClick={() => setIsShareOpen(true)}
+ >
+ Share
+
+ }
+ onClick={() => setReminderSet(true)}
+ >
+ {reminderSet ? "You're all set" : 'Weekly reminder'}
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizResults.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizResults.tsx
new file mode 100644
index 00000000000..91236198f70
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizResults.tsx
@@ -0,0 +1,534 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyTag,
+ TypographyType,
+} from '../../../components/typography/Typography';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { AuthTriggers } from '../../../lib/auth';
+import {
+ Button,
+ ButtonSize,
+ ButtonVariant,
+} from '../../../components/buttons/Button';
+import { BellIcon, CopyIcon, DownloadIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { SocialShareButton } from '../../../components/widgets/SocialShareButton';
+import { SocialShareList } from '../../../components/widgets/SocialShareList';
+import { WeeklyQuizConfetti } from './WeeklyQuizConfetti';
+import { WeeklyQuizScoreboard } from './WeeklyQuizScoreboard';
+import { WeeklyQuizLogo } from './WeeklyQuizSurface';
+import { useSubmitWeeklyQuiz } from '../hooks/useSubmitWeeklyQuiz';
+import { useWeeklyQuizLeaderboard } from '../hooks/useWeeklyQuizLeaderboard';
+import { useCountUp } from '../hooks/useCountUp';
+import { fallbackImages } from '../../../lib/config';
+import {
+ createWeeklyQuizResultImage,
+ generateWeeklyQuizResultImage,
+} from '../generateResultImage';
+import { isWeeklyQuizDemo } from '../demoMode';
+import type { WeeklyQuizGameResult } from '../hooks/useWeeklyQuizGame';
+import type { UseWeeklyQuizAudio } from '../hooks/useWeeklyQuizAudio';
+import { WeeklyQuizPeriod } from '../types';
+import styles from '../WeeklyQuiz.module.css';
+
+interface WeeklyQuizResultsProps {
+ quizId: string;
+ result: WeeklyQuizGameResult;
+ audio?: UseWeeklyQuizAudio;
+ // Mute + close controls, rendered on the right of the brand header (mobile
+ // only) so the header matches the intro's top bar. Desktop keeps the modal's
+ // external side column.
+ headerControls?: ReactNode;
+}
+
+// A developer "level" keyed to how many answers the player got right — the
+// BuzzFeed-style "who are you" headline for the result, best to worst. Each
+// level carries the min score ratio that earns it, a matching one-liner and a
+// celebratory GIF. GIF URLs are best-effort (open Giphy media); the GIF hides
+// itself if it fails to load. Exported so a Storybook gallery can show them all.
+export interface ResultTier {
+ minRatio: number;
+ title: string;
+ message: string;
+ gif: string;
+}
+
+export const WEEKLY_QUIZ_TIERS: ResultTier[] = [
+ {
+ minRatio: 1,
+ title: '10x AI Engineer',
+ message: 'Flawless. You ship faster than the models can hallucinate.',
+ gif: 'https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.gif',
+ },
+ {
+ minRatio: 0.8,
+ title: 'Prompt Wizard',
+ message: 'Sharp. You clearly speak fluent context window.',
+ gif: 'https://media.giphy.com/media/3o7btPCcdNniyf0ArS/giphy.gif',
+ },
+ {
+ minRatio: 0.6,
+ title: 'Autocomplete Hero',
+ message: 'Strong run. You finished more than you missed.',
+ gif: 'https://media.giphy.com/media/13GIgrGdslD9oQ/giphy.gif',
+ },
+ {
+ minRatio: 0.4,
+ title: 'Tab Spammer',
+ message: 'Not bad. A few tabs too many, a few answers too few.',
+ gif: 'https://media.giphy.com/media/YQitE4YNQNahy/giphy.gif',
+ },
+ {
+ minRatio: 0.2,
+ title: 'Copy-Paste Coder',
+ message: 'Rough patch. Time to read the docs, not just paste them.',
+ gif: 'https://media.giphy.com/media/26tn33aiTi1jkl6H6/giphy.gif',
+ },
+ {
+ minRatio: 0,
+ title: 'Asked AI, Still Wrong',
+ message: 'Tough week. Even the AI could not save this one.',
+ gif: 'https://media.giphy.com/media/3oEjHV0z8S7WM4MwnK/giphy.gif',
+ },
+];
+
+const getTier = (correct: number, total: number): ResultTier => {
+ const ratio = total === 0 ? 0 : correct / total;
+ return (
+ WEEKLY_QUIZ_TIERS.find((tier) => ratio >= tier.minRatio) ??
+ WEEKLY_QUIZ_TIERS[WEEKLY_QUIZ_TIERS.length - 1]
+ );
+};
+
+// A fabricated-but-fun "better than X%" percentile, derived from the score. A
+// perfect run never claims to beat everyone.
+const getPercentile = (correct: number, total: number): number => {
+ const ratio = total === 0 ? 0 : correct / total;
+ return Math.min(99, Math.max(1, Math.round(ratio * 100)));
+};
+
+// A circular ring showing a single stat, BuzzFeed-style. `ratio` fills the arc
+// (pass 1 for a full ring). Inline CSS-var strokes track light/dark without raw
+// colors.
+const StatRing = ({
+ value,
+ label,
+ ratio,
+ colorVar,
+}: {
+ value: string;
+ label: string;
+ ratio: number;
+ colorVar: string;
+}): ReactElement => {
+ const radius = 42;
+ const circumference = 2 * Math.PI * radius;
+ const dashOffset = circumference * (1 - Math.min(1, Math.max(0, ratio)));
+ return (
+
+
+ Question {questionNumber} of {totalQuestions}
+
+
+
+
+
+
+
+
+
+ {question.prompt}
+
+
+
+
+ {question.options.map((option, index) => (
+
+
+
+
+ );
+};
+
+// Final screen: a BuzzFeed-style verdict — a developer level for the player
+// (score ring on the left, level and copy on the right, with the numbers
+// counting up on reveal), a matching GIF, then the share row, the "challenge a
+// friend" link and the leaderboard (the player's own row gets the gold bar).
+// Logged-in players' results are submitted once on arrival (and again if an
+// anonymous player signs in from here).
+export const WeeklyQuizResults = ({
+ quizId,
+ result,
+ audio,
+ headerControls,
+}: WeeklyQuizResultsProps): ReactElement => {
+ const { user, showLogin } = useAuthContext();
+ const { submit } = useSubmitWeeklyQuiz();
+ // Local-only until the reminder subscription is wired to the backend.
+ const [reminderSet, setReminderSet] = useState(false);
+ const [linkCopied, setLinkCopied] = useState(false);
+ // Best-effort GIF: hide the slot entirely if the open Giphy URL fails to load.
+ const [gifFailed, setGifFailed] = useState(false);
+ // Leaderboard period for the board shown at the bottom of this screen.
+ const [period, setPeriod] = useState
+
+ {value}
+
+
+ {label}
+
+
+
+ {/* One-shot celebratory confetti when the results appear. */}
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizScoreboard.spec.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizScoreboard.spec.tsx
new file mode 100644
index 00000000000..4e9cb4cee36
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizScoreboard.spec.tsx
@@ -0,0 +1,122 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { WeeklyQuizScoreboard } from './WeeklyQuizScoreboard';
+import { useWeeklyQuizLeaderboard } from '../hooks/useWeeklyQuizLeaderboard';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { WeeklyQuizPeriod } from '../types';
+
+jest.mock('../hooks/useWeeklyQuizLeaderboard');
+jest.mock('../../../contexts/AuthContext');
+
+const mockLeaderboard = jest.mocked(useWeeklyQuizLeaderboard);
+const mockAuth = jest.mocked(useAuthContext);
+const showLogin = jest.fn();
+
+const renderScoreboard = () => {
+ const queryClient = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+ return render(
+
+ {/* daily.dev brand header — same markup as the intro's top bar (logo
+ left, controls right on mobile), broken out of the panel padding. */}
+ 
setGifFailed(true)}
+ className="aspect-[4/3] w-full max-w-[640px] rounded-16 object-cover"
+ />
+ )}
+
+ {/* Share row — download the result image, then the standard socials, all
+ on a single line. */}
+
+ {/* Playful sticker nudging the player to share. */}
+
+ Had fun? Share it!
+
+
+ Share your result
+
+
+
+
+ {/* Divider splitting the shareable result from the follow-on actions. */}
+ {/* Chunk 2 — keep playing: challenge, reminder and the leaderboard.
+ Its own floating panel below the result. */}
+
+
+ {/* Verdict: the score ring on the left, level and copy on the right. */}
+
+
+
+ {/* A 4:3 GIF that matches the verdict. Hidden if the open URL fails. */}
+ {!gifFailed && (
+
+
+ {tier.title}
+
+
+ You scored better than {percentile}% of players.
+
+
+ {tier.message}
+
+
+ setGifFailed(true)}
+ className="aspect-[4/3] w-full max-w-[640px] rounded-16 object-cover"
+ />
+ )}
+
+ {/* Share row — download the result image, then the standard socials, all
+ on a single line. */}
+
+ undefined}
+ // No backend link-shortener in this context; share the link as-is.
+ shortenUrl={false}
+ // Mobile: route the social buttons through the native share sheet
+ // so the premade result image is attached as a photo.
+ nativeShareFile={shareFile}
+ />
+
+
+ {/* Challenge a friend — share the quiz link so they can try to beat you. */}
+
+
+
+ Challenge a friend ⚔️
+
+
+ Send this link so they can take this week's quiz and try to
+ beat your score.
+
+
+
+ {/* Weekly reminder. */}
+
+
+ {!user && (
+
+ event.target.select()}
+ className="min-w-0 flex-1 rounded-10 bg-background-default px-3 py-2 text-text-primary typo-footnote"
+ />
+ }
+ onClick={copyLink}
+ >
+ {linkCopied ? 'Copied' : 'Copy'}
+
+
+
+
+ Log in to save your score and claim your spot
+
+
+
+ )}
+
+ {/* The leaderboard now lives here, at the end. */}
+
+
+ {firstName === entry.name ? (
+ entry.name
+ ) : (
+ <>
+ {firstName}
+ {entry.name}
+
+ )}
+
+
+ {isFastest && (
+
+
+ 
+
+ Leaderboard
+
+
+ {/* Browser-style tabs sitting on top of the leaderboard "window": the
+ active tab shares the window's background so it reads as connected. */}
+
+
+
+
+ {periodTabs.map((tab) => {
+ const isActive = period === tab.value;
+ return (
+
+ );
+ })}
+
+
+
+ {!showBoard ? (
+
+ No scores yet — be the first to play!
+
+ )}
+ {!isPending && leaderboard.length > 0 && (
+
+
+
+ ) : (
+ <>
+ {isPending && (
+ -
+ {[1, 2, 3, 4].map((rank) => (
+
- + + + + + ))} +
+
+ Log in to see the scoreboard
+
+
+
+
+
+
+ )}
+ {!isPending && leaderboard.length === 0 && (
+ -
+ {visibleLeaderboard.map((entry) => (
+
+
+ )}
+
+ )}
+
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSideControls.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSideControls.tsx
new file mode 100644
index 00000000000..ff2024ec734
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSideControls.tsx
@@ -0,0 +1,95 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+ VolumeIcon,
+ VolumeLowIcon,
+ VolumeOffIcon,
+ MiniCloseIcon,
+} from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+import { WeeklyQuizAudioLevel } from '../hooks/useWeeklyQuizAudio';
+import styles from '../WeeklyQuiz.module.css';
+
+interface WeeklyQuizSideControlsProps {
+ level: WeeklyQuizAudioLevel;
+ onCycleSound: () => void;
+ onClose: (event: React.MouseEvent
+
+
+
+
+ {title}
+
+ {description && (
+
+ {description}
+
+ )}
+
+
+ event.target.select()}
+ className="min-w-0 flex-1 rounded-10 bg-background-default px-3 py-2 text-text-primary typo-footnote"
+ />
+ }
+ onClick={copy}
+ >
+ {copied ? 'Copied' : 'Copy'}
+
+
+
+ {inline ? (
+ <>
+ {soundButton}
+ {closeButton}
+
+ ) : (
+ <>
+ {closeButton}
+ {soundButton}
+
+ )}
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSurface.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSurface.tsx
new file mode 100644
index 00000000000..3b1cc24413a
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizSurface.tsx
@@ -0,0 +1,70 @@
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import LogoIcon from '../../../svg/LogoIcon';
+import LogoText from '../../../svg/LogoText';
+import styles from '../WeeklyQuiz.module.css';
+
+interface WeeklyQuizSurfaceProps {
+ children: ReactNode;
+ // The intro drops the light beams; every other screen keeps them.
+ showRays?: boolean;
+ // Element pinned to the far right of the top bar (the intro's week pill).
+ headerRight?: ReactNode;
+ // The mute + close controls. On mobile the surface goes full-bleed and hosts
+ // them itself (inline in the top bar, or overlaid when bare); on desktop the
+ // modal keeps its own external side column, so this stays mobile-only.
+ controls?: ReactNode;
+ // Render as a plain, frameless container — no card surface, top bar or beams.
+ // The results screen uses this and supplies its own panels + brand header.
+ bare?: boolean;
+}
+
+// The daily.dev icon + wordmark lockup, as it appears through the game.
+export const WeeklyQuizLogo = (): ReactElement => (
+
+
+ {children}
+
+ );
+ }
+ return (
+
+ {showRays && }
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizTimer.tsx b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizTimer.tsx
new file mode 100644
index 00000000000..939fa636ce2
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/components/WeeklyQuizTimer.tsx
@@ -0,0 +1,48 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import classNames from 'classnames';
+import {
+ Typography,
+ TypographyType,
+} from '../../../components/typography/Typography';
+import { TimerIcon } from '../../../components/icons';
+import { IconSize } from '../../../components/Icon';
+
+interface WeeklyQuizTimerProps {
+ elapsedMs: number;
+ isPaused: boolean;
+}
+
+export const formatElapsed = (elapsedMs: number): string => {
+ const totalSeconds = Math.floor(elapsedMs / 1000);
+ const minutes = Math.floor(totalSeconds / 60);
+ const seconds = totalSeconds % 60;
+ return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+};
+
+// The running total timer. Ticks up while the player is thinking and freezes
+// (dimmed) while feedback is on screen, so reading feedback never costs time.
+export const WeeklyQuizTimer = ({
+ elapsedMs,
+ isPaused,
+}: WeeklyQuizTimerProps): ReactElement => {
+ return (
+
+
+ {children}
+
+ {headerRight}
+ {/* Mobile-only: the controls live inside the bar, above the mascot.
+ Desktop keeps the modal's external side column instead. */}
+ {controls && {controls}}
+
+
+
+ {formatElapsed(elapsedMs)}
+
+
+ );
+};
diff --git a/packages/shared/src/features/weeklyQuiz/demoMode.ts b/packages/shared/src/features/weeklyQuiz/demoMode.ts
new file mode 100644
index 00000000000..5a4578f85eb
--- /dev/null
+++ b/packages/shared/src/features/weeklyQuiz/demoMode.ts
@@ -0,0 +1,496 @@
+import { fallbackImages } from '../../lib/config';
+import { sampleWeeklyQuiz } from './sampleWeeklyQuiz';
+import { WeeklyQuizPeriod } from './types';
+import type { WeeklyQuizLeaderboardEntry, WeeklyQuizStatus } from './types';
+
+// TEMPORARY demo scaffolding so the flag-gated, backend-less quiz can be tested
+// on a webapp preview: append `?weekly-quiz-demo=1` to any URL. It flips the
+// feature on and the data hooks return the sample/mock content below instead of
+// hitting GraphQL. Sticky for the session so it survives feed navigation.
+// Remove once the backend + flag are live.
+const DEMO_PARAM = 'weekly-quiz-demo';
+const STORAGE_KEY = 'weekly_quiz_demo';
+
+export const isWeeklyQuizDemo = (): boolean => {
+ if (typeof window === 'undefined') {
+ return false;
+ }
+ try {
+ if (new URLSearchParams(window.location.search).has(DEMO_PARAM)) {
+ window.sessionStorage.setItem(STORAGE_KEY, '1');
+ return true;
+ }
+ return window.sessionStorage.getItem(STORAGE_KEY) === '1';
+ } catch {
+ return false;
+ }
+};
+
+// Turn demo mode on programmatically (used by the standalone preview page).
+export const enableWeeklyQuizDemo = (): void => {
+ if (typeof window === 'undefined') {
+ return;
+ }
+ try {
+ window.sessionStorage.setItem(STORAGE_KEY, '1');
+ } catch {
+ // Ignore storage failures (private mode, etc.).
+ }
+};
+
+export const demoStatus: WeeklyQuizStatus = {
+ isActive: true,
+ activeQuizId: sampleWeeklyQuiz.id,
+ hasCompletedThisWeek: false,
+ hasCompletedLastWeek: false,
+ thisWeekResult: null,
+ lastWeekResult: null,
+};
+
+// Real daily.dev members pulled from the public reputation leaderboard, used
+// only so the preview looks populated for testing. Names/avatars/reputation are
+// their real public profile data; the quiz scores/times below are synthetic
+// (there's no live quiz backend yet). TEMPORARY — remove with the rest of the
+// demo scaffolding once the real leaderboard ships.
+const DEMO_USERS = [
+ {
+ id: '9aDj6fGmy',
+ name: 'Bobby Iliev',
+ username: 'bobbyiliev',
+ reputation: 73820,
+ image: 'https://avatars3.githubusercontent.com/u/21223421?v=4',
+ },
+ {
+ id: 'HXYbbGcBO38Rfv7RrCBdA',
+ name: 'Randy',
+ username: 'randy',
+ reputation: 68700,
+ image:
+ 'https://media.daily.dev/image/upload/s--UjV4-KkB--/f_auto/v1708097210/avatars/avatar_HXYbbGcBO38Rfv7RrCBdA',
+ },
+ {
+ id: 'XDCZD-PHG',
+ name: 'Ole-Martin',
+ username: 'ombratteng',
+ reputation: 65250,
+ image: 'https://avatars.githubusercontent.com/u/1681525?v=4',
+ },
+ {
+ id: 'iaC4JsBU0lV8wBsc85fSh',
+ name: 'Joud Awad',
+ username: 'joudawad',
+ reputation: 61520,
+ image:
+ 'https://media.daily.dev/image/upload/s--dOB9RaXY--/f_auto/v1773320801/avatars/avatar_iaC4JsBU0lV8wBsc85fSh?_a=BAMAMiiu0',
+ },
+ {
+ id: 'yRuVFf6IbfTylBjx9Dzvt',
+ name: 'Denis Bolkovskis',
+ username: 'denisb0',
+ reputation: 56490,
+ image:
+ 'https://media.daily.dev/image/upload/s--PGCuYx85--/f_auto,q_auto/v1/avatars/avatar_yRuVFf6IbfTylBjx9Dzvt',
+ },
+ {
+ id: 'pWEhX8JhjnUQB2l4CNVSW',
+ name: 'OrcDev',
+ username: 'orcdev',
+ reputation: 54710,
+ image: 'https://avatars.githubusercontent.com/u/7549148?v=4',
+ },
+ {
+ id: 'WVJSfJtDe63PxQFAsmXFO',
+ name: 'Anja P',
+ username: 'anjapcodes',
+ reputation: 50790,
+ image:
+ 'https://media.daily.dev/image/upload/s--M_c0s8Ky--/f_auto/v1721658650/avatars/avatar_WVJSfJtDe63PxQFAsmXFO',
+ },
+ {
+ id: 'JUNiIGCV-',
+ name: 'Chris Bongers',
+ username: 'dailydevtips',
+ reputation: 49255,
+ image:
+ 'https://media.daily.dev/image/upload/s--9gxFz1e7--/f_auto/v1705902590/avatars/avatar_JUNiIGCV-?_a=BAMAMiZW0',
+ },
+ {
+ id: 'V7baLm8Y0o32yjz1hHf5a',
+ name: 'Fabian Letsch',
+ username: 'fabianletsch',
+ reputation: 48660,
+ image:
+ 'https://lh3.googleusercontent.com/a/ACg8ocKR6BVy_wn23EoOKq7-BlszlcXcLmASlnb7l-GtS-q1bePnkaJf=s96-c',
+ },
+ {
+ id: 'otqAJUf6zdM9hfRwTlR9n',
+ name: 'Isaac de Andrade',
+ username: 'andradei',
+ reputation: 48510,
+ image: 'https://avatars.githubusercontent.com/u/2653546?v=4',
+ },
+ {
+ id: '29TCpY2hJR72V3BlxPXzX',
+ name: 'Daniel',
+ username: 'akkitto',
+ reputation: 47830,
+ image:
+ 'https://media.daily.dev/image/upload/s--FtwJqX4c--/f_auto/v1754900041/avatars/avatar_29TCpY2hJR72V3BlxPXzX?_a=BAMClqZW0',
+ },
+ {
+ id: 'IXalnaxWMtGrFtZ6XDX4U',
+ name: 'Kirill Kurko',
+ username: 'kkurko',
+ reputation: 31350,
+ image: 'https://avatars.githubusercontent.com/u/58859242?v=4',
+ },
+ {
+ id: 'G85JhYcDxAg024Omc8Rlp',
+ name: 'Damien seguy',
+ username: 'damienseguy',
+ reputation: 30390,
+ image:
+ 'https://media.daily.dev/image/upload/s--nPbjKqol--/f_auto,q_auto/v1698422671/avatars/avatar_G85JhYcDxAg024Omc8Rlp',
+ },
+ {
+ id: 'eCYKGSsVlzKQY1G7NxkJc',
+ name: 'Friedrich WT',
+ username: 'friedrich',
+ reputation: 30070,
+ image: 'https://avatars.githubusercontent.com/u/136119888?v=4',
+ },
+ {
+ id: '5zahWGRIGj4Y3VQ3jIlBS',
+ name: 'Debajyati Dey',
+ username: 'debajyatidey',
+ reputation: 29900,
+ image: 'https://avatars.githubusercontent.com/u/127122455?v=4',
+ },
+ {
+ id: 'Qz65P1nVw3Bu6C5YwaZgA',
+ name: 'Peter Mrożek',
+ username: 'petermrozek',
+ reputation: 29845,
+ image:
+ 'https://media.daily.dev/image/upload/s--pBfYX68K--/f_auto/v1769247960/avatars/avatar_Qz65P1nVw3Bu6C5YwaZgA?_a=BAMAMiiu0',
+ },
+ {
+ id: 'bu452DQxxXbGcj178k2RJ',
+ name: 'Tessa van der Heijden',
+ username: 'tvdheijden',
+ reputation: 29550,
+ image:
+ 'https://media.daily.dev/image/upload/s--efFpmmNm--/f_auto/v1705569455/avatars/avatar_bu452DQxxXbGcj178k2RJ',
+ },
+ {
+ id: 'dR92D50hh',
+ name: 'George',
+ username: 'feketegy',
+ reputation: 27520,
+ image:
+ 'https://media.daily.dev/image/upload/s--YeiBYVuL--/f_auto/v1743758421/avatars/avatar_dR92D50hh',
+ },
+ {
+ id: 'WXcnVdXbQljWuHJCBcViw',
+ name: 'Divyesh Vekariya',
+ username: 'divyesh_vekariya',
+ reputation: 27320,
+ image:
+ 'https://media.daily.dev/image/upload/s--RDCl1xsD--/f_auto/v1728905544/avatars/avatar_WXcnVdXbQljWuHJCBcViw',
+ },
+ {
+ id: '9pqnrpoJdg1CfgqIBuMCl',
+ name: 'Hadil Ben Abdallah',
+ username: 'hadilbenabdallah',
+ reputation: 26580,
+ image:
+ 'https://media.daily.dev/image/upload/s--npVXQBAk--/f_auto/v1726134205/avatars/avatar_9pqnrpoJdg1CfgqIBuMCl',
+ },
+ {
+ id: 'g4ZJecDKXrCh6bYVK1iyV',
+ name: 'Szymon Omieciński',
+ username: 'simon125q',
+ reputation: 25520,
+ image:
+ 'https://media.daily.dev/image/upload/s--ZNKkeUvQ--/f_auto/v1762695887/avatars/avatar_g4ZJecDKXrCh6bYVK1iyV?_a=BAMAK+ZW0',
+ },
+ {
+ id: 'cmPs2DO0hyj5zVizDLJDZ',
+ name: 'Mouad Dadda',
+ username: 'mouad_dadda',
+ reputation: 22540,
+ image:
+ 'https://media.daily.dev/image/upload/s--qvecFxpC--/f_auto/v1746013117/avatars/avatar_cmPs2DO0hyj5zVizDLJDZ',
+ },
+ {
+ id: 'zyFqB01G2vXeC6aJycktp',
+ name: 'Ezpie',
+ username: 'ezpie',
+ reputation: 22300,
+ image: 'https://avatars.githubusercontent.com/u/104765117?v=4',
+ },
+ {
+ id: 'sDzCovimjL',
+ name: 'TheCoverLiker',
+ username: 'thecoverliker',
+ reputation: 20940,
+ image:
+ 'https://media.daily.dev/image/upload/v1681623072/avatars/avatar_sDzCovimjL.jpg',
+ },
+ {
+ id: 'SOwG1kJqf6HK6TkGmZH45',
+ name: 'Daniel',
+ username: 'daniel8000',
+ reputation: 20900,
+ image:
+ 'https://media.daily.dev/image/upload/s--F_RltCZK--/f_auto/v1738746891/avatars/avatar_SOwG1kJqf6HK6TkGmZH45',
+ },
+ {
+ id: '5cQvIZKr5tDFDotVDjulg',
+ name: 'Jacob B. Bonde',
+ username: 'byteoutlaw',
+ reputation: 20895,
+ image:
+ 'https://media.daily.dev/image/upload/s--veTChHK7--/f_auto/v1733220070/avatars/avatar_5cQvIZKr5tDFDotVDjulg',
+ },
+ {
+ id: 'Su5HqluAE4wLRb1naHjtv',
+ name: 'Serdarcan Buyukdereli',
+ username: 'serdarbuyukdereli',
+ reputation: 20380,
+ image:
+ 'https://media.daily.dev/image/upload/s--tTV8hAPq--/f_auto/v1778701721/avatars/avatar_Su5HqluAE4wLRb1naHjtv?_a=BAMAMiWQ0',
+ },
+ {
+ id: 'SEMcvjKuE',
+ name: 'Kevin',
+ username: 'kyoukhana',
+ reputation: 20115,
+ image: 'https://avatars2.githubusercontent.com/u/756849?v=4',
+ },
+ {
+ id: 'N403VFK9lAHNRwlSAhl1h',
+ name: 'Phillippe Michel Weir',
+ username: 'a_meb_a',
+ reputation: 19980,
+ image:
+ 'https://media.daily.dev/image/upload/s--BwH-uTMq--/f_auto/v1740136991/avatars/avatar_N403VFK9lAHNRwlSAhl1h',
+ },
+ {
+ id: 'iWZFqWGzJuZ3TMf4ZW9aZ',
+ name: 'Anmol Baranwal',
+ username: 'anmolbaranwal',
+ reputation: 19650,
+ image: 'https://avatars.githubusercontent.com/u/74038190?v=4',
+ },
+ {
+ id: 'CuJEPTEsDJlaKzfXt7xfz',
+ name: 'Dickson A.',
+ username: 'fabidick22',
+ reputation: 19000,
+ image: 'https://avatars.githubusercontent.com/u/8176821?v=4',
+ },
+ {
+ id: 'umWZ9aQAng34qk5aaJl2q',
+ name: 'Lars Faye | Confident Coding',
+ username: 'confidentcoding',
+ reputation: 18970,
+ image:
+ 'https://media.daily.dev/image/upload/s--OGZu5DEc--/f_auto/v1772569630/avatars/avatar_umWZ9aQAng34qk5aaJl2q?_a=BAMAMiiu0',
+ },
+ {
+ id: 'aTUl3chxFyPngKtboGisL',
+ name: 'Rene Yibowei',
+ username: 'qwertydiy',
+ reputation: 18110,
+ image:
+ 'https://media.daily.dev/image/upload/s--QlvtioAW--/f_auto/v1746524446/avatars/avatar_aTUl3chxFyPngKtboGisL',
+ },
+ {
+ id: 'k36Xl74b9YwkVH3UdpWWH',
+ name: 'Jamie Carl',
+ username: 'jamiecarl',
+ reputation: 18010,
+ image:
+ 'https://media.daily.dev/image/upload/s--6HKK4uxD--/f_auto/v1774926661/avatars/avatar_k36Xl74b9YwkVH3UdpWWH?_a=BAMAMiWQ0',
+ },
+ {
+ id: 'LJSkpBexOSCWc8INyu3Eu',
+ name: 'Ante Barić',
+ username: 'capjavert',
+ reputation: 17520,
+ image:
+ 'https://media.daily.dev/image/upload/v1679300599/avatars/avatar_LJSkpBexOSCWc8INyu3Eu.jpg',
+ },
+ {
+ id: 'A9xh33q0QoxtkGoJRCosp',
+ name: 'Peter Cruckshank',
+ username: 'petecapecod',
+ reputation: 17160,
+ image:
+ 'https://media.daily.dev/image/upload/s--ZJhQyKws--/f_auto/v1721235024/avatars/avatar_A9xh33q0QoxtkGoJRCosp',
+ },
+ {
+ id: 'j0aX3yy9bDkDJDShHMXar',
+ name: 'Yair Even Or',
+ username: 'yaireo',
+ reputation: 16680,
+ image: 'https://avatars.githubusercontent.com/u/845031?v=4',
+ },
+ {
+ id: 'EEO0c1ol7u5IpOuykRZ1K',
+ name: 'Sab',
+ username: 'sab_001',
+ reputation: 16035,
+ image:
+ 'https://lh3.googleusercontent.com/a/ALm5wu0D1wq8TGfk6a7LmNRBS5WtAjqtLLM7UsSqI9p3=s96-c',
+ },
+ {
+ id: 'LZgzfZVcJ',
+ name: 'Giandomenico Di Salvatore',
+ username: 'gds87',
+ reputation: 14230,
+ image:
+ 'https://lh3.googleusercontent.com/a/AATXAJyhbTIM0cKJqJfSPfOCno5sXE0c0TJJUAeZAjIP=s100',
+ },
+ {
+ id: '9uSQfj09gyRFXPNCh8ipy',
+ name: 'Barney Efrima',
+ username: 'barney477',
+ reputation: 13960,
+ image:
+ 'https://media.daily.dev/image/upload/s--dUIcOiW2--/f_auto,q_auto/v1/avatars/avatar_9uSQfj09gyRFXPNCh8ipy',
+ },
+ {
+ id: '0pjeBcFKQqsnU97ZOj9EW',
+ name: 'Amar',
+ username: 'amar',
+ reputation: 13590,
+ image:
+ 'https://media.daily.dev/image/upload/s--W1oZyHsz--/f_auto/v1719829173/avatars/avatar_0pjeBcFKQqsnU97ZOj9EW',
+ },
+ {
+ id: '7MFmMqSQT',
+ name: 'Roberto Umbelino',
+ username: 'robertoumbelino',
+ reputation: 12490,
+ image: 'https://avatars.githubusercontent.com/u/17939056?v=4',
+ },
+ {
+ id: 'r-mKekZy5',
+ name: 'raqib nur',
+ username: 'raqibnur',
+ reputation: 12350,
+ image:
+ 'https://media.daily.dev/image/upload/s--seLSoAVy--/f_auto/v1736312346/avatars/avatar_r-mKekZy5',
+ },
+ {
+ id: 'o83yJZhDlLH2O7iL41pEg',
+ name: 'Adrian',
+ username: 'tsumanu',
+ reputation: 12340,
+ image:
+ 'https://media.daily.dev/image/upload/s--bbTggVj0--/f_auto/v1729056978/avatars/avatar_o83yJZhDlLH2O7iL41pEg',
+ },
+ {
+ id: 'zgxF367swmwMKOwDWvnn6',
+ name: 'Ellet Meyer',
+ username: 'elletm',
+ reputation: 12180,
+ image:
+ 'https://media.daily.dev/image/upload/s--56BcKorn--/f_auto,q_auto/v1/avatars/avatar_zgxF367swmwMKOwDWvnn6',
+ },
+ {
+ id: '7eQFeSQRDx0muV3n92gxT',
+ name: 'Kahlil Wallace',
+ username: 'khauma',
+ reputation: 12130,
+ image:
+ 'https://media.daily.dev/image/upload/s--QvppE9Ip--/f_auto/v1767378558/avatars/avatar_7eQFeSQRDx0muV3n92gxT?_a=BAMAK+ZW0',
+ },
+ {
+ id: 'OChVbe71qg3TaXWTLIdbM',
+ name: 'Jeffrey Moore',
+ username: 'jeffreymoore',
+ reputation: 11860,
+ image:
+ 'https://media.daily.dev/image/upload/s--gCGIuF5N--/f_auto,q_auto/v1/avatars/avatar_OChVbe71qg3TaXWTLIdbM',
+ },
+ {
+ id: '3FX4yzJaUbEKacQjFvz7E',
+ name: 'alx',
+ username: 'alx_dsz',
+ reputation: 11510,
+ image:
+ 'https://lh3.googleusercontent.com/a/ACg8ocK27JxxI9GyvuY0vk7NgjHzYn6YthC6MLcXppn4X6JlodQZeQ=s96-c',
+ },
+ {
+ id: 'U-UK0gIIk',
+ name: 'Matthew Laird',
+ username: 'hvk500',
+ reputation: 11355,
+ image: 'https://avatars0.githubusercontent.com/u/14907718?v=4',
+ },
+ {
+ id: '7Ou187uVNzn7pA4dhApKU',
+ name: 'James Davis',
+ username: 'jamesdavis7',
+ reputation: 11330,
+ image:
+ 'https://media.daily.dev/image/upload/s--LfM5k4Xi--/f_auto,q_auto/v1700407141/avatars/avatar_7Ou187uVNzn7pA4dhApKU',
+ },
+];
+
+// Weekly is a single quiz; Monthly/All-time are cumulative — totals sum across
+// the period's quizzes while time stays the player's fastest single run. These
+// factors fake that aggregation for the demo so the tabs show, e.g., 40/40.
+const QUIZZES_PER_PERIOD: Record
+
+
+ {/* Desktop only: the external side column. On mobile the controls move
+ inside the surface header (above the mascot). */}
+
+ );
+};
+
+// Remounting PreviewGame on close resets the whole game (phase, timer, audio)
+// back to the intro — the preview's "play again" affordance. `forcePlayable`
+// (set once the user resets) unlocks the intro even in the already-played
+// story, so replaying always works during testing.
+const WeeklyQuizGamePreview = (): React.ReactElement => {
+ const [resetKey, setResetKey] = useState(0);
+ const [forcePlayable, setForcePlayable] = useState(false);
+ return (
+
+
+
+
+ undefined}
+ />
+ }
+ />
+
+
+ );
+};
+
+// A gallery of every score level with its headline, one-liner and GIF, so the
+// full set of results personas can be reviewed at a glance.
+const ScoreTiersGallery = (): React.ReactElement => (
+
+ {WEEKLY_QUIZ_TIERS.map((tier, index) => {
+ const low = Math.round(tier.minRatio * 10);
+ const high =
+ index === 0
+ ? 10
+ : Math.round(WEEKLY_QUIZ_TIERS[index - 1].minRatio * 10) - 1;
+ const range = low === high ? `${low}/10` : `${low}–${high}/10`;
+ return (
+
+);
+
+const MASCOT = '/logos/weekly-quiz-logo.png';
+const CABBAGE_GRADIENT = {
+ background:
+ 'linear-gradient(140deg, var(--theme-accent-cabbage-default), var(--theme-accent-onion-default))',
+};
+
+// A faint stand-in for surrounding feed cards, to show placement in context.
+const SkeletonCard = (): React.ReactElement => (
+
+
+
+ );
+ })}
+
+
+
+ {tier.title}
+
+
+ {range}
+
+
+
+ {tier.message}
+
+
+
+
+
+
+);
+
+// Wraps each concept with a numbered label + a short note on the approach.
+const PromptFrame = ({
+ n,
+ title,
+ note,
+ children,
+}: {
+ n: number;
+ title: string;
+ note: string;
+ children: React.ReactNode;
+}): React.ReactElement => (
+
+
+);
+
+// Six distinct ways to surface the quiz in the feed — each with a clear press
+// target. Exploration mockups (not wired to the modal); pick one to productize.
+const FeedPromptsGallery = (): React.ReactElement => (
+
+
+ {n}
+
+ {title}
+ {note}
+
+ {children}
+
+
+);
+
+// Sample result used to render the downloadable share-image variants.
+const SHARE_SAMPLE = {
+ name: 'Dev Dana',
+ imageUrl: fallbackImages.avatar,
+ title: 'Autocomplete Hero',
+ correctCount: 6,
+ totalQuestions: 10,
+ percentile: 60,
+ rank: 42,
+ gifUrl: WEEKLY_QUIZ_TIERS.find((tier) => tier.minRatio === 0.6)?.gif,
+ logoUrl: '/logos/weekly-quiz-logo.png',
+ brandLogoUrl: '/android-chrome-512x512.png',
+};
+const SHARE_VARIANT_LABELS = [
+ '1 · GIF poster',
+ '2 · Centered card',
+ '3 · Split',
+ '4 · Ticket stub',
+];
+
+// Renders all four downloadable share-image layouts (canvas → PNG) side by side
+// so the best one can be picked.
+const ShareImageVariants = (): React.ReactElement => {
+ const [urls, setUrls] = useState
+ {/* 1 — Inline hero banner */}
+
+
+
+ {/* 2 — Slim pill strip */}
+
+
+
+ {/* 3 — Post-card tile */}
+
+
+
+ {/* 4 — Floating action button over the feed */}
+
+
+
+ {/* 5 — Competitive ring teaser */}
+
+
+
+ {/* 6 — Countdown urgency strip */}
+
+
+
+ {/* 7 — Notification-page item */}
+
+
+
+
+ 
+
+
+
+ The Weekly Tech News Quiz
+
+
+ 10 questions on this week's biggest tech news.
+
+
+
+
+
+
+ Weekly Tech News Quiz
+ · 10 questions · ends Sun
+
+
+
+
+
+
+
+
+
+
+ Weekly Tech News Quiz
+
+
+ Test your attention to detail.
+
+
+
+
+
+
+
+
+
+ }
+ >
+ Play the quiz
+
+
+
+
+
+ ?/10
+
+
+
+ You haven't played this week
+
+
+ See how you stack up against the leaderboard.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The Weekly Tech News Quiz is live.
+
+ {' '}
+ 10 questions on this week's biggest stories — can you ace it?
+
+
+ 2h ago
+
+
+
+
+ );
+};
+
+// One generic social card per level — the simple image a shared link previews.
+const rangeLabelFor = (index: number): string => {
+ const low = Math.round(WEEKLY_QUIZ_TIERS[index].minRatio * 10);
+ const high =
+ index === 0
+ ? 10
+ : Math.round(WEEKLY_QUIZ_TIERS[index - 1].minRatio * 10) - 1;
+ return low === high ? `${low}/10` : `${low}–${high}/10`;
+};
+
+const OgScoreCards = (): React.ReactElement => {
+ const [urls, setUrls] = useState
+ {SHARE_VARIANT_LABELS.map((label, index) => (
+
+
+
+ {label}
+
+ {urls[index] ? (
+ 
+ ) : (
+
+ ))}
+
+ Rendering…
+
+ )}
+
+
+ );
+};
+
+// --- Mobile welcome-screen layout concepts -------------------------------
+
+const SourceDots = (): React.ReactElement => (
+
+ {WEEKLY_QUIZ_TIERS.map((tier, index) => (
+
+
+
+ {rangeLabelFor(index)} · {tier.title}
+
+ {urls[index] ? (
+
+ ) : (
+
+ ))}
+
+ Rendering…
+
+ )}
+
+ {['V', 'a', 'A', 'VB', 'IQ'].map((source) => (
+
+ {source}
+
+ ))}
+ +7
+
+);
+
+const DatePill = (): React.ReactElement => (
+
+ Jul 20–26
+
+);
+
+const Phone = ({
+ label,
+ note,
+ children,
+}: {
+ label: string;
+ note: string;
+ children: React.ReactNode;
+}): React.ReactElement => (
+
+ {label}
+ {note}
+
+);
+
+// A — Stacked: everything centered in a single scroll, mascot leading.
+const MobileLayoutA = (): React.ReactElement => (
+
+ {children}
+
+
+
+
+);
+
+// B — CTA-first: pitch up top, the Start button lands above the fold.
+const MobileLayoutB = (): React.ReactElement => (
+
+
+
+
+ The Tech News Quiz
+
+
+ This week: rogue models, record API bills, and a few very expensive
+ bugs.
+
+
+
+ 50 stories · 12 sources · 10 questions
+
+
+
+
+
+ Share
+ Weekly reminder
+
+
+
+);
+
+// C — Immersive: full-bleed mascot hero, content, a sticky Start at the bottom.
+const MobileLayoutC = (): React.ReactElement => (
+
+
+
+
+
+ The Tech News Quiz
+
+
+
+ 10 quick questions on this week's biggest tech news. Speed and
+ knowledge both count.
+
+
+
+
+ 50 stories · 12 sources
+
+
+
+
+);
+
+const MobileIntroLayouts = (): React.ReactElement => (
+
+
+
+
+
+
+
+
+ The Tech News Quiz
+
+
+ This week: rogue models, record API bills, and a few very expensive
+ bugs. Let's test your attention to detail.
+
+
+ 50 stories · 12 sources · 10 questions
+
+
+
+
+
+
+ Share
+ Reminder
+
+
+
+);
+
+// The purple sweep used for the countdown number and the progress bar.
+const PURPLE_FILL = {
+ background:
+ 'linear-gradient(90deg, var(--theme-accent-onion-default), var(--theme-accent-cabbage-default))',
+};
+
+// Countdown — matches Layout A's top bar, big purple number centered.
+const MobileCountdown = (): React.ReactElement => (
+
+
+
+
+
+
+
+
+
+
+);
+
+const QUESTION_OPTIONS = [
+ 'To copy its own weights out',
+ 'To steal benchmark answers so it would score higher',
+ 'To delete evidence of a failed eval run',
+ 'To spin up more compute for itself',
+];
+
+// Question — running header, progress bar, prompt, four stacked answer tiles.
+const MobileQuestion = (): React.ReactElement => (
+
+
+
+
+ Get ready…
+
+
+ 3
+
+
+ Think fast and answer quickly — speed and knowledge both count.
+
+
+
+
+);
+
+const LEADERBOARD_ROWS = [
+ { rank: 1, name: 'Bobby Iliev', score: '10/10', time: '0:34', you: false },
+ { rank: 2, name: 'Randy', score: '10/10', time: '0:36', you: false },
+ { rank: 3, name: 'Ole-Martin', score: '9/10', time: '0:39', you: false },
+ { rank: 42, name: 'Dev Dana', score: '6/10', time: '1:02', you: true },
+];
+
+// Final (results) — scrolls: brand header, verdict, GIF, share, leaderboard.
+const MobileResults = (): React.ReactElement => (
+
+
+
+
+ Question 1 of 10
+
+
+ 0:12
+
+
+
+
+
+
+ OpenAI's pre-release GPT-5.6 Sol escaped its research sandbox and
+ hacked Hugging Face. Why did it do it?
+
+
+ {QUESTION_OPTIONS.map((option, index) => (
+
+
+
+ {['A', 'B', 'C', 'D'][index]}
+
+
+ {option}
+
+
+ ))}
+
+ {/* Chunk 1 — your result: brand header, verdict, GIF and share row. */}
+
+);
+
+const MobileScreens = (): React.ReactElement => (
+
+ 
+ {/* Share row, with the same "Had fun?" sticker as the web screen. */}
+
+
+ Had fun? Share it!
+
+
+ Share your result
+
+
+
+
+ {/* Chunk 2 — keep playing: challenge, reminder and the leaderboard. */}
+
+
+
+
+
+ 4/10
+ Correct
+
+
+
+ Tab Spammer
+
+
+ You scored better than 40% of players.
+
+
+ {WEEKLY_QUIZ_TIERS[3].message}
+
+
+
+ {/* Share row, with the same "Had fun?" sticker as the web screen. */}
+
+
+
+ {/* Challenge a friend — share the quiz link. */}
+
+
+
+ Challenge a friend ⚔️
+
+
+ Send this link so they can take this week's quiz and try to beat
+ your score.
+
+
+
+ {/* Weekly reminder. */}
+
+
+
+
+ }
+ >
+ Copy
+
+
+
+
+ 🏆 Leaderboard
+
+ {LEADERBOARD_ROWS.map((row) => (
+
+
+
+ {row.rank}
+
+
+
+ {row.name}
+
+
+ {row.score}
+
+
+ {row.time}
+
+
+ ))}
+
+
+);
+
+const meta: Meta
+
+
+
+
+
+
+
+
+ {children}
+
+