سلام دوست عزیز😃👋
به آزمون ورودی کارآموزی تابستانه Front-End کداستار خوش آمدید!
مسابقه به مدت ۵ ساعت ادامه خواهد داشت و در مجموع شامل ۷ سوال است که سطح آنها از آسان به سخت متفاوت خواهد بود. برای حل سوالات باید به HTML، CSS و JavaScript مسلط باشید به طوری که ۴ سوال اول مربوط به HTML و CSS هستند و ۳ سوال آخر مربوط به JavaScript میباشند.
برای حل سوالات JavaScript نیازی به تسلط بر روی Frameworkهایی مانند React و Angular نیست و صرفا دانش JavaScript پایه کافی میباشد.
سوالات به گونهای تنظیم شدهاند که با توجه به دانشی که دارید بتوانید بخشی از نمرۀ سوال را بگیرید. به عنوان مثال اگر نتوانید سوال ۳ را به طور کامل حل کنید، این امکان وجود دارد که بتوانید بخشی از سوال ۴ را حل کنید؛ بنابراین حتما به تمام سوالات مراجعه کنید.
رتبهبندی بر اساس مجموع امتیازاتی که از سوالات کسب میکنید صورت میگیرد؛ همچنین در صورتی که امتیاز دو نفر یکسان شود، کسی که سوالات را در مدتزمان کمتری حل کرده باشد، رتبۀ بهتری کسب میکند.
در صورتی که درمورد سوالی ابهام داشتید، میتوانید از قسمت «سوال بپرسید» آن را مطرح کنید.
برای کسب اطلاعات بیشتر به لینکهای زیر مراجعه کنید:
+ [آموزش کار با Quera](https://quera.org/course/assignments/2693/problems/8772)
+ [سایت کداستار](https://code-star.ir/)
+ [کانال تلگرام کداستار](https://t.me/code_star)
موفق باشید 😉✌
سلام دوست عزیز😃👋
به آزمون ورودی کارآموزی تابستانه Front-End کداستار خوش آمدید!
مسابقه به مدت ۵ ساعت ادامه خواهد داشت و در مجموع شامل ۷ سوال است که سطح آنها از آسان به سخت متفاوت خواهد بود. برای حل سوالات باید به HTML، CSS و JavaScript مسلط باشید به طوری که ۴ سوال اول مربوط به HTML و CSS هستند و ۳ سوال آخر مربوط به JavaScript میباشند.
برای حل سوالات JavaScript نیازی به تسلط بر روی Frameworkهایی مانند React و Angular نیست و صرفا دانش JavaScript پایه کافی میباشد.
سوالات به گونهای تنظیم شدهاند که با توجه به دانشی که دارید بتوانید بخشی از نمرۀ سوال را بگیرید. به عنوان مثال اگر نتوانید سوال ۳ را به طور کامل حل کنید، این امکان وجود دارد که بتوانید بخشی از سوال ۴ را حل کنید؛ بنابراین حتما به تمام سوالات مراجعه کنید.
رتبهبندی بر اساس مجموع امتیازاتی که از سوالات کسب میکنید صورت میگیرد؛ همچنین در صورتی که امتیاز دو نفر یکسان شود، کسی که سوالات را در مدتزمان کمتری حل کرده باشد، رتبۀ بهتری کسب میکند.
در صورتی که درمورد سوالی ابهام داشتید، میتوانید از قسمت «سوال بپرسید» آن را مطرح کنید.
برای کسب اطلاعات بیشتر به لینکهای زیر مراجعه کنید:
موفق باشید 😉✌
**CSS**
- Grid Layout
- Pseudo Selectors (:hover, :focus, ...)
- Pseudo Elements (::before, ::after, ...)
- Font Management
---
یکی از قابلیتهایی که شرکت Mockstar دارد این است که میتواند با استفاده از الگوریتمهای پیشرفتۀ هوش مصنوعی،
بازیهایی را که ممکن است برای بازیکنان جذاب باشد، به آنها پیشنهاد دهد.
برای این امر، نیاز است پس از آنکه کاربر در سامانه ثبتنام کرد، بازیهای مورد علاقۀ خود را انتخاب کند.
بنابراین از پمبه خواسته شده است تا این قسمت را پیادهسازی نماید.
مدیر پمبه از او خواسته است که در کد خود حتماً از `grid` برای چیدمان المانهای مختلف استفاده کند.
همچنین پمبه به تازگی متوجه شده که چیدمانهای چگال (`dense`) بسیار کاربردی هستند و قصد دارد در پروژه، آنها را امتحان کند.
## توضیحات سوال
<details class="green">
<summary>تصاویر خروجی نمونه</summary>
عرض `1920px`:

عرض `1366px`:

عرض `800px`:

</details>
میتوانید برای بررسی دقیقتر نتیجۀ نهایی،
[این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-04.mp4)
را مشاهده کنید.
## پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/139931) دانلود کنید.
<details class="blue">
<summary>ساختار فایلها</summary>
```
initial-project-04.zip
├── images
│ ├── large
│ │ ├── cod.jpg
│ │ ├── elden-ring.webp
│ │ ├── forza.webp
│ │ ├── god-of-war.jpg
│ │ ├── hellblade.jpg
│ │ ├── rainbow.webp
│ │ ├── rdr2.jpg
│ │ ├── satisfactory.png
│ │ └── spider-man.webp
│ └── small
│ ├── ac.jpg
│ ├── bioshock.jpg
│ ├── blood-born.jpg
│ ├── dark-souls.webp
│ ├── dota2.jpg
│ ├── fortnite.jpg
│ ├── horizon.jpg
│ ├── house-flipper.jpg
│ ├── mortal-kombat.jpg
│ ├── witcher.jpg
│ ├── wow.jpeg
│ └── wow2.jpg
├── dynamic.css
├── index.html
└── static.css
```
</details>
<details class="pink">
<summary>راهاندازی پروژه</summary>
+ ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
## خواستههای مسئله
- استفاده از `grid` برای ایجاد چیدمان و فاصله بین المانها
- چیدمان صحیح المانها در ابعاد مختلف صفحه نمایش
- چگالبودن چیدمان المانها
- اشغال فضای `1x1` توسط المانهایی که دارای کلاس `large` **نیستند**
- اشغال فضای `2x2` توسط المانهایی که دارای کلاس `large` **هستند**
- عدم نمایش `checkbox` پیشفرض مرورگر
- نمایش `checkbox` شخصیسازیشده
- بزرگشدن مقیاس تصویر در صورتی که ماوس بر روی آن برود
- بزرگشدن مقیاس تصویر در صورتی که `checkbox` فعال باشد
| مقدار | ویژگی | وضعیت | المان |
| :-----------------------------: | :---------------: | :-----: | :-------: |
| `1rem` | فاصله بین فرزندان | \- | ul |
| `1` | مقیاس | \- | img |
| `1.025` | مقیاس | hover | img |
| `1.025` | مقیاس | checked | img |
| `✓` | محتوا | \- | checkmark |
| `--color--checkmark-background` | رنگ پسزمینه | \- | checkmark |
| `--color--checkmark-foreground` | رنگ | \- | checkmark |
| `4.8rem` | اندازه فونت | \- | checkmark |
| `700` | وزن فونت | \- | checkmark |
| وسط المان | موقعیت | \- | checkmark |
## نکات
- شما تنها مجاز به تغییر در فایل `dynamic.css` هستید. تغییرات در باقی فایلها نادیده گرفته میشود.
- توجه کنید که داوری خودکار بر مبنای ساختار فایل `index.html` انجام میشود.
- برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── dynamic.css
```
Favorite Games
CSS
- Grid Layout
- Pseudo Selectors (:hover, :focus, ...)
- Pseudo Elements (::before, ::after, ...)
- Font Management
یکی از قابلیتهایی که شرکت Mockstar دارد این است که میتواند با استفاده از الگوریتمهای پیشرفتۀ هوش مصنوعی،
بازیهایی را که ممکن است برای بازیکنان جذاب باشد، به آنها پیشنهاد دهد.
برای این امر، نیاز است پس از آنکه کاربر در سامانه ثبتنام کرد، بازیهای مورد علاقۀ خود را انتخاب کند.
بنابراین از پمبه خواسته شده است تا این قسمت را پیادهسازی نماید.
مدیر پمبه از او خواسته است که در کد خود حتماً از grid
برای چیدمان المانهای مختلف استفاده کند.
همچنین پمبه به تازگی متوجه شده که چیدمانهای چگال (dense
) بسیار کاربردی هستند و قصد دارد در پروژه، آنها را امتحان کند.
توضیحات سوال🔗
تصاویر خروجی نمونه
عرض 1920px
:

عرض 1366px
:

عرض 800px
:

میتوانید برای بررسی دقیقتر نتیجۀ نهایی،
این فیلم
را مشاهده کنید.
پروژه اولیه🔗
پروژه اولیه را از این لینک دانلود کنید.
ساختار فایلها
راهاندازی پروژه
- ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید.
- سپس فایل
index.html
را در مرورگر خود باز کنید.
خواستههای مسئله🔗
- استفاده از
grid
برای ایجاد چیدمان و فاصله بین المانها
- چیدمان صحیح المانها در ابعاد مختلف صفحه نمایش
- چگالبودن چیدمان المانها
- اشغال فضای
1x1
توسط المانهایی که دارای کلاس large
نیستند
- اشغال فضای
2x2
توسط المانهایی که دارای کلاس large
هستند
- عدم نمایش
checkbox
پیشفرض مرورگر
- نمایش
checkbox
شخصیسازیشده
- بزرگشدن مقیاس تصویر در صورتی که ماوس بر روی آن برود
- بزرگشدن مقیاس تصویر در صورتی که
checkbox
فعال باشد
مقدار |
ویژگی |
وضعیت |
المان |
1rem |
فاصله بین فرزندان |
- |
ul |
1 |
مقیاس |
- |
img |
1.025 |
مقیاس |
hover |
img |
1.025 |
مقیاس |
checked |
img |
✓ |
محتوا |
- |
checkmark |
--color--checkmark-background |
رنگ پسزمینه |
- |
checkmark |
--color--checkmark-foreground |
رنگ |
- |
checkmark |
4.8rem |
اندازه فونت |
- |
checkmark |
700 |
وزن فونت |
- |
checkmark |
وسط المان |
موقعیت |
- |
checkmark |
نکات🔗
- شما تنها مجاز به تغییر در فایل
dynamic.css
هستید. تغییرات در باقی فایلها نادیده گرفته میشود.
- توجه کنید که داوری خودکار بر مبنای ساختار فایل
index.html
انجام میشود.
- برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.