در این سؤال باید یک مسابقه چند سوالی طراحی کنید؛ به این صورت که کاربر با هر بار پاسخ دادن به یک سوال، به سوال بعدی میرود و در نهایت امتیاز نهایی که کسب کرده، به او نشان داده میشود.
------
![Image 1](https://quera.ir/qbox/view/ZpXzUTEAiZ/demo.gif)
# پروژه اولیه
پروژه اولیه را از
[اینجا](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* کرده و ارسال کنید. دقت کنید که فقط میتوانید فایلهای بالا را تغییر دهید.