--------------------------------------------------
در این سوال شما می‌بایست یک فایل `HTML` را درون یک فایل `HTML` دیگر بدون استفاده از `js` و تنها به استفاده از قابلیت‌های زبان `HTML` نمایش دهید (برای انجام این کار می‌توانید از تگ `iframe` استفاده نمائید). یک فایل به نام `index.html` بسازید و فایل `helper.html` را در آن نمایش دهید.
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/qoGfRuQKT7/simple-html.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
simple-html
└── helper.html
```
# نکات
- توجه کنید که داوری خودکار بر مبنای نام کلاس‌ها انجام می‌شود.
- عنصری که فایل `helper.html` را در آن نمایش می‌دهید باید شناسه (`id`) با مقدار `root` را داشته باشد.
- پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── index.html
```
<details class="blue">
<summary>
توضیحات تست نمونه
</summary>
برای این سوال تست‌هایی با استفاده از زبان پایتون و با کمک `selenium` نوشته شده است. یک نمونه از این تست‌ها در اختیار شما قرار دارد و شما می‌توانید آن را با کمک دستور زیر اجرا کنید. تست‌های نمونه این سوال را می‌توانید از [اینجا](https://quera.ir/qbox/download/smvdDNMWmf/sample_test.py) دانلود کنید.
```
python3 -m unittest sample_test.py
```
</details>
Simple HTML
**مهارت‌های لازم:**
+ آشنایی با `CSS`
--------------------------------------------------
در این سوال قصد داریم ستون‌های واکنش‌گرا طراحی کنیم.
با تغییر اندازه‌ی عرض این صفحه، اندازه این ستون‌ها با توجه به کلاس و اندازه صفحه تغییر می‌کند.
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/ZFganfoDwi/responsive-column.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
responsive-column
├── index.html
└── styles.css
```
# جزئیات
کلاس‌های زیر را با توجه به توضیحات گفته شده پیاده سازی نمائید.
- کلاس `row`: یک ردیف در صفحه ایجاد می‌کند.در هر ردیف حداکثر ۶ ستون و حداقل ۱ ستون قرار می‌گیرد.
- کلاس `col`: همواره ستون‌هایی با عرض یکسان ایجاد می‌کند. به عبارتی اگر در داخل یک تگ `div` با کلاس `row` چند تگ `div`با کلاس `col` وجود داشته باشد، عرض همه تگ‌های `div` با کلاس `col` یکسان است.
- کلاس `col-n`: عرض عنصر را به میزان $n$ واحد از عرض عنصر `parent` تنظیم می‌کند.
- کلاس `col-sm-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه از `576px` بزرگتر باشد روی عنصر اعمال می‌شود.
- کلاس `col-md-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه از `768px` بزرگتر باشد روی عنصر اعمال می‌شود.
- کلاس `col-lg-n`: همانند کلاس `col-n`، با فرق اینکه این کلاس هنگامی که عرض صفحه بزرگتر از `992px` باشد روی عنصر اعمال می‌شود.
# نکات
- توجه کنید که اولویت اعمال همیشه برای کلاس‌هایی است که در `media-query` بالاتر قرار دارند.
- همچنین در صورتی که عرض صفحه خارج از محدوده‌ی یک کلاس قرار بگیرد، عرض المانی که دارای آن کلاس است `100%` می‌شود. به عبارتی اگر یک المان دارای کلاس `col-lg-n`باشد در صفحه با عرض کمتر از `992px`، در صورتی که این المان دارای کلاس دیگری نباشد، عرض آن `100%` می‌شود.
- توجه کنید که داوری خودکار بر مبنای نام کلاس‌ها انجام می‌شود.
- پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── styles.css
```
<details class="blue">
<summary>
توضیحات تست نمونه
</summary>
برای این سوال تست‌هایی با استفاده از زبان پایتون و با کمک `selenium` نوشته شده است. یک نمونه از این تست‌ها در اختیار شما قرار دارد و شما می‌توانید آن را با کمک دستور زیر اجرا کنید. تست‌های نمونه این سوال را می‌توانید از [اینجا](https://quera.ir/qbox/download/5gTsCJQ3FD/sample_test%20(1).py) دانلود کنید.
```
python3 -m unittest sample_test.py
```
</details>
ستون‌های واکنش‌گرا
**مهارت‌های لازم:**
+ آشنایی با `ReactJS`
--------------------------------------------------
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/jTE22Jo1lA/react-context.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
react-context
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── components
│ │ ├── App.js
│ │ ├── Language.js
│ │ └── Navbar.js
│ ├── contexts
│ │ └── index.js
│ ├── index.css
│ └── index.js
├── README.md
├── package.json
└── yarn.lock
```
# راه‌اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `react-context` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه را ببینید.
# جزئیات
 در این سوال شما باید قابلیت دو زبانه را برای یک وب‌سایت ساده پیاده‌سازی نمائید. برای پیاده‌سازی این قابلیت شما می‌بایست با مفهوم `Context` در ری‌اکت آشنایی داشته باشید. در صورتی که آشنا نیستید می‌توانید به [این بخش از مستندات ری‌اکت](https://reactjs.org/docs/context.html) مراجعه کنید.
پروژه از فایل‌های زیر تشکیل شده است:
- `contexts/index.js`: شما باید در این فایل `Context` خود را ایجاد کنید. (Context ایجاد شده بایستی به صورت `default`، `export`شود.)
- `App.js`: این کامپوننت یک کامپوننت دیگر به نام `Navbar` را رندر می کند. شما باید در اینجا یک `Provider` ایجاد کنید تا تمامی کامپوننت‌هایی که در `App` رندر می‌شوند به `value` ایجاد شده در `Provider` دسترسی داشته باشند.
- `Language.js` : شما باید در این کامپوننت توابع و متغیرهایی که قرار است با دیگر کامپوننت‌ها به اشتراک گذاشته شوند را ایجاد
کنید (همه این متغیرها بایستی به سایر کامپونت‌ها ارسال شوند). موارد زیر را در این کامپوننت تکمیل نمائید.
- `changeToEnglish()` : وظیفه این تابع تغییر زبان به انگلیسی می‌باشد.
- `changeToPersian()` : وظیفه این تابع تغییر زبان به فارسی می‌باشد.
- همچنین طراحی `state` این کامپوننت در حالتی که زبان سایت تغییر می‌کند یکی از اشکال زیر را دارا می باشد:
``` js
{
language: "Persian",
words: {
home: "خانه",
events: "رویداد ها",
aboutUs: "درباره ما",
contactUs: "تماس با ما",
language: "زبان"
}
}
```
``` js
{
language: "English",
words: {
home: "Home",
events: "Events",
aboutUs: "About Us",
contactUs: "Contact Us",
language: "Language"
}
}
```
- `Navbar.js`: این کامپوننت به عنوان یک `Consumer` از داده‌های به اشتراک گذاشته شده استفاده می‌کند. همچنین در این کامپوننت باید بتوان زبان سایت را تغییر داد.
# نکات
- `Provider` شما باید دو تابع با نام‌های `changeToPersian` و `changeToEnglish` که وظیفه‌شان تغییر زبان سایت می‌باشد و همچنین `language` و `words` را از `state` کامپوننت `Language.js` به اشتراک بگذارد.
- شما تنها مجاز به اعمال تغییر در فایل‌های `components/*` و `contexts/index.js` هستید.
- پس از اعمال تغییرات، پروژه را _zip_ کرده و ارسال کنید.
دقت کنید که پوشه‌ی `node_modules` در فایل ارسالی نباشد.
- تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آنها می‌توانید کد خود را تست کنید.
React Context
**مهارت‌های لازم**:
+ آشنایی با `ReactJS`
+ کدخوانی
--------------------------------------------------
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/3BuUXtya3j/guess-word.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
guess-word-master
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── components
│ │ ├── Congrats.js
│ │ └── GuessedWords.js
│ ├── containers
│ │ ├── App.js
│ │ └── Input.js
│ ├── index.css
│ └── index.js
├── README.md
├── package.json
└── yarn.lock
```
# راه‌اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `guess-word` ، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه را ببینید.
# جزئیات
همان‌طور که مشاهده می‌کنید در این پروژه چهار `Component` موجود است. ابتدا آنها را مطالعه کنید تا با نحوه‌ی کارکرد پروژه آشنا شوید. شما باید چهار فایل زیر را طبق توضیحات تکمیل کنید.
- کامپوننت `App.js`: در این کامپوننت سه تابع ناقص وجود دارد. طبق توضیحات آنها را پیاده‌سازی کنید.
- تابع `getLetterMatchCount(guessedWord, secretWord)`: این تابع وظیفه این را دارد که با قرار دادن `guessedWord` به عنوان کلمه مبنا، تعداد حروف مشترک بین دو کلمه را بازگرداند.
- تابع `setSecretWord(secretWord)`: این تابع یک کلمه را به عنوان آرگومان دریافت می کند و آن را در `state` ذخیره می‌کند.
- تابع `guessWord(guessedWord)`: این تابع چک می‌کند که آیا کلمه حدس زده شده همان کلمه مخفی می‌باشد یا خیر. در صورتی که کلمه مخفی باشد متغیر `this.state.success` به `true` تغییر می‌کند. در صورتی که کلمه حدس زده شده کلمه مخفی نباشد آن را در لیست `guessedWords` اضافه می‌کند. هر عضو این لیست ساختار زیر را دارد:
```js
{
guessedWord : string,
letterMatchCount : integer
}
```
`letterMatchCount` همان تعداد حروف مشترک بین دو کلمه می‌باشد.
- کامپوننت`Input.js`: در این کامپوننت یک تابع ناقص برای پیاده‌سازی وجود دارد.
- تابع `onSubmitGuessedWord(e)`: این تابع کلمه وارد شده در فرم را به لیست `this.state.guessedWords` اضافه می‌کند.طول کلمه اضافه شده حتما باید غیر صفر باشد.
- کامپوننت `Congrats`: این کامپوننت در صورتی که کلمه درست حدس زده شده باشد پیغام `Congratulations! You guessed the word!` را نمایش می دهد.
- کامپوننت `GuessedWords` : این تابع لیست کلمات حدس زده شده را نمایش می‌دهد.در صورتی که هیچ کلمه حدس زده شده‌ای وجود نداشته باشد، این تابع پیغام `Try to guess the secret word!` را نمایش می‌دهد. در غیر این صورت این تابع کلمات را در یک جدول رندر می‌کند.
# نکات
- طبیعتا پس از حدس درست کلمه مخفی کلمه دیگری قابل حدس نمی باشد.
- تگی که پیغام `Congratulations! You guessed the word!` را نمایش می‌دهد حتما می‌بایست دارای `id={"congrats-alert"}` و تگی که پیغام `Try to guess the secret word!` را نمایش می‌دهد می بایست دارای `id={"guess-instruction"}` باشد.
- همچنین کلمات حدس زده شده باید در تگ با `id={"guessed-word"}` رندر شوند.
- شما تنها مجاز به اعمال تغییر در فایل‌های `containers/*`، `components/*` هستید.
پس از اعمال تغییرات، پروژه را *zip* کرده و ارسال کنید.
- دقت کنید که پوشه‌ی `node_modules` در فایل ارسالی نباشد.
- تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آنها می‌توانید کد خود را تست کنید.
حدس کلمه
**مهارت‌های لازم:**
+ آشنایی با `ReactJS`
+ آشنایی با `Redux`
+ کدخوانی
--------------------------------------------------
# پروژه اولیه
پروژه اولیه را از [اینجا](https://quera.ir/qbox/download/Mpx6d9am2D/Conway-Game-of-Life.zip) دانلود کنید.
ساختار فایل‌های این پروژه به صورت زیر است.
```
Conway-Game-of-Life
├── public
│ ├── index.html
│ └── manifest.json
├── src
│ ├── actions
│ │ └── index.js
│ ├── components
│ │ ├── Button.js
│ │ └── Cell.js
│ ├── constants
│ │ └── index.js
│ ├── containers
│ │ ├── Control.js
│ │ ├── Counter.js
│ │ └── Grid.js
│ ├── helpers
│ │ └── grid.js
│ ├── reducers
│ │ ├── counter.js
│ │ ├── grid.js
│ │ ├── index.js
│ │ └── status.js
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ └── store.js
├── README.md
├── package.json
└── yarn.lock
```
# راه‌اندازی پروژه
**برای اجرای پروژه، باید `NodeJS` و `npm` را از قبل نصب کرده باشید.**
- ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
- در پوشه‌ی `Conway-game-of-life`، دستور `npm install` را برای نصب نیازمندی‌ها اجرا کنید.
- در همین پوشه، دستور `npm start` را برای راه‌اندازی پروژه اجرا کنید.
- پس از انجام موفق این مراحل، با مراجعه به آدرس `http://localhost:3000/` می‌توانید نتیجه را ببینید.
# جزئیات
طراحی *state* برنامه بدین صورت است:
``` js
{
counter: 0,
grid: [Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10), Array(10)],
status: {
timerId: null, isRunning: false
}
}
```
- عناصر هر یک از آرایه‌های `grid` به صورت زیر می‌باشد.`value` می‌تواند `true` یا `false` باشد.
``` js
{
status: value,
}
```
- `counter`: نشان‌دهنده تعداد نسل‌ها می‌باشد.
- `grid`: یک آرایه دو بعدی (ماتریس) که به فواصل زمانی معین می‌بایست رندر شود. همچنین الگوریتم شما روی این آرایه دو بعدی می‌بایست اجرا شود.
- `status.timerId`: نشان‌دهنده `id` تایمری است که شما می‌بایست آن را بوجود بیاورید و `id` آنرا ذخیره کنید.
- `status.isRunning`: وضعیت بازی را مشخص می‌کند که آیا در حال اجرا می‌باشد یا خیر.
داخل فایل `actions/index.js` اطلاعات مربوط به *action*(عملیات)های شما قرار دارد.
در این پروژه هشت نوع *action* وجود دارد:
- `START_GAME`: با گرفتن `id` تایمر بازی را آغاز می‌کند. همچنین می‌بایست وضعیت بازی از `false` به `true` تغییر کرده و همچنین `status.timerId` مقدار دهی شود. همچنین الگوریتم شما باید هر ۵۰ میلی‌ثانیه یک‌بار بر روی ماتریس اجرا شود.
- `STOP_GAME`: وضعیت بازی را تغییر می‌دهد. دقیقا برعکس عملیات `START_GAME` می‌باشد. همچنین `status.timerId` می‌بایست `null` شود.
- `TICK`: با فراخوانی این *action* یک‌بار الگوریتم شما می‌بایست روی ماتریس اجرا شود. همچنین یک واحد می‌بایست به `counter` اضافه شود.
- `TOGGLE_ALIVE`: این *action* `(x,y)` به عنوان ورودی می‌گیرد. این مختصات یک سلول در ماتریس می‌باشد که باید وضعیت آن با کلیک بر روی آن عوض شود.
- `RESET_GAME`: این *action* ماتریس را خالی می‌کند و تمام سلول‌های ماتریس به وضعیت مرده تبدیل می‌شوند.
- `RANDOM_MAP`: این *action* وضعیت سلول‌های ماتریس را به صورت رندم تغییر می‌دهد.
- `SET_GRID_HEIGHT`: این *action* ارتفاع ماتریس را تغییر می‌دهد.
- `SET_GRID_WIDTH`: این *action* طول ماتریس را تغییر می‌دهد.
همچنین در مورد فایل `helpers/grid.js` باید موارد زیر را در کلاس `Grid` تکمیل نمایید.
- تابع `makeGrid`: این تابع وظیفه ساختن ماتریس را دارد.
- تابع `countNeighbors` : این تابع با دریافت کردن مختصات یک سلول تعداد همسایه‌های زنده آنرا برمی‌گرداند.
- تابع `nextGeneration`: وظیفه این تابع تولید کردن ماتریس نسل بعدی از روی ماتریس فعلی می‌باشد.
- تابع `setGridWidth`: این تابع طول ماتریس را تنظیم می‌کند.
- تابع `setGridHeight`: این تابع ارتفاع ماتریس را تنظیم می‌کند.
# نکات
- دو سلول را مجاور می‌نامیم اگر حداکثر یک ستون و یک سطر با هم فاصله داشته‌باشند. (فرض می‌شود که سطر اول و آخر و همچنین ستون اول و آخر با هم مجاور هستند.) بنابراین هر خانه دقیقا ۸ همسایه دارد.
- شما تنها مجاز به اعمال تغییر در فایل‌های `components/Cell.js` و `containers/*`، `help/grid.js`، `reducers/status.js` ، `reducers/counter.js` ،`reducers/grid.js` هستید.
- پس از اعمال تغییرات، پروژه را _zip_ کرده و ارسال کنید.
- تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آنها می‌توانید کد خود را تست کنید.
دقت کنید که پوشه‌ی `node_modules` در فایل ارسالی نباشد.