جدول‌بازی


در این سوال قصد داریم یک جدول به شکل زیر طراحی کنیم:

توضیح تصویر

بخشی از پیاده‌سازی در قالب دو فایل به نام‌های table.html و style.css انجام شده‌ است. شما باید با توجه به جزئیاتی که در ادامه می‌آیند، فایل table.html را تکمیل کنید.

فایل‌های اولیه🔗

فایل‌های اولیه را از اینجا دانلود کنید. ساختار این فایل‌ها به شرح زیر است:

initial.zip
├── table.html
└── style.css
Plain text

جزئیات🔗

باید یک <table> را به گونه‌ای به <body> در فایل table.html اضافه کنید که:

  • دارای 16 خانه مانند شکل فوق باشد.
  • شناسه‌ی هر خانه به صورت cell_i باشد که i عدد داخل آن خانه است.
  • تنها از tag ‌های td ، tr ، و table استفاده کنید؛ چراکه برای این موارد در فایل style.css ویژگی‌هایی در نظر گرفته شده که آن‌ها را در مکان مورد نظر برای داوری در صفحه قرار می‌دهد.

فایل table.html ‌را پس از تکمیل، فشرده و ارسال کنید.

نکات🔗

  • فایل style.css بخشی از تنظیمات مربوط به ابعاد خانه‌های جدول، تنظیمات مربوط رنگ و فونت، و جهت‌گیری متن درون خانه‌ها را انجام ‌می‌دهد. این موارد به هیچ وجه نباید از درون table.html ‌تغییر کنند.

  • توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود. پس دقت کنید که عناصر شناسه‌ی صحیح داشته باشند.

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

    [your-zip-file-name].zip
└── table.html
    Plain text

ورودی مطلوب


در این سوال باید به یک فیلد ورودی کمک کنید تا اعداد بزرگتر از 1000 و کوچکتر از 1 را تشخیص دهد. در فایل‌های اولیه، فیلد ورودی به شکل زیر پیاده‌سازی شده است.

توضیح تصویر

همان‌طور که می‌بینید،‌ با دریافت ورودی‌های مختلف رنگ پس‌زمینه‌ی آن ثابت است. شما باید فایل اولیه‌ی desired_input.html را به نحوی تکمیل کنید که با وارد کردن اعداد بزرگتر از 1000‍ ، یا کوچکتر از 1 ، رنگ پس‌زمینه‌ی آن تغییر کند. نتیجه‌ی مورد انتظار به صورت زیر است.

توضیح تصویر

فایل‌های اولیه🔗

فایل‌های اولیه را از اینجا دانلود کنید. ساختار این فایل‌ها به شرح زیر است:

initial.zip
├── w3.css
└── desired_input.html
Plain text

جزئیات🔗

  • با دریافت هر عدد کوچکتر از 1 و بزرگتر از 1000 ،‌ رنگ پس‌زمینه‌ی ورودی که شناسه‌ی آن #number_input ‌است،‌ به ‍#F5B7B1 تغییر می‌کند.
  • اگر بلافاصله ورودی تغییر کند،‌ رنگ پس‌زمینه هماهنگ با آن تغییر می‌کند.
  • رنگ اولیه‌ی پس‌زمینه #FFFFFF است.

نکات🔗

  • توجه کنید که داوری خودکار بر مبنای شناسه (id) عناصر انجام می‌شود؛ پس شناسه‌ی هیچ عنصری را تغییر ندهید.

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

    [your-zip-file-name].zip
└── desired_input.html
    Plain text

حلقه‌های مربعی


در این سوال قصد داریم دو حلقه‌ی مربعی تودرتو بسازیم. هدف نهایی در زیر به تصویر کشیده شده‌ است.

توضیح تصویر

همانطور که می‌بینید وقتی ماوس روی یک حلقه قرار گیرد، آن را از حلقه‌ی دیگر خارج می‌کند. بخشی از پیاده‌سازی در فایل rectangular_ring.html صورت گرفته است. شما باید تنها با استفاده از عناصر این فایل، ویژگی‌های مطلوب را در فایلی به نام style.css بنویسید.

