Skip to content

Commit a4b3afb

Browse files
ChanMeng666ChanMeng666
committed
Added animation of quiz results for different score bands
1 parent 49fe429 commit a4b3afb

2 files changed

Lines changed: 120 additions & 3 deletions

File tree

‎app/results/[id]/page.tsx‎

Lines changed: 86 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { useToast } from "@/hooks/use-toast"
1111
import { AssessmentResult } from '@/types/assessment'
1212
import { generatePDF, shareAssessment } from '@/lib/assessment-utils';
1313
import { motion} from 'framer-motion'
14+
import {LottieAnimation} from "@/components/LottieAnimation";
1415

1516
const CATEGORY_DETAILS = {
1617
"Trust & Honesty": {
@@ -355,6 +356,39 @@ export default function DetailedResultPage() {
355356
}
356357

357358

359+
const DetailedLottieAnimation = ({ score }: { score: number }) => {
360+
// 根据分数选择对应的动画文件
361+
const getLottieFile = (score: number) => {
362+
if (score >= 90) return "/Lottie/90-point-friendship.json";
363+
if (score >= 80) return "/Lottie/80-point-friendship.json";
364+
if (score >= 70) return "/Lottie/70-point-friendship.json";
365+
if (score >= 60) return "/Lottie/60-point-friendship.json";
366+
if (score >= 50) return "/Lottie/50-point-friendship.json";
367+
if (score >= 40) return "/Lottie/40-point-friendship.json";
368+
if (score >= 30) return "/Lottie/30-point-friendship.json";
369+
if (score >= 20) return "/Lottie/20-point-friendship.json";
370+
return "/Lottie/10-point-friendship.json";
371+
};
372+
373+
return (
374+
<motion.div
375+
initial={{ opacity: 0, scale: 0.8 }}
376+
animate={{ opacity: 1, scale: 1 }}
377+
transition={{
378+
type: "spring",
379+
stiffness: 200,
380+
damping: 20,
381+
delay: 0.2
382+
}}
383+
className="hidden md:block w-64 h-64"
384+
>
385+
<LottieAnimation
386+
path={getLottieFile(score)}
387+
className="w-full h-full"
388+
/>
389+
</motion.div>
390+
);
391+
};
358392

359393
// 添加详细分析卡片组件
360394
const AnalysisCard = ({ category, score }: { category: string; score: number }) => {
@@ -620,10 +654,51 @@ export default function DetailedResultPage() {
620654
animate={{ opacity: 1, y: 0 }}
621655
className="mb-8"
622656
>
657+
{/*<Card className="border-none bg-white/50 backdrop-blur-sm">*/}
658+
{/* <CardContent className="pt-6">*/}
659+
{/* <div className="grid md:grid-cols-2 gap-6">*/}
660+
{/* <div>*/}
661+
{/* <h2 className="text-2xl font-bold mb-2">*/}
662+
{/* Friendship Assessment Details*/}
663+
{/* </h2>*/}
664+
{/* <div className="space-y-4">*/}
665+
{/* <div>*/}
666+
{/* <h3 className="text-sm font-medium text-muted-foreground">*/}
667+
{/* Assessment Date*/}
668+
{/* </h3>*/}
669+
{/* <p className="text-lg">*/}
670+
{/* {format(new Date(assessment.date), 'PPP')}*/}
671+
{/* </p>*/}
672+
{/* </div>*/}
673+
{/* <div>*/}
674+
{/* <h3 className="text-sm font-medium text-muted-foreground">*/}
675+
{/* Friend*/}
676+
{/* </h3>*/}
677+
{/* <p className="text-lg">{assessment.friendName}</p>*/}
678+
{/* </div>*/}
679+
{/* {assessment.notes && (*/}
680+
{/* <div>*/}
681+
{/* <h3 className="text-sm font-medium text-muted-foreground">*/}
682+
{/* Notes*/}
683+
{/* </h3>*/}
684+
{/* <p className="text-lg">{assessment.notes}</p>*/}
685+
{/* </div>*/}
686+
{/* )}*/}
687+
{/* </div>*/}
688+
{/* </div>*/}
689+
{/* <div className="flex flex-col justify-center items-end">*/}
690+
{/* <ScoreIndicator score={assessment.overallScore} />*/}
691+
{/* </div>*/}
692+
{/* </div>*/}
693+
{/* </CardContent>*/}
694+
{/*</Card>*/}
695+
696+
623697
<Card className="border-none bg-white/50 backdrop-blur-sm">
624698
<CardContent className="pt-6">
625-
<div className="grid md:grid-cols-2 gap-6">
626-
<div>
699+
<div className="grid md:grid-cols-3 gap-6 items-center">
700+
{/* 左侧信息 */}
701+
<div className="md:col-span-1">
627702
<h2 className="text-2xl font-bold mb-2">
628703
Friendship Assessment Details
629704
</h2>
@@ -652,12 +727,20 @@ export default function DetailedResultPage() {
652727
)}
653728
</div>
654729
</div>
655-
<div className="flex flex-col justify-center items-end">
730+
731+
{/* 中间Lottie动画 */}
732+
<div className="flex justify-center md:col-span-1">
733+
<DetailedLottieAnimation score={assessment.overallScore} />
734+
</div>
735+
736+
{/* 右侧分数 */}
737+
<div className="flex flex-col justify-center items-end md:col-span-1">
656738
<ScoreIndicator score={assessment.overallScore} />
657739
</div>
658740
</div>
659741
</CardContent>
660742
</Card>
743+
661744
</motion.div>
662745

663746
{/* Detailed Analysis Grid */}

‎app/results/page.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
import { AssessmentResult } from '@/types/assessment'
2323
import ShareDialog from '@/components/dialogs/ShareDialog';
2424
import { motion } from 'framer-motion'
25+
import {LottieAnimation} from "@/components/LottieAnimation";
2526

2627
interface FriendInfo {
2728
name: string;
@@ -103,6 +104,36 @@ export default function ResultsPage() {
103104
description: getCategoryDescription(name, value)
104105
}))
105106

107+
108+
const ResultLottieAnimation = ({ score }: { score: number }) => {
109+
// 根据分数选择对应的动画文件
110+
const getLottieFile = (score: number) => {
111+
if (score >= 90) return "/Lottie/90-point-friendship.json";
112+
if (score >= 80) return "/Lottie/80-point-friendship.json";
113+
if (score >= 70) return "/Lottie/70-point-friendship.json";
114+
if (score >= 60) return "/Lottie/60-point-friendship.json";
115+
if (score >= 50) return "/Lottie/50-point-friendship.json";
116+
if (score >= 40) return "/Lottie/40-point-friendship.json";
117+
if (score >= 30) return "/Lottie/30-point-friendship.json";
118+
if (score >= 20) return "/Lottie/20-point-friendship.json";
119+
return "/Lottie/10-point-friendship.json";
120+
};
121+
122+
return (
123+
<motion.div
124+
initial={{ opacity: 0, scale: 0.5 }}
125+
animate={{ opacity: 1, scale: 1 }}
126+
transition={{ delay: 0.5 }}
127+
className="w-64 h-64 mx-auto my-8"
128+
>
129+
<LottieAnimation
130+
path={getLottieFile(score)}
131+
className="w-full h-full"
132+
/>
133+
</motion.div>
134+
);
135+
};
136+
106137
return (
107138
<div className="container mx-auto px-4 py-8 max-w-4xl">
108139
<FriendInfoDialog
@@ -189,6 +220,9 @@ export default function ResultsPage() {
189220
</div>
190221
</motion.div>
191222

223+
{/* 添加分数对应的Lottie动画 */}
224+
<ResultLottieAnimation score={assessmentResult.overallScore} />
225+
192226
<motion.p
193227
className="text-xl"
194228
initial={{opacity: 0, y: 20}}

0 commit comments

Comments
 (0)