Discussion: Front-End Prototype for Assignment + Quiz Management

[Jose-Alarcon1]

Discussion: Front-End Prototype for Assignment + Quiz Management

Context

I'm currently prototyping the front-end interface for the Assignment + Quiz system. The design is built as a single-page dynamic React component, using scoped styles via .assignment-create_container to keep structure isolated and maintainable.

Features Implemented (Mock Data)

• Assignment list view with Edit and View Quiz options
• Create/Edit assignment form (file upload, deadline, dropdowns)
• Quiz section: view questions tied to assignment (MC and SA support)
• Question creation form with conditional MC-only choice input
• Component state structured to emulate backend models and expected endpoints

Note on Design Focus

This phase is not focused on aesthetics. The priority is feasibility and alignment with backend data flow — making sure the front-end structure is simple, efficient, and easy to wire up. Styling and polish will come after structure is validated.

Special Thanks

Thanks to @EthanZ23 for his helpful input and support during the prototyping phase. His feedback has been key in shaping layout and logic.

Design Goals

• Keep all logic in a single component (SPA-style) for now
• Mimic backend flow: create assignment → view quiz → add question → add choices
• Use mock data structured to match the API responses
• Scoped CSS (e.g. AssignmentCreate.css) to avoid global style pollution

Screenshots

Dropdown Explanations

The interface includes two primary dropdowns that reflect backend-enforced enumerations. These help constrain user input and simplify validation for assignment and question creation.

• Assignment Type
  Dropdown in Assignment Create/Edit form
  Options include:
  • EX – Exercises
  • HW – Homework
  • QZ – Quiz
  • TT – Test
  • EC – Extra Credit
  These map directly to the backend's assignment_type choices in the Assignment model.
• Question Type
  Dropdown in Question Create form
  Options include:
  • MC – Multiple Choice
  • SA – Short Answer
  When MC is selected, the UI dynamically displays the choice input section for answer options.

Both dropdowns are currently static in the UI but could easily be converted to dynamic fetches if future backend flexibility is needed.

Suggestions I'm Looking For

• Is the layout and flow intuitive and scalable?
• Are all required backend fields being considered?
• Does the one-page approach make sense, or would tabbed/multi-page views be cleaner?
• Is the question + MC choices UI flexible enough for different types of content?
• Does this structure map well to our backend expectations?
• Any feedback on simplifying REST interaction patterns?

Next Steps

• Incorporate design/UX feedback
• Begin wiring form components to real API endpoints
• Polish layout and add mobile/responsive support in a later pass

Looking forward to your thoughts on flow, design decisions, and backend connectivity.

[AbdulAlharbi]

Hey Jose, this is looking really solid — great job keeping the structure focused and backend-aligned.

🔍 UI & Flow

• The layout feels intuitive, especially with the single-page approach you’ve taken. Keeping everything in one component makes sense at this phase and helps visualize the whole flow from assignment creation to quiz question management.
• The conditional logic for displaying multiple choice fields based on the selected question type is working nicely — clear and user-friendly.

✅ Backend Alignment

• It's great that you're structuring the component state to match the backend models and expected API responses. That will definitely help make the upcoming integration smoother.
• I also appreciated the use of scoped CSS — helps keep things clean without polluting global styles.

🎯 Design Focus & Priorities

• Focusing on feasibility over aesthetics makes total sense right now. The structure feels lightweight, efficient, and easy to wire up — and I agree that styling polish can come later after validation.
• I also like that you’re using static dropdowns for Assignment Type and Question Type, directly reflecting backend enums — simple but effective.

📘 Feedback Requested

• Yes, the flow feels intuitive and the logic is easy to follow. The single-page format is working well for this phase, and your quiz UI (especially the MC vs SA logic) appears flexible for the current scope.
• You're covering all the necessary backend fields from what I can see, and the design maps cleanly to the backend expectations.

Looking forward to seeing how this continues to evolve — great foundation so far!

Abdulrahman

[Jose-Alarcon1]

Thanks so much for your reply and thoughtful comments @AbdulAlharbi , I appreciate it.

[aviendha-andrus]

This prototype looks great! I’m familiar with the backend assignments models and this looks pretty on point as far as fields go. You modeled it to align with backend fields spectacularly. I agree with you and Abdul, the aesthetics aren’t the main priority right now. Even so the flow of this looks good and will be a valuable addition to the MVP. To my understanding we aren’t adding a frontend submissions section, but I still want you to know that you can reach out to me as well if you have any questions for backend. Keep up the good work!

[Jose-Alarcon1]

Thank you much for your supportive comments @aviendha-andrus. Thanks for the invitation to collaborate as well.