در این سؤال باید یک مسابقه چند سوالی طراحی کنید؛ به این صورت که کاربر با هر بار پاسخ دادن به یک سوال، به سوال بعدی می‌رود و در نهایت امتیاز نهایی که کسب کرده، به او نشان داده می‌شود.


Image 1

پروژه اولیه

پروژه اولیه را از اینجا دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

quiz
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── __tests__
│   │   └── AppSample.test.js
│   ├── actions
│   │   └── index.js
│   ├── constants
│   │   └── actionTypes.js
│   ├── reducers
│   │   ├── index.js
│   │   ├── level.js
│   │   ├── person.js
│   │   └── quiz.js
│   ├── App.css
│   ├── App.js
│   ├── counter.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── question.js
│   ├── questionDetails.js
│   ├── scoreDetails.js
│   └── serviceWorker.js
├── package-lock.json
├── package.json
└── pnpm-lock.yaml
Plain text

راه‌اندازی پروژه

برای اجرای پروژه، باید NodeJS و npm را از قبل نصب کرده باشید.

  • ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
  • در پوشه‌ی errors-boundary ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
  • در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
  • پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه را ببینید.

جزئیات

طراحی Redux به صورت زیر است:

quiz: {
	questions: [
		{
			title: string,
			options: [
			{
				key: number,
				title: string
			},
			...
			],
			answerKey: number,
			score: number
		},
		...
	]
},
level: {
	currentLevel: number,
	isFinished: boolean,
	levels: number
},
person: {
	score: number,
	rightAnswers: number,
	wrongAnswers: number,
	noAnswers: number
}
JavaScript

توضیحات quiz ‍‍

  • ویژگی questions: آرایه‌ای از سوالات که شامل موارد زیر است:
  • ویژگی options: آرایه‌ای از گزینه‌های یک سوال که دارای یک کلید و متن گزینه می‌باشد.
  • ویژگی answerKey: کلید پاسخ صحیح
  • ویژگی score: امتیاز سوال

توضیحات level ‍‍

  • ویژگی currentLevel: مرحله جاری
  • ویژگی isFinished: نشان دهنده اتمام بازی
  • ویژگی levels: تعداد مراحل بازی

توضیحات person ‍‍

  • ویژگی score: امتیاز بازیکن
  • ویژگی rightAnswers: تعداد پاسخ صحیح
  • ویژگی wrongAnswers: تعداد پاسخ اشتباه
  • ویژگی noAnswers: تعداد سوالات بی‌پاسخ
  • بعد از کلیک روی هر گزینه، در صورت درست بودن پاسخ امتیاز سوال به کاربر اضافه و در صورت پاسخ اشتباه ۱۰ امتیاز از او کم می‌شود.
  • در صورت پاسخ به یک سوال یا اتمام ۵ ثانیه، بازی به سوال بعدی می‌رود.
  • بعد از لود شدن صفحه، کاربر ۵ ثانیه برای پاسخ به هر سوال فرصت دارد. در صورت جواب ندادن به سوال، بدون گرفتن امتیاز به سوال بعد می‌رود.
  • بعد از اخرین مرحله، امتیاز نهایی و تعداد پاسخ‌های درست و غلط و تعداد سوالات بدون پاسخ سوالات به کاربر نمایش داده می‌شود.

نکات

  • شما تنها مجاز به اعمال تغییر در فایل‌های question.js ،level.js، ‍‍person.js و quiz.js هستید.
  • تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.
  • پس از اعمال تغییرات، پروژه را ZIP کرده و ارسال کنید. دقت کنید که فقط می‌توانید فایل‌های بالا را تغییر دهید.

ارسال پاسخ برای این سؤال
فایلی انتخاب نشده است.