feat: quiz
This commit is contained in:
gosangam
@@ -9,6 +9,7 @@ import {
|
||||
} from "@/lib/transcriptions";
|
||||
import { buildOgMeta, ogForTranscription, extractQuoteFromHl } from "@/lib/og";
|
||||
import { PageHeader } from "@/components/layout/page-header";
|
||||
import { QuizButton } from "@/components/quiz/quiz-button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
@@ -95,6 +96,9 @@ export default async function TranscriptionPage({
|
||||
/>
|
||||
<PageHeader
|
||||
sticky
|
||||
// With audio, the quiz button sits beside the play control below
|
||||
// instead; without it, the header shows it as on any other page.
|
||||
quiz={!t.audioUrl}
|
||||
offline={{
|
||||
type: "transcript",
|
||||
title: t.name,
|
||||
@@ -168,7 +172,8 @@ export default async function TranscriptionPage({
|
||||
|
||||
{/* Play Audio button */}
|
||||
{t.audioUrl && (
|
||||
<div className="w-full md:w-[25%] flex justify-end">
|
||||
<div className="w-full md:w-auto flex flex-wrap items-center justify-end gap-2">
|
||||
<QuizButton path={`/transcriptions/${t.slug}`} className="py-2" />
|
||||
<PlayAudioButton
|
||||
audioUrl={t.audioUrl}
|
||||
title={t.name}
|
||||
|
||||
+23
-6
@@ -6,6 +6,7 @@ import { useAuth } from "@/components/auth/auth-provider";
|
||||
import { SadhnaStreakCTA } from "@/components/sadhna/streak-cta";
|
||||
import { VaniOfTheDayCTA } from "@/components/vani/vani-of-the-day-cta";
|
||||
import { HomeFeed } from "@/components/feed/home-feed";
|
||||
import { QuizzesCTA } from "@/components/quiz/quizzes-cta";
|
||||
|
||||
/**
|
||||
* / — the Home (Feed) gate.
|
||||
@@ -33,9 +34,17 @@ export default function HomePage() {
|
||||
// mobile this max-width is wider than the viewport, so it's full-bleed
|
||||
// as before.
|
||||
<main className="flex-1 max-w-lg w-full mx-auto px-4 sm:px-6 py-6">
|
||||
<div className="mb-6 flex flex-col gap-3">
|
||||
<SadhnaStreakCTA />
|
||||
<VaniOfTheDayCTA />
|
||||
<div className="mb-6">
|
||||
<div className="flex h-24 gap-3">
|
||||
{/* A compact sādhana tile beside a wider Vāṇī of the Day: the
|
||||
streak is a daily habit you already know how to reach, so it
|
||||
needs only a recognisable mark; the vāṇī changes daily and
|
||||
earns the room to say what it is. */}
|
||||
<SadhnaStreakCTA compact />
|
||||
<VaniOfTheDayCTA className="h-full min-w-0 max-w-none flex-1" />
|
||||
</div>
|
||||
{/* Only while something is left to take. */}
|
||||
<QuizzesCTA pendingOnly className="mt-3" />
|
||||
</div>
|
||||
<HomeFeed />
|
||||
</main>
|
||||
@@ -88,9 +97,17 @@ export default function HomePage() {
|
||||
</p>
|
||||
|
||||
{/* Daily sādhana streak + Vāṇī of the day — entry points for visitors. */}
|
||||
<div className="mt-6 w-full max-w-md flex flex-col gap-3">
|
||||
<SadhnaStreakCTA />
|
||||
<VaniOfTheDayCTA />
|
||||
<div className="mt-6 w-full max-w-md">
|
||||
<div className="flex h-24 gap-3">
|
||||
{/* A compact sādhana tile beside a wider Vāṇī of the Day: the
|
||||
streak is a daily habit you already know how to reach, so it
|
||||
needs only a recognisable mark; the vāṇī changes daily and
|
||||
earns the room to say what it is. */}
|
||||
<SadhnaStreakCTA compact />
|
||||
<VaniOfTheDayCTA className="h-full min-w-0 max-w-none flex-1" />
|
||||
</div>
|
||||
{/* Only while something is left to take. */}
|
||||
<QuizzesCTA pendingOnly className="mt-3" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -0,0 +1,306 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* Taking a quiz: an introduction, then one question at a time, then your
|
||||
* result.
|
||||
*
|
||||
* Each question is fetched from the BFF as you reach it, and the BFF starts
|
||||
* its clock at that moment — so response times are measured server-side and
|
||||
* reloading the page doesn't restart them. Correct answers are only revealed
|
||||
* on the results screen, never while you're still answering.
|
||||
*
|
||||
* Tapping an option only selects it; the answer is sent, and becomes final,
|
||||
* when you press Submit. Multi questions ("select all that apply") take
|
||||
* several selections.
|
||||
*/
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useParams } from "next/navigation";
|
||||
import {
|
||||
ArrowLeft,
|
||||
ArrowRight,
|
||||
Check,
|
||||
ClipboardCheck,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useAuth } from "@/components/auth/auth-provider";
|
||||
import { useAuthGate } from "@/components/auth/auth-gate";
|
||||
import { RichText } from "@/lib/rich-text";
|
||||
import {
|
||||
quiz as quizApi,
|
||||
quizActionLabel,
|
||||
QuizError,
|
||||
type QuizCard,
|
||||
type QuizPlay,
|
||||
type QuizResult,
|
||||
} from "@/lib/quiz";
|
||||
import { QuizResultView } from "@/components/quiz/quiz-result-view";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Stage =
|
||||
| { kind: "loading" }
|
||||
| { kind: "intro"; card: QuizCard }
|
||||
| { kind: "playing"; card: QuizCard; play: QuizPlay }
|
||||
| { kind: "result"; card: QuizCard; result: QuizResult }
|
||||
| { kind: "missing" };
|
||||
|
||||
export default function QuizPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { user } = useAuth();
|
||||
const { requireAuth } = useAuthGate();
|
||||
const [stage, setStage] = useState<Stage>({ kind: "loading" });
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
// Every new question starts with nothing selected.
|
||||
const goTo = (card: QuizCard, play: QuizPlay) => {
|
||||
setSelected([]);
|
||||
setStage({ kind: "playing", card, play });
|
||||
};
|
||||
|
||||
const toggle = (play: QuizPlay, optionId: string) => {
|
||||
if (submitting) return;
|
||||
setSelected((cur) =>
|
||||
play.question?.multi
|
||||
? cur.includes(optionId)
|
||||
? cur.filter((x) => x !== optionId)
|
||||
: [...cur, optionId]
|
||||
: [optionId],
|
||||
);
|
||||
};
|
||||
|
||||
const showResult = useCallback(
|
||||
async (card: QuizCard) => {
|
||||
const result = await quizApi.result(id);
|
||||
setStage({ kind: "result", card, result });
|
||||
},
|
||||
[id],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
quizApi
|
||||
.get(id)
|
||||
.then(async (card) => {
|
||||
if (cancelled) return;
|
||||
if (card.my.state === "completed") await showResult(card);
|
||||
else setStage({ kind: "intro", card });
|
||||
})
|
||||
.catch(() => !cancelled && setStage({ kind: "missing" }));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
// user?.id: progress appears once you sign in.
|
||||
}, [id, user?.id, showResult]);
|
||||
|
||||
const begin = async (card: QuizCard) => {
|
||||
if (!(await requireAuth())) return;
|
||||
try {
|
||||
const play = await quizApi.start(id);
|
||||
if (play.done) await showResult(card);
|
||||
else goTo(card, play);
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
err instanceof QuizError ? err.message : "Could not start the quiz",
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async (card: QuizCard, play: QuizPlay) => {
|
||||
if (!play.question || submitting || selected.length === 0) return;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const next = await quizApi.answer(id, play.question.id, selected);
|
||||
if (next.done) await showResult(card);
|
||||
else goTo(card, next);
|
||||
} catch (err) {
|
||||
// Most likely the question was already answered in another tab: pick up
|
||||
// wherever the attempt actually is rather than leaving this one stuck.
|
||||
toast.error(
|
||||
err instanceof QuizError ? err.message : "Could not save that answer",
|
||||
);
|
||||
try {
|
||||
const resumed = await quizApi.start(id);
|
||||
if (resumed.done) await showResult(card);
|
||||
else goTo(card, resumed);
|
||||
} catch {
|
||||
/* the toast already said something went wrong */
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-2xl flex-1 px-4 py-6 sm:px-6 sm:py-10">
|
||||
<Link
|
||||
href="/quizzes"
|
||||
className="mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="size-4" /> All quizzes
|
||||
</Link>
|
||||
|
||||
{stage.kind === "loading" && (
|
||||
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||
)}
|
||||
|
||||
{stage.kind === "missing" && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This quiz isn't available.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{(stage.kind === "intro" ||
|
||||
stage.kind === "playing" ||
|
||||
stage.kind === "result") && (
|
||||
<header className="mb-6">
|
||||
<h1 className="font-[family-name:var(--font-title)] text-2xl font-semibold text-foreground">
|
||||
{stage.card.title}
|
||||
</h1>
|
||||
{stage.card.target_path && (
|
||||
<Link
|
||||
href={stage.card.target_path}
|
||||
className="mt-1 inline-block text-sm text-primary hover:underline"
|
||||
>
|
||||
{stage.card.target_title || stage.card.target_path}
|
||||
</Link>
|
||||
)}
|
||||
</header>
|
||||
)}
|
||||
|
||||
{stage.kind === "intro" && (
|
||||
<section className="space-y-5 rounded-2xl border border-border bg-card p-5">
|
||||
{stage.card.description && (
|
||||
<div className="text-sm leading-relaxed text-foreground">
|
||||
<RichText text={stage.card.description} />
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{stage.card.question_count}{" "}
|
||||
{stage.card.question_count === 1 ? "question" : "questions"}, one
|
||||
attempt. Each answer is final once submitted, and your time on each
|
||||
question is recorded.
|
||||
</p>
|
||||
{stage.card.my.state === "in_progress" && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You've answered {stage.card.my.answered} of{" "}
|
||||
{stage.card.my.total}.
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void begin(stage.card)}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 dark:text-white"
|
||||
>
|
||||
<ClipboardCheck className="size-4" />
|
||||
{user
|
||||
? quizActionLabel(stage.card.my.state)
|
||||
: "Sign in to take the quiz"}
|
||||
</button>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{stage.kind === "playing" && stage.play.question && (
|
||||
<section className="space-y-5">
|
||||
<div>
|
||||
<div className="mb-1.5 flex justify-between text-xs text-muted-foreground">
|
||||
<span>
|
||||
Question {stage.play.answered + 1} of {stage.play.total}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 overflow-hidden rounded-full bg-muted">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary transition-all"
|
||||
style={{
|
||||
width: `${(stage.play.answered / stage.play.total) * 100}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-lg leading-relaxed text-foreground">
|
||||
<RichText text={stage.play.question.prompt} />
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{stage.play.question.multi
|
||||
? "Select all that apply"
|
||||
: "Select one answer"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
className="space-y-2"
|
||||
role={stage.play.question.multi ? "group" : "radiogroup"}
|
||||
>
|
||||
{stage.play.question.options.map((o) => {
|
||||
const on = selected.includes(o.id);
|
||||
const multi = stage.play.question?.multi;
|
||||
return (
|
||||
<li key={o.id}>
|
||||
<button
|
||||
type="button"
|
||||
role={multi ? "checkbox" : "radio"}
|
||||
aria-checked={on}
|
||||
disabled={submitting}
|
||||
onClick={() => toggle(stage.play, o.id)}
|
||||
className={cn(
|
||||
"flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-left text-sm transition-colors",
|
||||
on
|
||||
? "border-primary bg-primary/10"
|
||||
: "border-border bg-card hover:border-primary/40 hover:bg-muted/40",
|
||||
"disabled:cursor-default",
|
||||
)}
|
||||
>
|
||||
{/* Radio dot for one answer, checkbox for several. */}
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
"flex size-4 shrink-0 items-center justify-center border transition-colors",
|
||||
multi ? "rounded" : "rounded-full",
|
||||
on
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-muted-foreground/40",
|
||||
)}
|
||||
>
|
||||
{on &&
|
||||
(multi ? (
|
||||
<Check className="size-3" strokeWidth={3} />
|
||||
) : (
|
||||
<span className="size-1.5 rounded-full bg-primary-foreground" />
|
||||
))}
|
||||
</span>
|
||||
<span className="min-w-0 flex-1">
|
||||
<RichText text={o.body} />
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
disabled={selected.length === 0 || submitting}
|
||||
onClick={() => void submit(stage.card, stage.play)}
|
||||
className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 dark:text-white"
|
||||
>
|
||||
{submitting && <Loader2 className="size-4 animate-spin" />}
|
||||
{stage.play.answered + 1 === stage.play.total
|
||||
? "Submit and finish"
|
||||
: "Next question"}
|
||||
{!submitting && stage.play.answered + 1 < stage.play.total && (
|
||||
<ArrowRight className="size-4" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{stage.kind === "result" && <QuizResultView result={stage.result} />}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* /quizzes — every published quiz, with where you are in each.
|
||||
*
|
||||
* Reached from the Quizzes card on the search page. Quizzes are deliberately
|
||||
* not in search results: they're something to do, not something to look up.
|
||||
*/
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ClipboardCheck } from "lucide-react";
|
||||
import { useAuth } from "@/components/auth/auth-provider";
|
||||
import { quiz, quizActionLabel, type QuizCard } from "@/lib/quiz";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const KIND: Record<QuizCard["target_kind"], string> = {
|
||||
chapter: "Book chapter",
|
||||
lecture: "Lecture",
|
||||
conversation: "Conversation",
|
||||
standalone: "Quiz",
|
||||
};
|
||||
|
||||
type Filter = "all" | "todo" | "done";
|
||||
|
||||
export default function QuizzesPage() {
|
||||
const { user } = useAuth();
|
||||
const [list, setList] = useState<QuizCard[] | null>(null);
|
||||
const [filter, setFilter] = useState<Filter>("all");
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
quiz
|
||||
.list()
|
||||
.then((l) => !cancelled && setList(l))
|
||||
.catch(() => !cancelled && setList([]));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [user?.id]);
|
||||
|
||||
const shown = useMemo(
|
||||
() =>
|
||||
(list ?? []).filter((q) =>
|
||||
filter === "all"
|
||||
? true
|
||||
: filter === "done"
|
||||
? q.my.state === "completed"
|
||||
: q.my.state !== "completed",
|
||||
),
|
||||
[list, filter],
|
||||
);
|
||||
|
||||
return (
|
||||
<main className="mx-auto w-full max-w-3xl flex-1 px-4 py-6 sm:px-6 sm:py-10">
|
||||
<header className="mb-6">
|
||||
<h1 className="font-[family-name:var(--font-title)] text-2xl font-semibold text-foreground sm:text-3xl">
|
||||
Quizzes
|
||||
</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Test what you've read and heard. Each quiz can be taken once, and
|
||||
only you can see your results.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{user && (
|
||||
<div className="mb-4 flex gap-1">
|
||||
{(
|
||||
[
|
||||
["all", "All"],
|
||||
["todo", "To do"],
|
||||
["done", "Finished"],
|
||||
] as const
|
||||
).map(([k, label]) => (
|
||||
<button
|
||||
key={k}
|
||||
type="button"
|
||||
onClick={() => setFilter(k)}
|
||||
className={cn(
|
||||
"rounded-full px-3 py-1 text-sm transition-colors",
|
||||
filter === k
|
||||
? "bg-primary text-primary-foreground dark:text-white"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{list === null ? (
|
||||
<p className="text-sm text-muted-foreground">Loading…</p>
|
||||
) : shown.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{list.length === 0
|
||||
? "No quizzes yet — check back soon."
|
||||
: "Nothing here."}
|
||||
</p>
|
||||
) : (
|
||||
<ul className="grid gap-3 sm:grid-cols-2">
|
||||
{shown.map((q) => {
|
||||
const done = q.my.state === "completed";
|
||||
return (
|
||||
<li key={q.id}>
|
||||
<Link
|
||||
href={`/quizzes/${q.id}`}
|
||||
className="flex h-full flex-col rounded-2xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-muted/30"
|
||||
>
|
||||
<p className="text-xs font-medium text-primary">
|
||||
{KIND[q.target_kind]}
|
||||
</p>
|
||||
<p className="mt-1 font-semibold leading-snug text-foreground">
|
||||
{q.title}
|
||||
</p>
|
||||
{q.target_title && (
|
||||
<p className="mt-0.5 truncate text-sm text-muted-foreground">
|
||||
{q.target_title}
|
||||
</p>
|
||||
)}
|
||||
<div className="mt-auto flex items-center justify-between gap-2 pt-4 text-xs">
|
||||
<span className="text-muted-foreground">
|
||||
{q.question_count}{" "}
|
||||
{q.question_count === 1 ? "question" : "questions"}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 font-medium",
|
||||
done ? "text-muted-foreground" : "text-primary",
|
||||
)}
|
||||
>
|
||||
<ClipboardCheck className="size-3.5" />
|
||||
{quizActionLabel(q.my.state)}
|
||||
{done &&
|
||||
q.my.score !== undefined &&
|
||||
` · ${q.my.score}/${q.my.total}`}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user