Browse Source
feat: implement test questions flow component and question detail client handler
front-test-2
feat: implement test questions flow component and question detail client handler
front-test-2
7 changed files with 2270 additions and 158 deletions
-
296src/app/questions-list/[slug]/question-detail-client.tsx
-
20src/app/questions-list/page.tsx
-
3src/components/questions/progress-helper.ts
-
149src/components/questions/test-loading-screen.tsx
-
10src/components/questions/test-questions-flow.tsx
-
1691src/data/cattell-fallback.ts
-
183src/data/glasser-fallback.ts
@ -0,0 +1,149 @@ |
|||||
|
"use client"; |
||||
|
|
||||
|
import { PageBackground } from "@/components/utils/page-background"; |
||||
|
|
||||
|
export function AnalyzingIllustration({ className = "w-44 h-44" }: { className?: string }) { |
||||
|
return ( |
||||
|
<svg |
||||
|
viewBox="0 0 160 160" |
||||
|
fill="none" |
||||
|
xmlns="http://www.w3.org/2000/svg" |
||||
|
className={className} |
||||
|
> |
||||
|
{/* Base shadow oval */} |
||||
|
<ellipse cx="80" cy="144" rx="55" ry="6" fill="#FCE7F3" opacity="0.8" /> |
||||
|
<ellipse cx="80" cy="144" rx="35" ry="3.5" fill="#FDA4AF" opacity="0.4" /> |
||||
|
|
||||
|
{/* Main Document Paper */} |
||||
|
<g filter="drop-shadow(0px 8px 20px rgba(242, 70, 95, 0.12))"> |
||||
|
{/* Paper body */} |
||||
|
<rect x="42" y="30" width="76" height="96" rx="10" fill="#FFFFFF" /> |
||||
|
|
||||
|
{/* Header bar inside paper */} |
||||
|
<rect x="50" y="38" width="60" height="26" rx="6" fill="#FFF1F2" /> |
||||
|
|
||||
|
{/* Small text lines in header */} |
||||
|
<line x1="56" y1="46" x2="76" y2="46" stroke="#FDA4AF" strokeWidth="2.5" strokeLinecap="round" /> |
||||
|
<line x1="56" y1="53" x2="70" y2="53" stroke="#FECDD3" strokeWidth="2" strokeLinecap="round" /> |
||||
|
|
||||
|
{/* Donut chart in header */} |
||||
|
<circle cx="97" cy="51" r="7.5" stroke="#F2465F" strokeWidth="3" fill="none" strokeDasharray="32 10" /> |
||||
|
<circle cx="97" cy="51" r="3.5" fill="#E03950" /> |
||||
|
|
||||
|
{/* Bar chart bars */} |
||||
|
<rect x="54" y="86" width="6" height="26" rx="3" fill="#F2465F" /> |
||||
|
<rect x="64" y="74" width="6" height="38" rx="3" fill="#FF6B81" /> |
||||
|
<rect x="74" y="92" width="6" height="20" rx="3" fill="#FDA4AF" /> |
||||
|
<rect x="84" y="80" width="6" height="32" rx="3" fill="#F2465F" /> |
||||
|
<rect x="94" y="88" width="6" height="24" rx="3" fill="#FF8093" /> |
||||
|
|
||||
|
{/* Pie Chart on right */} |
||||
|
<circle cx="97" cy="73" r="8.5" fill="#FDA4AF" /> |
||||
|
<path d="M97 73 L97 64.5 A8.5 8.5 0 0 1 105.5 73 Z" fill="#F2465F" /> |
||||
|
</g> |
||||
|
|
||||
|
{/* Rolled bottom paper edge effect */} |
||||
|
<path |
||||
|
d="M42 120 C 42 128, 54 128, 54 120 C 54 128, 118 128, 118 120" |
||||
|
fill="#FFFFFF" |
||||
|
stroke="#FFE4E6" |
||||
|
strokeWidth="1.5" |
||||
|
/> |
||||
|
|
||||
|
{/* Magnifying Glass */} |
||||
|
<g filter="drop-shadow(2px 8px 14px rgba(242, 70, 95, 0.25))"> |
||||
|
{/* Handle */} |
||||
|
<rect |
||||
|
x="28" |
||||
|
y="88" |
||||
|
width="8" |
||||
|
height="36" |
||||
|
rx="4" |
||||
|
transform="rotate(38 28 88)" |
||||
|
fill="#F2465F" |
||||
|
/> |
||||
|
{/* Handle Accent Connection */} |
||||
|
<rect |
||||
|
x="28" |
||||
|
y="88" |
||||
|
width="8" |
||||
|
height="9" |
||||
|
rx="2" |
||||
|
transform="rotate(38 28 88)" |
||||
|
fill="#E03950" |
||||
|
/> |
||||
|
|
||||
|
{/* Glass Ring */} |
||||
|
<circle |
||||
|
cx="62" |
||||
|
cy="58" |
||||
|
r="21" |
||||
|
fill="#FFFFFF" |
||||
|
fillOpacity="0.65" |
||||
|
stroke="#F2465F" |
||||
|
strokeWidth="5" |
||||
|
/> |
||||
|
{/* Lens Inner Reflection */} |
||||
|
<path |
||||
|
d="M49 50 A 16 16 0 0 1 71 46" |
||||
|
stroke="#FFD1D7" |
||||
|
strokeWidth="3.5" |
||||
|
strokeLinecap="round" |
||||
|
fill="none" |
||||
|
/> |
||||
|
</g> |
||||
|
</svg> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
type TestLoadingScreenProps = { |
||||
|
title?: string; |
||||
|
subtitle?: string; |
||||
|
locale?: string; |
||||
|
}; |
||||
|
|
||||
|
export default function TestLoadingScreen({ |
||||
|
title, |
||||
|
subtitle, |
||||
|
locale = "fa", |
||||
|
}: TestLoadingScreenProps) { |
||||
|
const defaultTitle = |
||||
|
locale === "fa" ? "در حال تحلیل و دریافت اطلاعات" : "Analyzing responses"; |
||||
|
const defaultSubtitle = |
||||
|
locale === "fa" |
||||
|
? "لطفاً چند لحظه شکیبا باشید تا اطلاعات مورد نظر بارگذاری و آماده شوند." |
||||
|
: "Please wait while we review your submission and generate results."; |
||||
|
|
||||
|
return ( |
||||
|
<> |
||||
|
<PageBackground disabled /> |
||||
|
<main className="-mx-[17px] flex h-svh flex-col items-center justify-between bg-[#F7F1F0] py-16 px-6 text-center select-none"> |
||||
|
{/* Top spacer to balance layout */} |
||||
|
<div className="w-full shrink-0" /> |
||||
|
|
||||
|
{/* Center Content Block */} |
||||
|
<div className="flex flex-col items-center max-w-xs mx-auto my-auto"> |
||||
|
{/* Brand Illustrated Icon */} |
||||
|
<div className="mb-6 flex justify-center"> |
||||
|
<AnalyzingIllustration className="w-44 h-44 drop-shadow-sm" /> |
||||
|
</div> |
||||
|
|
||||
|
{/* Title */} |
||||
|
<h2 className="text-xl font-extrabold text-[#2C2C2E] tracking-tight mb-2.5 leading-snug"> |
||||
|
{title ?? defaultTitle} |
||||
|
</h2> |
||||
|
|
||||
|
{/* Subtitle */} |
||||
|
<p className="text-sm font-medium text-[#6C6C70] leading-relaxed max-w-[270px] mx-auto"> |
||||
|
{subtitle ?? defaultSubtitle} |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
{/* Bottom Circular Loading Spinner */} |
||||
|
<div className="shrink-0 mb-4 flex justify-center items-center"> |
||||
|
<div className="size-11 rounded-full border-[3.5px] border-[#DCDCE0] border-t-[#F2465F] border-r-[#F2465F] animate-spin transition-all" /> |
||||
|
</div> |
||||
|
</main> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
1691
src/data/cattell-fallback.ts
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,183 @@ |
|||||
|
export type GlasserFallbackQuestion = { |
||||
|
question_number: number; |
||||
|
factor_code: string; |
||||
|
text: string; |
||||
|
}; |
||||
|
|
||||
|
export const glasserFallbackQuestions: GlasserFallbackQuestion[] = [ |
||||
|
{ |
||||
|
question_number: 1, |
||||
|
factor_code: "S", |
||||
|
text: "مسایلی مثل پس انداز، مخارج زندگی، مسکن، آینده شغلی و.. تا چه اندازه ذهن شما را به خود مشغول می دارد؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 2, |
||||
|
factor_code: "S", |
||||
|
text: "تا چه اندازه به سلامت جسمانی، بهداشت و احتمال ابتلا به بیماری فکر میکنید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 3, |
||||
|
factor_code: "S", |
||||
|
text: "شدت میل جنسی خود را چگونه ارزیابی میکنید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 4, |
||||
|
factor_code: "S", |
||||
|
text: "در انجام کارها و اقدامات مخاطره انگیز تا چه اندازه محتاطانه عمل میکنید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 5, |
||||
|
factor_code: "S", |
||||
|
text: "از روبه رویی با تجارب جدید و شروع راه های ناشناخته تا چه اندازه اجتناب میکنید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 6, |
||||
|
factor_code: "S", |
||||
|
text: "از نظر دوستان و همکاران خود چقدر وقت شناس با نظم و ترتیب و دقیق هستید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 7, |
||||
|
factor_code: "S", |
||||
|
text: "تا چه اندازه امنیت شغلی و درآمد ثابت برایتان اهمیت دارد؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 8, |
||||
|
factor_code: "L", |
||||
|
text: "احساس می کنید به چه میزان عشق، صمیمیت و مهرورزی نیاز دارید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 9, |
||||
|
factor_code: "L", |
||||
|
text: "تا چه اندازه رفاه و سعادت انسان های دیگر برایتان مهم است؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 10, |
||||
|
factor_code: "L", |
||||
|
text: "تا چه اندازه تمایل دارید تجارب شخصی، احساسات عمیق و اسرار خود را با دیگران در میان بگذارید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 11, |
||||
|
factor_code: "L", |
||||
|
text: "در ایجاد صمیمیت و برقراری ارتباط عاطفی با دیگران چقدر پیش قدم می شوید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 12, |
||||
|
factor_code: "L", |
||||
|
text: "تا چه اندازه از دیدن، وقت گذراندن و گفتگو با دوستان و آشنایان خود لذت می برید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 13, |
||||
|
factor_code: "L", |
||||
|
text: "میزان بخشندگی، گذشت و فراموش کردن خطای دیگران را در خود چگونه ارزیابی می کنید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 14, |
||||
|
factor_code: "L", |
||||
|
text: "تا چه اندازه به ایجاد و حفظ روابط دوستانه، صمیمی و پایدار با دیگران علاقه مند هستید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 15, |
||||
|
factor_code: "P", |
||||
|
text: "تا چه اندازه تمایل دارید رهبری گروهها، هدایت پروژهها یا مدیریت امور را بر عهده بگیرید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 16, |
||||
|
factor_code: "P", |
||||
|
text: "رسیدن به موفقیت، موقعیت اجتماعی ممتاز و جایگاه برتر تا چه حد برایتان اهمیت دارد؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 17, |
||||
|
factor_code: "P", |
||||
|
text: "در صورت بروز نقد، مخالفت یا اشتباه از سوی دیگران، تا چه حد رفتار تند، قاطع یا اصلاحی نشان میدهید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 18, |
||||
|
factor_code: "P", |
||||
|
text: "تا چه اندازه تمایل دارید کارها دقیقاً طبق نظرات، استانداردها و روشهای شما انجام شوند؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 19, |
||||
|
factor_code: "P", |
||||
|
text: "در بحثها و گفتگوها تا چه حد اصرار دارید حرف و نظر خود را به عنوان نظر درست به اثبات برسانید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 20, |
||||
|
factor_code: "P", |
||||
|
text: "وقتی احساس میکنید حق با شماست، تا چه اندازه حاضر به رقابت یا پافشاری بر روی خواستههایتان هستید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 21, |
||||
|
factor_code: "P", |
||||
|
text: "دیدگاه شما نسبت به یادگیری، کسب دانش و بالا بردن اطلاعات تخصصی چیست؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 22, |
||||
|
factor_code: "Fr", |
||||
|
text: "تا چه اندازه تمایل دارید بدون دخالت، نظارت یا دستور دیگران اهداف شخصی خود را دنبال کنید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 23, |
||||
|
factor_code: "Fr", |
||||
|
text: "در برابر احساس محدودیت، اجبار یا رعایت قوانین دست و پا گیر تا چه حد واکنش نشان میدهید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 24, |
||||
|
factor_code: "Fr", |
||||
|
text: "میزان تمایل شما به داشتن حریم خصوصی، زمان تنهایی و استقلال در تصمیمگیریها چقدر است؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 25, |
||||
|
factor_code: "Fr", |
||||
|
text: "تا چه اندازه رهایی از قید و بندها و برنامههای فشرده را ترجیح میدهید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 26, |
||||
|
factor_code: "Fr", |
||||
|
text: "در مواجهه با فشار روانی یا استرس، تا چه حد نیاز دارید فضا و وقت مستقل داشته باشید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 27, |
||||
|
factor_code: "Fr", |
||||
|
text: "تا چه اندازه تمایل دارید مسیر زندگی، سبک پوشش یا رفتارهای خود را بر اساس معیارهای فردی انتخاب کنید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 28, |
||||
|
factor_code: "Fr", |
||||
|
text: "چقدر برای آزادی اندیشه و ابراز دیدگاههای غیرمعمول اهمیت قائل هستید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 29, |
||||
|
factor_code: "Fu", |
||||
|
text: "تا چه اندازه اهل شوخطبعی، خنده، لطیفهگویی و ایجاد فضای شاد هستید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 30, |
||||
|
factor_code: "Fu", |
||||
|
text: "چقدر زمان و هزینه برای سرگرمی، تفریحات بیدغدغه و فعالیتهای مفرح اختصاص میدهید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 31, |
||||
|
factor_code: "Fu", |
||||
|
text: "تا چه اندازه از کارهای خلاقانه، هنری، بازی و سرگرمی لذت میبرید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 32, |
||||
|
factor_code: "Fu", |
||||
|
text: "چقدر قادر هستید لحظات سخت و جدیت زندگی را با نگاهی سبک، طنزآمیز و مثبت سپری کنید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 33, |
||||
|
factor_code: "Fu", |
||||
|
text: "تمایل شما به شرکت در دورهمیها، برنامههای تفریحی و سفر با دوستان چقدر است؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 34, |
||||
|
factor_code: "Fu", |
||||
|
text: "چقدر برای داشتن سرگرمیها (هابی) و فعالیتهای غیرکاری وقت میگذارید؟" |
||||
|
}, |
||||
|
{ |
||||
|
question_number: 35, |
||||
|
factor_code: "Fu", |
||||
|
text: "از یادگیری چیزهای جدید همراه با بازی، هیجان و نشاط چقدر استقبال میکنید؟" |
||||
|
} |
||||
|
]; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue