import { useSQLQuery } from "@motherduck/react-sql-query"; import { useState, useMemo, useCallback } from "react"; import { Loader2, CheckCircle, XCircle, RotateCcw, ChevronRight } from "lucide-react"; export const REQUIRED_DATABASES = [ { type: 'share', path: 'md:_share/quiz_app/1209e3fe-a060-4e9e-90ee-651dbf9a7dbf', alias: 'quiz_app' } ]; const N = (v: unknown): number => (v != null ? Number(v) : 0); // MotherDuck brand const SUN = "#FFDE02"; const SKY = "#6FC2FF"; const GARDEN = "#16AA98"; const WATERMELON = "#FF7169"; const DARK = "#383838"; const CREAM = "#F4EFEA"; // Duck emoji placeholders (external images blocked by cross-origin policy) const DUCK_EMOJI: Record = { coding: "\u{1F4BB}", scientist: "\u{1F9EA}", teams: "\u{1F389}", quackbot: "\u{1F986}", }; const MONO: React.CSSProperties = { fontFamily: "'Aeonik Mono', 'SF Mono', 'Fira Code', 'Courier New', monospace", letterSpacing: "0.04em", }; // Max width for the entire dive (narrower, like a card) const MAX_W = 420; // Inline cloud SVG component function Cloud({ size = 140, style }: { size?: number; style?: React.CSSProperties }) { return ( ); } type Question = { id: number; question_text: string; option_a: string; option_b: string; option_c: string; option_d: string; correct_option: string; category: string; difficulty: string; }; type QuizType = "duckdb" | "duck_facts"; const QUIZ_INFO: Record = { duckdb: { label: "DUCKDB & MOTHERDUCK", filter: "category != 'Duck Facts'", description: "Test your knowledge of DuckDB and MotherDuck", emoji: DUCK_EMOJI.coding, }, duck_facts: { label: "DUCK FACTS", filter: "category = 'Duck Facts'", description: "How well do you know real ducks?", emoji: DUCK_EMOJI.scientist, }, }; const OPTIONS = ["a", "b", "c", "d"] as const; const OPT_LABELS = { a: "A", b: "B", c: "C", d: "D" } as const; const SHADOW = `-4px 4px 0 ${DARK}`; const SHADOW_SUN = `-4px 4px 0 ${SUN}`; export default function QuizDive() { const [quizType, setQuizType] = useState(null); const [seed, setSeed] = useState(() => Math.floor(Math.random() * 100000)); const [idx, setIdx] = useState(0); const [selected, setSelected] = useState(null); const [answered, setAnswered] = useState(false); const [score, setScore] = useState(0); const [done, setDone] = useState(false); const [history, setHistory] = useState([]); const sql = quizType ? `SELECT id, question_text, option_a, option_b, option_c, option_d, correct_option, category, difficulty FROM "quiz_app"."main"."questions" WHERE ${QUIZ_INFO[quizType].filter} ORDER BY hash(id + ${seed}) LIMIT 10` : ""; const q = useSQLQuery(sql, { enabled: !!quizType }); const questions: Question[] = useMemo(() => { const rows = Array.isArray(q.data) ? q.data : []; return rows.map((r: any) => ({ id: N(r.id), question_text: r.question_text as string, option_a: r.option_a as string, option_b: r.option_b as string, option_c: r.option_c as string, option_d: r.option_d as string, correct_option: r.correct_option as string, category: r.category as string, difficulty: r.difficulty as string, })); }, [q.data]); const cur = questions[idx] ?? null; const reset = useCallback(() => { setSeed(Math.floor(Math.random() * 100000)); setIdx(0); setSelected(null); setAnswered(false); setScore(0); setDone(false); setHistory([]); }, []); const pick = useCallback((t: QuizType) => { setQuizType(t); reset(); }, [reset]); const answer = useCallback((opt: string) => { if (answered || !cur) return; setSelected(opt); setAnswered(true); const ok = opt === cur.correct_option; if (ok) setScore(s => s + 1); setHistory(h => [...h, ok]); }, [answered, cur]); const next = useCallback(() => { if (idx + 1 >= questions.length) setDone(true); else { setIdx(i => i + 1); setSelected(null); setAnswered(false); } }, [idx, questions.length]); // ── QUIZ PICKER ── if (!quizType) { return (

{/* Clouds: bigger and closer to content */}

MotherDuck

{/* Hero: text left, duck right */}

Quiz Time

Pick a quiz to get started

{DUCK_EMOJI.quackbot}

{(Object.entries(QUIZ_INFO) as [QuizType, typeof QUIZ_INFO[QuizType]][]).map( ([type, info]) => ( ) )}

{/* Info footer */}

Quiz questions come from a MotherDuck table and are auto-generated from the{" "} MotherDuck{" "}and{" "} DuckDB{" "}documentation.

Make your own quiz Dive

Use this prompt with Claude to generate your own quiz Dive:

{`Generate 10 multiple-choice quiz questions from [your documentation URL]. For each question provide: the question text, four options (a, b, c, d), the correct answer, and the category. Store the questions in a MotherDuck table and build a Dive quiz app to display them.`}

Built with{" "} MotherDuck Dives {" "}: interactive data apps powered by your data.

); } const info = QUIZ_INFO[quizType]; // ── LOADING ── if (q.isLoading || questions.length === 0) { return (

Loading questions...

); } // ── RESULTS ── if (done) { const pct = Math.round((score / questions.length) * 100); const msg = pct === 100 ? "Perfect score!" : pct >= 80 ? "Great job!" : pct >= 60 ? "Not bad!" : pct >= 40 ? "Room for improvement." : "Better luck next time!"; return (

MotherDuck

{/* Score banner */}

{DUCK_EMOJI.teams}

{score}/{questions.length}

{msg}

{info.label}

{/* Answer dots */}

{history.map((ok, i) => (

{i + 1}

))}

); } // ── QUESTION ── return (

{/* Header */}

MotherDuck {info.label}

{idx + 1}/{questions.length}

{/* Progress bar */}

{/* Question card */}

{cur.category} {cur.difficulty}

{cur.question_text}

{info.emoji}

{/* Options */}

{OPTIONS.map(opt => { const text = cur[`option_${opt}` as keyof Question] as string; const isSel = selected === opt; const isOk = opt === cur.correct_option; let bg = "#F8F8F7"; let shadow = "none"; let labelBg = "#e5e0da"; let labelColor = DARK; let textColor = DARK; let opacity = 1; if (answered) { if (isOk) { bg = GARDEN; textColor = "white"; labelBg = "white"; labelColor = DARK; shadow = `-3px 3px 0 ${DARK}`; } else if (isSel) { bg = WATERMELON; textColor = "white"; labelBg = "white"; labelColor = DARK; shadow = `-3px 3px 0 ${DARK}`; } else { opacity = 0.35; } } else if (isSel) { shadow = `-3px 3px 0 ${SUN}`; labelBg = SUN; } return ( ); })}

{/* Next button */} {answered && ( )}

); }