فایل‌های اولیه🔗

فایل‌های اولیه را از اینجا دانلود کنید. ساختار این فایل‌ها به شرح زیر است:

initial.zip
└── rectangular_ring.html
Plain text

جزئیات🔗

فایل rectangular_ring.html شامل عناصر زیر در بدنه‌ی خود است:

<div id='container'>
    <div class='right'></div>
    <div class='right'></div>
    <div class='right'></div>
    <div class='right'></div>
    <div class='left'></div> 
    <div class='left'></div> 
    <div class='left'></div> 
    <div class='left'></div> 
</div>
HTML
  • عنصر #container همان مربع خاکستری رنگی است که در تصویر دیده می‌شود. این بلوک در پس‌زمینه‌ی حلقه‌ها قرار می‌گیرد، هر کدام از ابعاد آن 400px ، فاصله‌ی آن از هر کدام از اضلاع سمت چپ و بالای صفحه برابر با 100px ، و رنگ پس‌زمینه‌ی آن #D5D8DC است.
  • ‌عناصر .right حلقه‌ی سمت راست را تشکیل می‌دهند. هر کدام از div ها یکی از اضلاع حلقه هستند. رنگ پس‌زمینه‌ی هر کدام از اضلاع این حلقه ‍#2ECC71 است.
  • عناصر .left نیز حلقه‌ی سمت چپ را تشکیل می‌دهند. هر کدام از div ها یکی از اضلاع حلقه هستند و رنگ پس‌زمینه‌شان #E74C3C است.
  • دو مربع در دو نقطه یکدیگر را قطع می‌کنند؛‌ همانطور که در نمایش بالا مشاهده می‌شود،‌ ضلع سمت چپ مربع سبز بر روی ضلع بالایی مربع قرمز قرار می‌گیرد، و ضلع سمت راست مربع قرمز بر روی ضلع پایینی مربع سبز کشیده می‌شود. به این ترتیب دو مربع تودرتو به نظر خواهند رسید.
  • با قرار گرفتن و حرکت ماوس بر روی هر کدام از اضلاع یک حلقه، اضلاع آن در هر دو نقطه‌ی تقاطع بر روی اضلاع حلقه‌ی دیگر قرار خواهند گرفت. به این ترتیب به نظر می‌رسد که حلقه‌ی مورد نظر از حلقه‌ی دیگر خارج شده است.
  • ابعاد حلقه‌ها مانند یکدیگر است و فاصله‌ها متقارن هستند. نسبت ابعاد حلقه‌ها به #container در زیر قابل مشاهده است.

توضیح تصویر

  • توصیه می‌شود ابتدا ویژگی margin را برای body برابر با صفر قرار دهید و سپس مکان بقیه‌ی عناصر را تعیین کنید تا #container دقیقا 100px‌ از بالا و از چپ صفحه فاصله داشته باشد.

نکات🔗

  • به هیچ عنوان فایل rectangular_ring.html را تغییر ندهید؛ تنها کد مورد نظر خود را در فایل style.css بنویسید.
  • داوری بر اساس شناسه‌ (id) و کلاس عناصر صورت خواهد گرفت؛ بنابراین دقیقا از اسامی تعریف شده در فایل اولیه استفاده کنید.
  • پروژه را با ساختار زیر ارسال کنید. 
    [your-zip-file-name].zip 
└── style.css
    Plain text

حالا چی کار کنیم؟


مهدی بچه سر‌به‌هوایی است. او همیشه کارهایی را که می‌خواهد انجام دهد فراموش می‌کند؛ به همین دلیل تا به حال با مشکلات زیادی رو‌به‌رو شده است، و نمی‌داند حالا چه کار کند. مصطفی که پسری است مهربان، قصد دارد برای مهدی یک برنامه درست کند تا او بتواند کارهای خود را با آن مدیریت کند. مصطفی پس از کمی تحقیق تصمیم گرفت از کتابخانه‌ی ReactJS برای انجام این پروژه استفاده کند؛ اما او پس از انجام بخش اعظمی از پروژه، متوجه شد که نمی‌تواند به تنهایی آن را به اتمام برساند، و سه قسمت از پروژه هنوز باقی مانده‌اند. با تکمیل این سه بخش مصطفی را در انجام این کار خیر یاری دهید.

