من یک برنامه جبهه هوشمند برای ارزیابی شخصیت تهیه کردم

چگونه برنامه ارزیابی شخصیت ما کار می کند

فهرست مطالب

1. نمای کلی
2. معماری
3. جریان کاربر
4. اجزای فنی
   • 4.1 ساختار HTML
   • 4.2 اجرای CSS
   • 4.3 منطق جاوا اسکریپت
5. ساختار سؤال
6. سیستم امتیاز دهی
7. محاسبه نتیجه
8. ویژگی های خاص
9. ادغام های شخص ثالث

پیوند به برنامه Frontend واقعی:
کلیک کنید: آزمون ارزیابی شخصیتی

در اینجا کد منبع است ، شما می توانید از آن استفاده کنید اما دوست دارید:
و شخصیت خود را بررسی کنید و اگر دوست دارید آن را با رسانه های اجتماعی خود به اشتراک بگذارید.

1. بررسی اجمالی برنامه ارزیابی شخصیت

این ارزیابی شخصیتی یک برنامه مبتنی بر وب است که با پرسیدن 21 سؤال چند گزینه ای ، ویژگی های شخصیت کاربر را بررسی می کند.
فراهم می کند:

• ردیابی پیشرفت در زمان واقعی
• ارائه سوال تعاملی
• نمایش نتیجه بصری
• طبقه بندی نوع شخصیت
• قابلیت های اشتراک اجتماعی

2. معماری این برنامه ارزیابی شخصیتی

یک برنامه تک صفحه سه صفحه ای:

1. صفحه اول خوش آمدید
2. 2 صفحه نمایش تست است
3. صفحه سوم و نهایی است

3. جریان کاربر: برنامه برای کاربر چگونه کار می کند؟

Welcome Screen → Start Test → Answer Questions → View Results → (Share/Retake)

4. مؤلفه های فنی برنامه

4.1 ساختار HTML

سه بخش اصلی:

...


...


...

4.2 اجرای CSS

ویژگی های کلیدی:

• متغیرهای CSS برای مدیریت موضوع
• انیمیشن های GSAP
• طرح های شبکه پاسخگو
• اثرات شیب پویا
• انیمیشن حلقه پیشرفت
• عناصر طراحی نئو مورفیسم

4.3 منطق جاوا اسکریپت برای آزمون

کلاس اصلی: PersonalityAssessment

class PersonalityAssessment {
  constructor() { /* Initializes all components */ }
  initializeProgressCircle() { /* SVG progress ring setup */ }
  calculateTraitFrequencies() { /* Normalization data */ }
  renderQuestion() { /* Dynamic question display */ }
  handleAnswer() { /* Score calculation */ }
  calculateResults() { /* Trait percentage conversion */ }
  setPersonalityType() { /* Type classification */ }
}

5 ساختار سوالات

هر شیء سؤال در برنامه شامل موارد زیر است:

{
  question: "How do you prefer to spend your free time?",
  options: [
    { text: "Reading alone 📖", trait: "introvert", emoji: "📖" },
    // ... other options
  ],
  category: "Social"
}

6. سیستم امتیاز دهی

• 16 ویژگی شخصیتی ردیابی شده است
• هر گزینه +5 به ویژگی خود اضافه می کند
• حداکثر نمره ممکن در هر صفت: (number_of_questions * 5)
• فرمول عادی سازی:

(traitScore / (traitFrequency * 5)) * 100

7. محاسبه نتیجه برای آزمون شخصیت

• نمرات خام را به درصد تبدیل کنید
• صفات را بر اساس درصد مرتب کنید
• ویژگی اصلی را تعیین کنید
• توصیف شخصیت
• ایجاد نمودار بصری (نمودار)

8. ویژگی های خاص

• طرح رنگ پویا: تغییرات اصلی رنگ بر اساس قوی ترین صفت
• انیمیشن Confetti: ادغام بوم-کنفتی
• حلقه پیشرفت: نشانگر پیشرفت دایره ای مبتنی بر SVG
• به اشتراک گذاری اجتماعی: URL های اشتراک گذاری خاص پلتفرم (LinkedIn ، Facebook ، Pinterest ، Reddit ، Twitter ، WhatsApp)
• انیمیشن های GSAP: انتقال صفحه و انیمیشن های عنصر

9. ادغام های شخص ثالث

• Chart.js: تجسم نمودار رادار
• GSAP: انیمیشن های صاف
• Canvas-Confetti: اثر جشن نتیجه
• فونت های Google: نوع Poppins

برای کاربران فنی که می خواهند این برنامه را ارتقا دهند

الگوریتم های کلیدی

عادی سازی

value = Math.min(100, Math.round(
  (traitScore / (traitFrequency * 5)) * 100
))

نقشه برداری از نوع شخصیت

const typeMap = {
  Extrovert: {
    title: "The Social Catalyst",
    desc: "You thrive in group settings..."
  },
  // ... other types
}

انیمیشن طرح رنگی

gsap.to(":root", {
  "--primary-hue": hueMap[trait] || 250,
  duration: 1.5,
  ease: "power2.out"
});

ملاحظات عملکرد

• پیش بارگذاری: پرونده های CSS/JS از قبل بارگذاری شده است
• بارگذاری تنبل: Chart.js در صورت تقاضا بارگذاری شده است
• بازیافت DOM: عناصر سؤال مورد استفاده مجدد
• شتاب GPU: انیمیشن های GSAP از Transforms استفاده می کنند

جنبه های امنیتی

• سیاست امنیت محتوا (CSP) سازگار است
• محافظت از XSS از طریق TextContent
• رمزگذاری URL برای لینک های اشتراک گذاری
• دستکاری دامنه ضد عفونی

نقاط پسوند

• ضمن حفظ فرکانس های صفت ، سوالات جدید اضافه کنید
• TIPEMAP را با انواع شخصیتی اضافی گسترش دهید
• برای ذخیره سازی نتیجه با API پس زمینه ادغام شوید
• پشتیبانی محلی سازی را اضافه کنید
• اجرای تصادفی سوال

به حمایت خود ادامه دهید ، به اشتراک بگذارید و بیایید با هم رشد کنیم! 🚀

📍 مرا پیدا کن: LinkedIn | متوسط ​​| بلوزکی | هکر