Martin Dvorak
33967f9454
Ordering cards - Generation prompt now forbids dates, years, times, step numbers and ordinals in ordering items (spec + hard rules), and the server-side validation drops any ordering card whose items still contain them instead of shipping a giveaway. True/False - The 'false ✕' swipe label was permanently visible on the card: its opacity curve was inverted, so the clamp at rest was 1. Flipped the range (and tightened both ranges for the elastic drag) — each label now only fades in while swiping in that direction. Regenerate deck - Results screen gains a Regenerate deck button: rebuilds the activities from the deck's stored source notes, replaces the deck in storage (attempts/best score reset) and starts the fresh run from slide 1. - StudyFeed tracks the current deck so the header, export and messages use the regenerated title/activities. - Fixed a spurious 0% attempt recorded when a regenerated deck swapped in: scroll anchoring held the old results position, so the feed briefly reported 5/5 with zero answers. The scroll now resets before the new slides render, overflow-anchor is disabled on the feed, and a run with no answers is never recorded. Tests: new deck-fixes suite 15/15 (TF overlay at rest/drag, regenerate with loading state + storage reset, ordering guard drop/keep); retry 14/14, deck chrome 15/15, pwa 16/16, final-ux 12/12, security 8/8, contrast 20/20.
95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useMotionValue, useTransform } from "framer-motion";
|
|
import { useState } from "react";
|
|
|
|
import type { Activity } from "@/lib/schemas";
|
|
import { Button } from "@/components/ui";
|
|
|
|
import {
|
|
ActivityHeader,
|
|
FeedbackPanel,
|
|
Hint,
|
|
PromptCard,
|
|
type ActivityComponentProps,
|
|
} from "./shared";
|
|
|
|
type TrueFalseActivity = Extract<Activity, { type: "true_false" }>;
|
|
|
|
export function TrueFalse({ activity, onAnswered, onNext, isLast }: ActivityComponentProps<TrueFalseActivity>) {
|
|
const [result, setResult] = useState<boolean | null>(null);
|
|
const x = useMotionValue(0);
|
|
// The drag is elastic, so the card moves less than the pointer — these
|
|
// ranges make each label reach full strength on a normal swipe.
|
|
const trueOpacity = useTransform(x, [20, 70], [0, 1]);
|
|
// Left drags go negative: at rest (0) this must be invisible, only fading
|
|
// in as the card is dragged left. The old range was inverted, so the
|
|
// "false ✕" label sat on the card permanently.
|
|
const falseOpacity = useTransform(x, [-70, -20], [1, 0]);
|
|
|
|
const answer = (value: boolean) => {
|
|
if (result !== null) return;
|
|
setResult(value === activity.answer);
|
|
onAnswered(value === activity.answer, { userAnswer: value ? "true" : "false" });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ActivityHeader type="true_false" topic={activity.topic} />
|
|
<Hint>
|
|
{result === null ? "Swipe the card right for true, left for false — or tap a button." : "Nice swipe!"}
|
|
</Hint>
|
|
|
|
<div className="relative">
|
|
<motion.div
|
|
drag={result === null ? "x" : false}
|
|
dragConstraints={{ left: 0, right: 0 }}
|
|
dragElastic={0.55}
|
|
style={{ x }}
|
|
onDragEnd={(_, info) => {
|
|
if (info.offset.x > 90) answer(true);
|
|
else if (info.offset.x < -90) answer(false);
|
|
}}
|
|
whileTap={{ cursor: "grabbing" }}
|
|
className="touch-pan-y"
|
|
>
|
|
<PromptCard className="relative min-h-44 select-none">
|
|
<motion.span style={{ opacity: trueOpacity }} className="absolute left-4 top-3 text-sm font-extrabold uppercase tracking-widest text-emerald-500">
|
|
✓ true
|
|
</motion.span>
|
|
<motion.span style={{ opacity: falseOpacity }} className="absolute right-4 top-3 text-sm font-extrabold uppercase tracking-widest text-rose-500">
|
|
false ✕
|
|
</motion.span>
|
|
<p className="pt-6 text-center text-xl font-bold leading-snug text-frost-950 sm:text-2xl dark:text-frost-50">
|
|
“{activity.statement}”
|
|
</p>
|
|
</PromptCard>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{result === null ? (
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Button variant="secondary" size="lg" onClick={() => answer(false)} className="border-rose-200 text-rose-700 dark:text-rose-200">
|
|
✕ False
|
|
</Button>
|
|
<Button variant="success" size="lg" onClick={() => answer(true)}>
|
|
✓ True
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<FeedbackPanel
|
|
correct={result}
|
|
explanation={activity.explanation}
|
|
xp={activity.xp}
|
|
isLast={isLast}
|
|
onNext={onNext}
|
|
detail={
|
|
<span>
|
|
This statement is <span className="font-bold">{activity.answer ? "true" : "false"}</span>.
|
|
</span>
|
|
}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|