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

در ابتدا در صفحه‌ی sign-up/ login (signuplogin.html) اشخاص می‌توانند یا اکانت جدید بسازند و یا وارد اکانت خود شوند بنابراین زمانی که بخواهند لاگین‌ کنند نیازی به انتخاب role (player or designer) ندارند زیرا با اکانت خود قبلا احراز هویت شده‌اند، اما در زمانی که می‌خواهند اکانت جدید بسازند باید نقش یا role خود را به عنوان طراح یا بازیکن انتخاب کنند تا در ادامه وارد صفحه‌ی خود شوند.

نقش بازیکن (Player): بعد از ورود به صفحه‌ی بازیکن، هم دکمه‌ی Logout برای خروج از حساب کاربری و ورود به صفحه‌ی sign-up/ login وجود دارد و همچنین در تمامی صفحات در ادامه، دکمه‌ی back برای بازگشت به صفحه‌ی قبل و نیز دکمه‌ی loght-mode / dark-mode (بخش اختیاری از پروژه) وجود دارد. همچنین در قسمت sign-up یک قسمت فراموشی رمز عبور دارد که با آن وارد صفحه‌ی resetpassword.html می‌شویم و بعد از تغییر رمز عبور وارد صفحه‌ی اصلی می‌شویم. حال در صفحه‌ی اصلی بازیکن (mainmenup.html)، امتیاز او (score) مشاهده می‌شود و نیز دو دکمه Question Management (برای ورود به صفحه‌ی مدیریت سوال‌ها) و Leaderboard (برای ورود به صفحه‌ی جدول امتیازات) وجود دارد. بعد از ورود به صفحه‌ی Question Management (question.html)، بازیکن می‌تواند: ۱- سوالات حل شده‌ی خود را مشاهده کند. ۲- یک سوال تصادفی ایجاد و آن را حل کند. ۳- سوال با اعمال فیلتر دلخواه (انتخاب دسته‌بندی دلخواه (و یا تمام دسته‌بندی‌ها) و انتخاب هر درجه‌بندی از سختی) (بخش اختیاری از پروژه) را انتخاب کند و به آنها پاسخ دهد. برای دو مورد آخر باید با کلیک روی دکمه‌ی Answer new question وارد صفحه‌ی answering.html شود. بعد از ورود به صفحه‌ی Leaderboard (leaderboard.html)، بازیکن می‌تواند جدول امتیازت (نام کاربری و آواتار بازیکن‌ها به همراه امتیاز‌ آن‌ها) را مشاهده کند.

نقش طراح (Designer): بعد از ورود به صفحه‌ی طراح، -همان‌طور که در بخش قبل گفته شد- هم دکمه‌ی Logout برای خروج از حساب کاربری و ورود به صفحه‌ی sign-up/ login وجود دارد و همچنین در تمامی صفحات در ادامه، دکمه‌ی back برای بازگشت به صفحه‌ی قبل و نیز دکمه‌ی loght-mode / dark-mode (بخش اختیاری از پروژه) وجود دارد. همچنین در قسمت sign-up یک قسمت فراموشی رمز عبور دارد که با آن وارد صفحه‌ی resetpassword.html می‌شویم و بعد از تغییر رمز عبور وارد صفحه‌ی اصلی می‌شویم. حال در صفحه‌ی اصلی طراح (mainmenu.html)، دو دکمه Category Management (برای ورود به صفحه‌ی مدیریت دسته‌بندی‌ها) و Question Management (management.html) (برای ورود به صفحه‌ی مدیریت سوال‌ها) وجود دارد. بعد از ورود به صفحه‌ی Category Management (category.html)، طراح می‌تواند: ۱- دسته‌بندی موجود را مشاهده کند. ۲- دسته‌ی جدیدی به دسته‌بندی موجود اضافه کند.