هدف نهایی پروژه در زیر به تصویر کشیده شده است. با وارد کردن نام هر کار، و انتخاب اولویت بالا یا پایین، می‌توان آن را به برنامه اضافه کرد. با کلیک روی هر کار وضعیت انجام شدن آن تغییر می‌کند. مصطفی بخش مربوط به فیلتر کا‌ر‌های انجام‌شده را پیاده‌سازی کرده است؛ بنابراین این قسمت جزو موارد پیاده‌سازی شما نیست.

توضیح تصویر

فایل‌های اولیه🔗

فایل‌های اولیه‌ی پروژه را از اینجا دانلود کنید. ساختار این فایل‌ها به شرح زیر است (مواردی که نیاز به تغییر دارند با * مشخص شده‌اند):

todo.zip
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── components
│   │   ├── AddTodo.js
│   │   ├── App.js
│   │   ├── FilterTodo.js
│   │   ├── TodoItem.js *
│   │   ├── TodoList.js
│   │   └── TodoTable.js *
│   ├── index.js
│   └── registerServiceWorker.js
├── package.json
├── package-lock.json
└── yarn.lock
Plain text

راه اندازی پروژه🔗

برای اجرای پروژه، باید Node.js و npm را از قبل نصب کرده باشید.

  • ابتدا فایل‌های اولیه را دانلود و از حالت فشرده خارج کنید.
  • سپس در پوشه‌ی todo ، دستور npm install را برای نصب نیازمندی‌ها اجرا کنید.
  • سپس در همین پوشه، دستور npm start را برای راه‌اندازی پروژه اجرا کنید.
  • پس از انجام موفق این مراحل، با مراجعه به آدرس http://localhost:3000/ می‌توانید نتیجه‌ی کد را ببینید.

جزئیات🔗

همان‌طور که مشاهده می‌کنید در این پروژه شش ‍Component موجود است. ابتدا آن‌ها را مطالعه کنید تا با نحوه‌ی کارکرد پروژه آشنا شوید. شما باید دو فایل زیر را طبق توضیحات تکمیل کنید.

  • TodoTable.js : در این فایل دو تابع ناقص وجود دارد. تنها این دو تابع را تکمیل کنید.

    • تابع addTodo(name, priority) : این تابع با دریافت نام و اولویت هر کار، آن را به لیست وظایف، یعنی state.todoList اضافه می‌کند. هر عضو این لیست ساختار زیر را دارد (از چپ به راست نام،‌ اولویت، حالت، و شناسه):
      {name: string, priority: string, done: bool, id: string}
      Plain text
      توجه کنید که
      • حالت یک کار ابتدا false‌ است.
      • برای ساختن شناسه می‌توانید از کتابخانه‌ی uuid که در اختیار شما قرار داده شده است استفاده کنید.
      • لیست وظایف، یعنی state.todoList ، باید همواره بر اساس اولویت کارها و در صورت برابری اولویت، به ترتیب نام کارها و به صورت الفبایی مرتب شده باشد(پس از اضافه کردن هر کار این لیست مجددا مرتب شود). بزرگ یا کوچک بودن حروف در مرتب کردن نام‌ها تاثیری ندارد. هم‌چنین بدیهی است که کار‌هایی با اولویت high ‌در لیست بالاتر از بقیه‌ی کارها قرار می‌گیرند.
    • تابع toggleDone(id) : این تابع با دریافت شناسه‌ی یک کار، حالت آن را تغییر می‌دهد؛ اگر false باشد آن را true‌ می‌کند و برعکس.

    در زیر نمونه‌ای از اجرای این دو تابع و تاثیر آن‌ها در لیست مشاهده می‌شود.

    >>>this.state.addTodo('buy milk', 'low')
