سلام دوست من😃👋
به مسابقه Front-End بله کمپ ۶ خوش آمدید!
مسابقه به مدت ۲ ساعت ادامه خواهد داشت و در مجموع شامل ۳ سوال است. برای حل سوالات باید تسلط خوبی روی کتابخانه React داشته باشید.
سوالات به گونهای تنظیم شدهاند که با توجه به دانشی که دارید بتوانید بخشی از نمرۀ سوال را بگیرید. به عنوان مثال اگر نتوانید سوال ۲ را به طور کامل حل کنید، این امکان وجود دارد که بتوانید بخشی از سوال ۲ را حل کنید؛ بنابراین حتما به تمام سوالات مراجعه کنید.
رتبهبندی بر اساس مجموع امتیازاتی که از سوالات کسب میکنید صورت میگیرد؛ همچنین در صورتی که امتیاز دو نفر یکسان شود، کسی که سوالات را در مدتزمان کمتری حل کرده باشد، رتبۀ بهتری کسب میکند.
در صورتی که درمورد سوالی ابهام داشتید، میتوانید از قسمت «سوال بپرسید» آن را مطرح کنید.
برای کسب اطلاعات بیشتر به لینک زیر مراجعه کنید:
+ [آموزش کار با Quera (فرانتاند)](https://quera.org/course/assignments/5546/problems)
موفق باشید 😉✌
سلام دوست من😃👋
به مسابقه Front-End بله کمپ ۶ خوش آمدید!
مسابقه به مدت ۲ ساعت ادامه خواهد داشت و در مجموع شامل ۳ سوال است. برای حل سوالات باید تسلط خوبی روی کتابخانه React داشته باشید.
سوالات به گونهای تنظیم شدهاند که با توجه به دانشی که دارید بتوانید بخشی از نمرۀ سوال را بگیرید. به عنوان مثال اگر نتوانید سوال ۲ را به طور کامل حل کنید، این امکان وجود دارد که بتوانید بخشی از سوال ۲ را حل کنید؛ بنابراین حتما به تمام سوالات مراجعه کنید.
رتبهبندی بر اساس مجموع امتیازاتی که از سوالات کسب میکنید صورت میگیرد؛ همچنین در صورتی که امتیاز دو نفر یکسان شود، کسی که سوالات را در مدتزمان کمتری حل کرده باشد، رتبۀ بهتری کسب میکند.
در صورتی که درمورد سوالی ابهام داشتید، میتوانید از قسمت «سوال بپرسید» آن را مطرح کنید.
برای کسب اطلاعات بیشتر به لینک زیر مراجعه کنید:
موفق باشید 😉✌
ظاهر کلی برنامه بدین صورت است:

# پروژه اولیه
پروژه اولیه را از
[این لینک](/contest/assignments/54144/download_problem_initial_project/183309/)
دانلود کنید.
<details class="green">
<summary> ساختار فایلها </summary>
```
graph
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.js
│ ├── Graph.js
│ ├── index.css
│ └── index.js
├── package-lock.json
└── package.json
```
</details>
<details class="violet">
<summary> راه اندازی پروژه</summary>
برای اجرای پروژه، باید`NodeJS` و `npm` را از قبل نصب کرده باشید.
+ ابتدا پروژهی اولیه را دانلود و از حالت فشرده خارج کنید.
+ در پوشهی `steps` ، دستور `npm install` را برای نصب نیازمندیها اجرا کنید.
+ در همین پوشه، دستور `npm start` را برای راهاندازی پروژه اجرا کنید.
</details>
# توضیحات
در این سوال شما باید الگوریتمهای `BFS` و `DFS` که را طوری تغییر دهید مسیری که این الگوریتمها سرچ را انجام میدهند تا هدف نمایش داده شود.
### پراپرتیهای کامپوننت Graph:
- `highlightNode`: ایدی گره برای *highlight* کردن که برای نمایش مسیر استفاده میشود.
- `startNode`: ایدی گره شروع که با اولین کلیک روی گره مشخص میشود.
- `goalNode`: ایدی گرهای که برای آن جستجو انجام میدهیم که با دومین کلیک روی گره مشخص میشود.
- `onNodeClick`: تابعی که هنگام کلیک شدن گره با ایدی ان گره صدا زده میشود.
- `graph`: گراف برای نمایش
اولین کلیک روی هر گرهی، گره شروع و دومین کلیک روی هر گرهی گره پایان را مشخص میکند. وقتی دکمه "Clear" کلیک شد باید این دو گره پاک شوند.
زمانی که بین هر بار highlight کردن مسیر 500 میلیثانیه است. بعداز کلیک شدن روی "DFS" یا "BFS" الگورتیم مربوطه از گره شروع، شروع به نمایش میشود و بعداز اینکه گره هدف را پیدا کرد یا بعداز جستجوی تمام گرهها به هدف نرسید، 500 میلیثانیه بعد از highlight اخرین گره، از highlight خارج میشود.
# نکات
+ شما تنها مجاز به اعمال تغییرات درون فایل `App.js` هستید.
+ برای آشنایی بیشتر با الگوریتم `Depth-first search` میتوانید به این [لینک](https://en.wikipedia.org/wiki/Depth-first_search) و برای الگوریتم `Breadth-first search` به این [لینک](https://en.wikipedia.org/wiki/Breadth-first_search) مراجعه کنید.
+ به هنگام ثبت پاسخ، فقط فایل `App.js` یا پروژه را با ساختار زیر ارسال کنید:
```
[your-zip-file-name].zip
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.js
│ ├── Graph.js
│ ├── index.css
│ └── index.js
├── package-lock.json
└── package.json
```
جستجو در گراف
ظاهر کلی برنامه بدین صورت است:

پروژه اولیه🔗
پروژه اولیه را از
این لینک
دانلود کنید.
ساختار فایلها
راه اندازی پروژه
برای اجرای پروژه، بایدNodeJS
و npm
را از قبل نصب کرده باشید.
- ابتدا پروژهی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشهی
steps
، دستور npm install
را برای نصب نیازمندیها اجرا کنید.
- در همین پوشه، دستور
npm start
را برای راهاندازی پروژه اجرا کنید.
توضیحات🔗
در این سوال شما باید الگوریتمهای BFS
و DFS
که را طوری تغییر دهید مسیری که این الگوریتمها سرچ را انجام میدهند تا هدف نمایش داده شود.
پراپرتیهای کامپوننت Graph:🔗
highlightNode
: ایدی گره برای highlight کردن که برای نمایش مسیر استفاده میشود.
startNode
: ایدی گره شروع که با اولین کلیک روی گره مشخص میشود.
goalNode
: ایدی گرهای که برای آن جستجو انجام میدهیم که با دومین کلیک روی گره مشخص میشود.
onNodeClick
: تابعی که هنگام کلیک شدن گره با ایدی ان گره صدا زده میشود.
graph
: گراف برای نمایش
اولین کلیک روی هر گرهی، گره شروع و دومین کلیک روی هر گرهی گره پایان را مشخص میکند. وقتی دکمه "Clear" کلیک شد باید این دو گره پاک شوند.
زمانی که بین هر بار highlight کردن مسیر 500 میلیثانیه است. بعداز کلیک شدن روی "DFS" یا "BFS" الگورتیم مربوطه از گره شروع، شروع به نمایش میشود و بعداز اینکه گره هدف را پیدا کرد یا بعداز جستجوی تمام گرهها به هدف نرسید، 500 میلیثانیه بعد از highlight اخرین گره، از highlight خارج میشود.
نکات🔗
- شما تنها مجاز به اعمال تغییرات درون فایل
App.js
هستید.
- برای آشنایی بیشتر با الگوریتم
Depth-first search
میتوانید به این لینک و برای الگوریتم Breadth-first search
به این لینک مراجعه کنید.
- به هنگام ثبت پاسخ، فقط فایل
App.js
یا پروژه را با ساختار زیر ارسال کنید:
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.