بعد از ورود به صفحه‌ی Question Management (question.html)، طراح می‌تواند: ۱- سوالات طرح شده‌ی خود را مشاهده کند. ۲- یک سوال جدید ایجاد کند: برای این‌کار با انتخاب دسته‌بندی (... ,Category: Science)، درجه سختی (Difficulty: Hard, Normal, Simple)، موضوع (Title)، شرح سوال (Description) و نوشتن گزینه‌های آن (Options) طرح کند. ۳- سوال با اعمال فیلتر دلخواه (انتخاب دسته‌بندی دلخواه (و یا تمام دسته‌بندی‌ها) و انتخاب هر درجه‌بندی از سختی) (بخش اختیاری از پروژه) را انتخاب کند و به آنها پاسخ دهد.

در نقش طراح (Designer or Developer): 1. مسئولیت‌ها: 2. مشاهده‌ی سوالات موجود و ایجاد سوالات چهارگزینه‌ای جدید. 3. اضافه کردن دسته‌بندی‌های جدید و مشاهده‌ی دسته‌بندی سوالات موجود.

در نقش بازیکن (Player): مسئولیت‌ها: 1. مشاهده‌ی سوالات موجود و پاسخ دادن به سوالات انتخابی یا تصادفی. 2. (امتیازی) تعیین فیلتر بر روی انتخاب درجه‌بندی سختی سوالات (Hard, Normal, Simple) و دسته‌بندی آن. 3. مشاهده و پیگیری امتیازات و پیشرفت خود. 4. مشاهده‌ی جدول امتیازات

فاز اول پروژه روی طراحی رابط کاربری (UI) و ایجاد پایه‌های اصلی سیستم متمرکز بود.

توسعه رابط کاربری:

1. طراحی صفحات با استفاده از HTML و CSS برای ایجاد ساختار صفحات، انتخاب فونت‌ها، رنگ‌ها و طراحی واکنش‌گرا.
2. بخش‌های اصلی شامل صفحات ورود، منو اصلی، مدیریت سوالات (برای طراحان) و مدیریت پاسخ‌ها (برای بازیکنان) و ... می‌شود.

ساختار صفحات:

1. صفحه ورود (login/sign-up): برای هر دو نقش طراح و بازیکن.
2. منوی اصلی: هدایت کاربران به بخش‌های مربوطه برای هر نقش.
3. صفحه مدیریت سوالات (برای طراحان): امکان اضافه کردن، دسته‌بندی و دنبال کردن سوالات.
4. صفحه مدیریت پاسخ‌ها (برای بازیکنان): امکان پاسخ‌گویی به سوالات و مشاهده‌ی سوالات پیشین خود.
5. صفحه جدول امتیازات (برای بازیکنان): امکان مشاهده‌ی جدول امتیازات.
6. صفحه فراموشی رمز عبور: امکان عوض کردن رمز دوم و ورود به صفحه‌ی اصلی.

خروجی‌های مورد انتظار:

1. مستند معماری پروژه که در آن به شکل مختصر موجودیت‌ها سیستم و دید سطح بالای صفحات با وایرفریم:

Wireframe:

https://app.visily.ai/projects/3c59d69c-1f97-40f2-80c2-9882a71d8ae9/boards/1372279

https://whimsical.com/phase1-P1zkKrkfM4hxupZpd1p7DK

3. فیلمی حداکثر ۵ دقیقه‌ای برای معرفی ویژگی‌های اصلی سیستم. (در این ریپو آپلود شده است.)
4. گزارش پروژه که همین فایل readme.md می‌باشد.
5. مواردی که باید در قالب کد پیاده‌سازی می‌کردیم. (در این ریپو مشاهده می‌شود.)

1. ایجاد فیلتر و لیست در دسته‌بندی‌ها: امکان فیلتر سوالات بر اساس دسته‌بندی و درجه‌سختی سوالات.
2. برچسب‌های معنایی (Semantic Tags): استفاده از اصول SEO و حالت تاریک.
3. طراحی واکنش‌گرا: تطبیق رابط کاربری با انواع دستگاه‌ها
4. زیبایی بصری صفحات (شامل رعایت اصول انتخاب رنگ‌ها و …)
5. امکان تغییر به dark mode