>>>this.state.todoList --> [{name:"buy milk", priority:"low", done:false, id:"8803af5c-13a7-4692-9cbe-5a0467a5d053"}]
>>>this.state.addTodo('meet Mahdi', 'high')
>>>this.state.todoList --> [{name:"meet Mahdi", priority:"high", done:false, id:"d976e58d-2067-4e9a-81cf-3844d51cac83"}, {name:"buy milk", priority:"low", done:false, id:"8803af5c-13a7-4692-9cbe-5a0467a5d053"}]
>>>this.toggleDone("8803af5c-13a7-4692-9cbe-5a0467a5d053")
>>>this.state.todoList --> [{name:"meet Mahdi", priority:"high", done:false, id:"d976e58d-2067-4e9a-81cf-3844d51cac83"}, {name:"buy milk", priority:"low", done:true, id:"8803af5c-13a7-4692-9cbe-5a0467a5d053"}]
    Plain text

  • TodoItem.js : این فایل را به نحوی تکمیل کنید که

    • نام، اولویت، و حالت هر کار به ترتیب در تگ‌های .name ، .priority ، و .status نشان داده شوند. توجه کنید که حالت یک کار در صورت true بودن با عبارت Done نشان داده می‌شود، و در صورت false بودن خالی است. برای مثال پس از فراخوانی تابع‌ها به ترتیب نمونه‌ی قسمت قبل، باید لیست به صورت زیر نمایش داده شود:
      meet Mahdi
buy milk Done
      Plain text
    • با کلیک بر روی هر .todo-item باید حالت کار داخل آن تغییر کند.

نکات🔗

  • شما تنها مجاز به اعمال تغییر در فایل های TodoItem.js و TodoTable.js هستید.
  • پس از اعمال تغییرات، کل پروژه را طبق ساختار زیر zip کرده و ارسال کنید. دقت کنید که پوشه node_modules در فایل ارسالی نباشد.
    [your-zip-file-name].zip
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── components
│   │   ├── AddTodo.js
│   │   ├── App.js
│   │   ├── FilterTodo.js
│   │   ├── TodoItem.js 
│   │   ├── TodoList.js
│   │   └── TodoTable.js 
│   ├── index.js
│   └── registerServiceWorker.js
├── package.json
├── package-lock.json
└── yarn.lock
    Plain text

پرهیز از عدد اول


در این سوال قصد داریم به طراحی بازی پرهیز از عدد اول بپردازیم. پرهیز از عدد اول، یک بازی دو نفره است که در آن هر بازیکن با یکی از رنگ‌های سبز، یا قرمز شناخته می‌شود. اجزای بازی عبارتند از: یک جدول 10 * 10 ، دو تاس با اعداد 0 تا 6 ، دکمه‌ی پرتاب تاس، چهار عملگر اصلی ریاضی، دو مهره‌ی سبز و قرمز، دو جایگاه شروع برای بازیکنان، و نمایشگر پیام.

در ابتدای بازی، مهره‌ها در جایگاه شروع قرار دارند. هر بازیکن می‌تواند در نوبت خود یکبار تاس‌ها را بیندازد، و سپس یکی از چهار عملگر اصلی را انتخاب کند. پس از آن، بازیکن به اندازه‌ی حاصل عملیات انجام‌شده از موقعیت فعلی خود در جدول یا حالت شروع جابه‌جا می‌شود؛ اما در صورتی که خانه‌ی مقصد یک خانه‌ی غیرمجاز باشد، مهره‌ی بازیکن به جایگاه شروع بازگردانده می‌شود. خانه‌ی غیر مجاز، خانه‌ای با شماره‌ی بزرگتر از صد، کوچکتر از یک، عدد اول، یا عدد تعریف‌نشده است. هم‌چنین در صورتی که بازیکن وارد خانه‌ای شود که حریف در آن قرار دارد،‌ حریف به خانه‌ی شروع بازگردانده می‌شود و بازیکن وارد‌شده جای او را می‌گیرد.

در زیر یک دور کامل بازی به تصویر کشیده شده است. ابتدا نوبت بازیکن سبز است و با هر انجام نوبت، رنگ پس‌زمینه‌ی بازی، به رنگ بازیکن اتمام‌کننده‌ی نوبت در می‌آید (تعویض رنگ پس‌زمینه جزو پیاده‌سازی‌های بازی نیست و تنها برای توضیح مثال‌ها آورده شده است).

توضیح تصویر

پیاده‌سازی بازی تا حدی در فایل‌های اولیه انجام شده است. در زیر محتوای قابل دریافت با اجرای فایل avoid_primes.html را مشاهده می‌کنید. در پیاده‌سازی اولیه هیچ کدام از دکمه‌ها کار نمی‌کنند، و بازیکن‌ها در حالت شروع هستند. شما باید منطق بازی را با تکمیل فایل avoid_primes.js به پایان برسانید.

توضیح تصویر

شرح دقیق‌تر قوانین بازی🔗

توجه کنید که

  • در این بازی، تقسیم به صورت صحیح در نظر گرفته می‌شود؛ یعنی برای مثال 3/2 = 1 .
  • منظور از عملیاتی با حاصل تعریف‌نشده، تقسیم بر صفر است؛ برای مثال 0/0‌ ، و 1/0‌ هر دو تعریف‌نشده هستند.
  • تاس اول که همان تاس سمت چپ است، همواره عملوند اول را نشان می‌دهد.
  • اعداد اول بین یک و صد عبارتند از:

‍‍2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97

در این قسمت گیف‌های نمونه برای توضیح قوانین بازی را مشاهده می‌کنید. در ابتدای تمام مثال‌ها نوبت با بازیکن سبز است.

  • در هر نوبت، بازیکن اجازه دارد یکبار تاس‌ها را بیندازد، و پس از آن عملگر مورد نظر خود را انتخاب کند. در این صورت نوبت او به اتمام می‌رسد و نوبت بازیکن بعدی می‌شود.

    • پس از انتخاب عملگر و انجام نوبت، نوشته‌ی تاس‌ها به ‍? تغییر می‌کند.
    • در صورتی که بازیکن پیش از انتخاب عملگر، مجددا دکمه‌ی پرتاب تاس‌‌ها را فشار دهد هیچ اتفاقی نمی‌افتد.
    • در صورتی که بازیکن پیش از انداختن تاس‌ها در نوبت خود عملگری را انتخاب کند، هیچ اتفاقی نمی‌افتد.

    توضیح تصویر

  • در این بازی انتقال می‌تواند مثبت، منفی، یا صفر باشد؛ یعنی بازیکن می‌تواند علاوه بر حرکت به جلو، با گرفتن خروجی صفر از عملیات، در خانه‌ی فعلی خود بماند، و با دریافت خروجی منفی از عملیات، به عقب برگردد.

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

  • در صورتی که بازیکن در نوبت خود عملگر را به نحوی انتخاب کند که او را به خانه‌ای با شماره‌ی اول ببرد، مهره‌اش به جایگاه شروع بازگردانده می‌شود. در مثال زیر، ابتدا مهره‌ی سبز در خانه‌ی 25‌ ، و مهره‌ی قرمز در خانه‌ی 36 قرار دارد. توضیح تصویر

  • در صورتی که بازیکن در نوبت خود عملگر را به نحوی انتخاب کند که حاصل عملیات تعریف‌نشده باشد، مهره‌اش به جایگاه شروع بازگردانده می‌شود. در مثال زیر نیز ابتدا مهره‌ی سبز در خانه‌ی 25‌ ، و مهره‌ی قرمز در خانه‌ی 36 قرار دارد. توضیح تصویر

  • در صورتی که بازیکن در نوبت خود عملگر را به نحوی انتخاب کند که او را به خانه‌ای با شماره‌ی کوچکتر از یک یا بزرگتر از صد ببرد، مهره‌اش به جایگاه شروع بازگردانده می‌شود. در مثال زیر، ابتدا مهره‌ی سبز در خانه‌ی 4‌ ، و مهره‌ی قرمز در خانه‌ی 1 قرار دارد. توضیح تصویر در مثال زیر، ابتدا مهره‌ی سبز در خانه‌ی 76 ، و مهره‌ی قرمز در خانه‌ی 85‌ قرار دارد. توضیح تصویر

  • در صورتی که بازیکن وارد خانه‌ای شود که حریف در آن قرار دارد، حریف را از آن خانه بیرون می‌کند، و به جایگاه شروع بازمی‌گرداند. در مثال زیر، ابتدا هر دو مهره در جایگاه شروع قرار دارند. توضیح تصویر

  • در صورتی که یکی از مهره‌ها به خانه‌ی شماره‌ی 100 برسد بازی تمام می‌شود؛ نمایشگر پیام به رنگ بازیکن برنده در می‌آید، و پیام تبریک در آن نشان داده می‌شود؛ و دکمه‌ها دیگر کار نمی‌کنند. در مثال زیر، ابتدا بازیکن سبز در خانه‌ی 85‌ ، و بازیکن قرمز در خانه‌ی 63‌ قرار دارد. توضیح تصویر

فایل‌های اولیه🔗

فایل‌های اولیه را از اینجا دانلود کنید. ساختار این فایل‌ها به شرح زیر است:

initial.zip
├── avoid_primes.html
├── avoid_primes.js
├── jquery.min.js
├── roll_dice.js
└── style.css
Plain text
  • برای درست دیده‌شدن علامت‌های ریاضی، بهتر است از مرورگر کروم برای دیدن محتوای avoid_primes.html استفاده کنید.

جزئیات🔗

با توجه به محتوای فایل‌های اولیه، به توضیح وظایفی که باید پیاده‌سازی شوند می‌پردازیم. در هر قسمت، موارد مهمی که شما باید پیاده‌سازی کنید مشخص شده‌اند.

  • فایل avoid_primes.html : عناصر موجود در بدنه‌ی این فایل به شرح زیر هستند.
    <body>   
  <div id="panel">
      <div id="start_player_1" class="filled"><span></span></div>
      <div id="start_player_2" class="filled"><span></span></div>
      <div id="first_die" class="dice"><span>?</span></div>
      <div id="second_die" class="dice"><span>?</span></div> 
      <button id="roll">Roll</button>
      <button id="sum" class="operator">+</button> 
      <button id="subtract" class="operator">-</button> 
      <button id="multiply" class="operator">×</button> 
      <button id="divide" class="operator">÷</button> 
      <div id="msg" class="no_winner"><span>Winner?</span></div>
  </div>
  <div id="board"></div>  
</body>
    HTML
  • عنصر#panel : این عنصر صرفا به عنوان دربردارنده‌ی اجزای بازی، به جز جدول، استفاده شده است.
  • عنصر #start_player_1 : این عنصر جایگاه شروع برای بازیکن سبز است؛ در صورتی که بازیکن سبز در حالت شروع باشد، دارای کلاس .filled خواهد بود و هیچ شماره‌ای داخل آن‌ها نشان داده نمی‌شود؛ در صورتی که مهره‌ی سبز داخل جدول باشد، دارای کلاس .empty خواهد بود و شماره‌ی خانه‌ی فعلی بازیکن در آن نشان داده می‌شود. برای نمایش شماره، عدد مورد نظر در داخل <span></span>‍ ای که فرزند جایگاه شروع است قرار می‌گیرد. اگر بازیکن در حالت شروع باشد،‌ نوشته‌ی درون span‌ برابر با '' خواهد بود.
  • عنصر #start_player_2 : این عنصر جایگاه شروع برای بازیکن قرمز است. توضیحات مربوط به #start_player_1 به طور مشابه برای این عنصر نیز صادق است.
  • عناصر.dice : این دو عنصر تاس‌های بازی را نشان می‌دهند. تاس اول با شناسه‌ی #first_die ، و تاس دوم با شناسه‌ی #second_die نشان داده می‌شود. عدد روی تاس، در داخل <span></span> قرار می‌گیرد. در حالتی که عدد روی تاس معلوم نباشد، یعنی نوبت بازیکن انجام شده باشد، ? جای آن را می‌گیرد.
  • عنصر #roll : با کلیک روی این دکمه، در صورتی که بازیکن در نوبت خود تاس را نینداخته باشد، محتوای جدید در داخل تاس‌ها به نمایش در می‌آید. هر بار برای انداختن تاس از تابع roll_dice() که در ادامه توضیح داده شده است استفاده می‌شود.
  • عناصر .operator‌ : در صورتی که بازیکن تاس انداخته باشد اما هنوز عملیات مورد نظر خود را انتخاب نکرده باشد، با کلیک روی هر کدام از این دکمه‌ها، عملیات مربوط به آن روی عملوندها صورت می‌گیرد. به این ترتیب نوبت بازیکن انجام می‌شود، و باید موقعیت او با توجه به خروجی عملیات به‌روزرسانی شود.
  • عنصر #msg : این عنصر، همان نمایشگر پیام است. در صورتی که بازی هنوز در جریان باشد، کلاس .no_winner ، و در صورت برد هر کدام از بازیکن‌های سبز، و قرمز به ترتیب کلاس‌های .winner_msg_1‌ ، و .winner_msg_2 را خواهد داشت. هم‌چنین پیام مربوط به بازی، در داخل <span></span> نمایش داده می‌شود که اگر بازی هنوز در جریان باشد، پیام Winner? ، و اگر به اتمام رسیده باشد، پیام Congratulations! را خواهد داشت.
  • عنصر #board : این عنصر، جدول بازی است. خانه‌های جدول در فایل اولیه‌ی avoid_primes.js به آن پیوند می‌خورند.
  • فایل avoid_primes.js : با داشتن محتوای اولیه‌ی این فایل، خانه‌های جدول در داخل #board قرار می‌گیرند. خانه‌ی i ام جدول، در حالتی که خالی باشد، به صورت زیر خواهد بود:
    <div>
 <span>i</span>
 <span class="pawn"></span>
