در این سوال شما می‌بایست یک فایل ‍HTML را درون یک فایل ‍HTML دیگر بدون استفاده از ‍js و تنها به استفاده از قابلیت‌های زبان HTML نمایش دهید (برای انجام این کار می‌توانید از تگ iframe استفاده نمائید). یک فایل به نام index.html بسازید و فایل ‍helper.html را در آن نمایش دهید.

پروژه اولیه🔗

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

simple-html
└── helper.html

نکات🔗

• توجه کنید که داوری خودکار بر مبنای نام کلاس‌ها انجام می‌شود.

• عنصری که فایل ‍helper.html را در آن نمایش می‌دهید باید شناسه (id) با مقدار ‍root را داشته باشد.

• پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip
└── index.html

python3 -m unittest sample_test.py

مهارت‌های لازم:

• آشنایی با CSS

در این سوال قصد داریم ستون‌های واکنش‌گرا طراحی کنیم. با تغییر اندازه‌ی عرض این صفحه، اندازه این ستون‌ها با توجه به کلاس و اندازه صفحه تغییر می‌کند.

پروژه اولیه🔗

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

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

python3 -m unittest sample_test.py

مهارت‌های لازم:

• آشنایی با ReactJS

پروژه اولیه🔗

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

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 در ری‌اکت آشنایی داشته باشید. در صورتی که آشنا نیستید می‌توانید به این بخش از مستندات ری‌اکت مراجعه کنید.

پروژه از فایل‌های زیر تشکیل شده است:

• contexts/index.js: شما باید در این فایل Context‍ خود را ایجاد کنید. (Context ایجاد شده بایستی به صورت default، exportشود.)
• App.js: این کامپوننت یک کامپوننت دیگر به نام Navbar را رندر می کند. شما باید در اینجا یک Provider ایجاد کنید تا تمامی کامپوننت‌هایی که در App رندر می‌شوند به value ایجاد شده در Provider دسترسی داشته باشند.
• Language.js : شما باید در این کامپوننت توابع و متغیرهایی که قرار است با دیگر کامپوننت‌ها به اشتراک گذاشته شوند را ایجاد کنید (همه این متغیرها بایستی به سایر کامپونت‌ها ارسال شوند). موارد زیر را در این کامپوننت تکمیل نمائید.
  • changeToEnglish() : وظیفه این تابع تغییر زبان به انگلیسی می‌باشد.
  • changeToPersian() : وظیفه این تابع تغییر زبان به فارسی می‌باشد.
  • هم‌چنین طراحی state این کامپوننت در حالتی که زبان سایت تغییر می‌کند یکی از اشکال زیر را دارا می باشد:

{
     language: "Persian",
     words: {
        home: "خانه",
        events: "رویداد ها",
        aboutUs: "درباره ما",
        contactUs: "تماس با ما",
        language: "زبان"
    }
}

{
      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 در فایل ارسالی نباشد.
• تعدادی تست نمونه در پروژه اولیه وجود دارد که با استفاده از آن‌ها می‌توانید کد خود را تست کنید.

مهارت‌های لازم:

• آشنایی با ReactJS
• کدخوانی

پروژه اولیه🔗

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

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 اضافه می‌کند. هر عضو این لیست ساختار زیر را دارد:

{
        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
• کدخوانی

پروژه اولیه🔗

پروژه اولیه را از اینجا دانلود کنید.

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

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 برنامه بدین صورت است:

{
    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 باشد.

{
    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 در فایل ارسالی نباشد.