در این سؤال باید یک مسابقه چند سوالی طراحی کنید؛ به این صورت که کاربر با هر بار پاسخ دادن به یک سوال، به سوال بعدی می‌رود و در نهایت امتیاز نهایی که کسب کرده، به او نشان داده می‌شود. ------  # پروژه اولیه پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/EtkQkSv0AL/quiz.zip) دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است. ``` 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 ``` <details class="brown"> <summary> راه‌اندازی پروژه </summary> **برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.** - ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید. - در پوشه‌ی `errors-boundary` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید. - در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید. - پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه را ببینید. </details> # جزئیات طراحی *Redux* به صورت زیر است: ```javascript 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 } ``` <details class="blue"> <summary> توضیحات `quiz` ‍‍ </summary> + ویژگی `questions`: آرایه‌ای از سوالات که شامل موارد زیر است: + ویژگی `options`: آرایه‌ای از گزینه‌های یک سوال که دارای یک کلید و متن گزینه می‌باشد. + ویژگی `answerKey`: کلید پاسخ صحیح + ویژگی `score`: امتیاز سوال </details> <details class="blue"> <summary> توضیحات `level` ‍‍ </summary> - ویژگی `currentLevel`: مرحله جاری - ویژگی `isFinished`: نشان دهنده اتمام بازی - ویژگی `levels`: تعداد مراحل بازی </details> <details class="blue"> <summary> توضیحات `person` ‍‍ </summary> - ویژگی `score`: امتیاز بازیکن - ویژگی `rightAnswers`: تعداد پاسخ صحیح - ویژگی `wrongAnswers`: تعداد پاسخ اشتباه - ویژگی `noAnswers`: تعداد سوالات بی‌پاسخ </details> - بعد از کلیک روی هر گزینه، در صورت درست بودن پاسخ امتیاز سوال به کاربر اضافه و در صورت پاسخ اشتباه ۱۰ امتیاز از او کم می‌شود. - در صورت پاسخ به یک سوال یا اتمام ۵ ثانیه، بازی به سوال بعدی می‌رود. - بعد از لود شدن صفحه، کاربر ۵ ثانیه برای پاسخ به هر سوال فرصت دارد. در صورت جواب ندادن به سوال، بدون گرفتن امتیاز به سوال بعد می‌رود. - بعد از اخرین مرحله، امتیاز نهایی و تعداد پاسخ‌های درست و غلط و تعداد سوالات بدون پاسخ سوالات به کاربر نمایش داده می‌شود. # نکات + شما تنها مجاز به اعمال تغییر در فایل‌های `question.js` ،`level.js`، ‍‍`person.js` و `quiz.js` هستید. + تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید. + پس از اعمال تغییرات، پروژه را *ZIP* کرده و ارسال کنید. دقت کنید که فقط می‌توانید فایل‌های بالا را تغییر دهید.

حل سؤال در بانک سؤالات