</div>
    HTML

اگر مهره‌ی بازیکن سبز وارد خانه‌ای از جدول شود، فرزند دوم آن خانه، یعنی .pawn ، کلاس .pawn .player_1 را به خود می‌گیرد. اگر بازیکن قرمز وارد خانه‌ای از جدول شود، همان عنصر، کلاس .pawn .player_2 را به خود می‌گیرد. هر خانه، موقع خالی شدن کلاس .pawn ‌را خواهد گرفت.

  • فایل roll_dice.js : در این فایل تابع roll_dice() برای قرار دادن عدد تصادفی جدید در داخل تاس‌ها پیاده‌سازی شده است. این تابع دو عدد تصادفی بین 0 و 6‌ تولید می‌کند و در داخل تاس‌ها می‌نویسد.

  • فایل style.css : در این فایل ویژگی‌های مربوط به کلاس‌ها و عناصر تعیین شده‌اند.

  • توجه کنید که در بازی دو مهره‌ی سبز و قرمز وجود ندارند که جابه‌جا شوند؛ بلکه شما باید با تغییر صحیح کلاس در جایگاه‌های شروع و خانه‌های جدول حرکت آن‌ها را نشان دهید.

  • در نهایت باید تمام قوانین بازی با توجه به جزئیات فنی توضیح داده شده پیاده‌سازی شوند.

نکات🔗

  • در داوری، سناریو‌های مختلفی از بازی اجرا می‌شوند، و موقعیت مهره‌ها،‌ وضعیت جدول، پیام بازی، و عملکرد دکمه‌ها پس از هر سناریو مورد ارزیابی قرار می‌گیرند.
  • توجه کنید که داوری خودکار بر مبنای کلاس و شناسه‌ی عناصر که در فایل‌های اولیه داده شده است، انجام می‌شود؛ بنابراین در هر مورد باید دقیقا همان اسامی گفته‌شده را به عناصر اختصاص دهید.
  • محتوای اولیه‌ی فایل avoid_primes.js و نیز سایر فایل‌ها را به هیچ عنوان تغییر ندهید. تنها کد خود را به آن اضافه کنید.
  • توجه کنید که برای انداختن تاس باید حتما از تابع گفته‌شده استفاده کنید؛ زیرا این تابع، در همان فایل،‌ در داوری با اندکی تغییرات استفاده خواهد شد.
  • پروژه را با ساختار زیر ارسال کنید. 
    [your-zip-file-name].zip 
└── avoid_primes.js
    Plain text