Jose (8th PR): Assignment/Quiz Creation. Front-end only

[Jose-Alarcon1]

Implement Assignment and Quiz Management Interface for LessonConnect

Implement Assignment and Quiz Management Interface for LessonConnect

Overview

What does this PR do?

This PR introduces the initial Assignment and Quiz Management UI for LessonConnect. It allows users (tutors) to view a list of assignments, create new ones, and manage quiz questions dynamically. The question creation supports both Multiple Choice and Short Answer formats, with mock data used for interface and testing purposes.

Key Features & Changes

What has been added or changed?

• Core Feature Implementation:
  • Assignment list view with Edit and Quiz view actions
  • Form to create or edit assignments
  • Quiz view with a dynamic question table including solution display
  • Question builder for multiple choice and short answer
• UI/UX Enhancements:
  • Fully responsive layout for form sections
  • Buttons aligned using Flexbox for visual consistency
  • Improved spacing and padding for readability
• State Management Improvements:
  • View switching handled using useState (list, create, quiz, question)
  • State management for question type and dynamic choices
• New Components/Files:
  • AssignmentCreate.jsx: Contains all logic and conditional rendering for assignment and quiz functionality
  • AssignmentCreate.css: All styling including table layout, form inputs, and button responsiveness

Why This Is Needed

Currently, LessonConnect lacks a user interface for instructors to create and manage assignments or quizzes. This feature establishes the groundwork for assignment workflows and paves the way for future enhancements like backend integration and question validation.

Related Issue

This PR lays the foundation for “Assignment Tool MVP.” (No issue link attached — internal feature)

Implementation Details

How was this feature developed?

• Built using React JSX with useState for local state
• CSS Flexbox used for layout structure and button alignment
• Quiz and assignment data are currently hardcoded as mock data for testing purposes
• Dynamic rendering for form fields based on selected question type
• Table displays each question along with its solution for reference

How to Test This PR

1. Navigate to the AssignmentCreate view
2. Observe the list of mock assignments
3. Click "Create New Assignment" to open the form
4. Fill in assignment fields and click Submit or Cancel
5. Click "View Quiz" to see mock questions including the "Solution" column
6. Click "Add Question" and test both MC and SA types
7. Add choices, mark correct answers, and verify layout responsiveness
8. Check that all buttons are aligned and functional

Files Added/Modified

File Name	Description
AssignmentCreate.jsx	Main component for assignment and quiz management
AssignmentCreate.css	CSS styling for the AssignmentCreate interface

AI Code Usage

Yes 2 Minimal

Checklist for Reviewers

• Feature flows and view transitions work as expected
• Responsive design and aligned elements
• Input fields behave correctly
• Mock data is rendered properly for testing
• Code is readable and well-structured

Next Steps & Future Enhancements

• Integrate backend API for saving assignments and quizzes
• Add question editing and deletion features
• Implement validation and confirmation prompts
• Save quiz and assignment states locally or via session
• Support markdown or formatting in question text
• Add accessibility features (keyboard/tab support, ARIA labels)

Final Notes

Thank you for reviewing this foundational feature. All data is currently mocked for layout and logic development. Looking forward to feedback so we can refine and build on this base.

Screenshots:

-screenshots also taken to identify necessary fields to simplify the UML diagram

UML

Author: Jose Alarcon

[SameerIssa]

Peer Review: Great Job on This PR!

Hey Jose — just finished reviewing your PR titled "Assignment and Quiz Management UI". Here’s my feedback:

---

What Looks Great

• The core feature has been implemented cleanly — functionality aligns with the related issue.
• Smooth and intuitive conditional rendering between views.
• Dynamic form handling for both Multiple Choice and Short Answer types.
• Well-organized and readable code with effective use of useState.
• Clean layout with responsive design and well-aligned elements.
• The use of mock data for now is sensible and helps visualize the intended functionality easily.

---

Suggestions for Improvement (if any)

These are ideas for future improvements or things to address before merging.

• Consider adding validation logic for forms to prevent incomplete submissions.
• For better UX, you could add autosave drafts or warning prompts for unsaved changes.
• In the future, include a UML or sequence diagram if the form flow becomes more complex — helps during reviews!

---

Tested This Feature

I ran the following test steps:

• Navigated to the feature/page.
• Verified that all new UI elements render correctly.
• Tried edge cases (e.g., empty input, resizing the window).
• Confirmed responsiveness and layout on desktop/mobile.

Everything behaved as expected

---

Next Steps

• Looking forward to backend integration, form validation, and state persistence.
• Let me know once these updates are made and I’ll be happy to re-review before merge.

---

Final Thoughts

Great work on this foundational feature Jose! The implementation is clean, well-structured, and clearly sets the stage for the full Assignment Tool experience. This is a strong MVP step for LessonConnect’s assignment system. Looking forward to seeing the future enhancements!

• Sameer

[AbdulAlharbi]

🔍 Peer Review: Great Job on This PR!

Hey Jose — just finished reviewing your PR titled "Implement Assignment and Quiz Management Interface for LessonConnect." Here’s my feedback:

---

✅ What Looks Great

• The core feature is well-built — clean UI for managing assignments and quiz questions with appropriate view states (list, create, quiz, question) and dynamic rendering.
• Excellent attention to UI/UX: layout is responsive, buttons are aligned, and the form feels intuitive.
• The PR description is thorough and well-structured, following our team template. Your “Key Features,” “Testing Guide,” and “Next Steps” made reviewing a breeze.
• Great job scoping this PR — using mock data was smart for prototyping, and view separation is cleanly implemented.
• CSS is readable and consistent with a smooth visual experience.
• JSX component is modular and logical, especially the state handling for different views and question types.
• Buttons and inputs are accessible, with Flexbox layout improving responsiveness.
• AI annotation ✅ (Minimal) is present and follows guidelines.

---

Suggestions for Improvement

Totally optional — just ideas to further enhance maintainability and clarity over time:

• 🔗 A UML or sequence diagram would really help visualize view transitions (list → create → quiz → question). It’s also part of our project requirements. ( that's ok, since you mentioned it, "coming soon".
• 🧠 Consider switching to useReducer for complex state like questionType and choices, especially as form logic grows.
• 🔄 Right now the form uses uncontrolled inputs — switching to controlled inputs (via useState or a form library like react-hook-form) can help with validation and future extensibility.
• ⚠️ Adding minimal error/edge case handling would improve robustness — e.g., "no assignments available" messages, or field-level validation prompts.
• 📦 Breaking up AssignmentCreate into subcomponents (AssignmentList, AssignmentForm, etc.) could improve readability and modularity long-term.

---

Tested This Feature

Ran the following steps and confirmed all behavior:

• ✅ Loaded AssignmentCreate page
• ✅ Verified all 4 views render correctly (list, create, quiz, question)
• ✅ Tested both MC and SA question types
• ✅ Interacted with all buttons — Submit, Cancel, View Quiz
• ✅ Layout looks good on wide and narrow screens

Everything behaved as expected

---

⚠️ Note: Merge Conflict

Heads up — there’s a merge conflict in frontend/src/App.jsx that needs resolving before this PR can be merged.
You can fix it by clicking “Resolve conflicts” in GitHub or using the CLI instructions provided.

Let us know if you want a hand with the merge!

---

Next Steps

• Add a design diagram in this or a future PR (use case or sequence is fine).
• Hook up backend API once ready.
• Consider adding edit/delete for quiz questions.
• Optionally persist quiz state using localStorage or Context.

---

Final Thoughts

Approved! ✅
Jose — awesome foundational feature. This sets the stage perfectly for future enhancements. Let me know if you want help breaking the component up or integrating more advanced form logic later.

Keep crushing it!
Abdulrahman

[EthanZ23]

PR Comment: Hi Jose, amazing and thoughtful work here!

---

Why I am writing today:

As the person who solely handled the lesson-related backend models (especially assignments and quizzes), I wanted to give this PR a thorough review. I strongly believe additional feedback always helps, especially when backend and frontend pieces are meant to align closely.

---

Initial Impression:

After reading the PR description, browsing the interface, and reviewing the code, I can confidently say this is a clean, functional, and well-aligned implementation. I especially appreciate how closely it reflects the lessons app backend schema and logic. Here are a few things I really liked:

• Action Tab: The assignment action tab is a nice touch, one that I was pleasantly surprised by. It sets the stage for future enhancements and assignment expansion.
• Assignment Types: Displaying the assignment type in a way that mirrors our backend enum is a key design decision. It’s clear and intuitive.

Everything functioned as expected. Great job!

---

Suggestions for Improvement & Next Steps:

Here are a few improvements that could elevate the interface further:

• Delete Assignment Option: Would be helpful to include a "Delete" assignment option in the action tab (maybe styled in red for clarity).
• Student ID Field Input Type: In the "Create Assignment" form, the student ID input appears as a number increment and should rather be a standard text input (which might be more user-friendly and less error-prone).
• Add Solution Option (Quiz): On the quiz view, there should be a way to "Add Solution" after a question is created. This reflects the backend logic where solutions are attached to existing questions (for example, you must first create a question into the database before attaching it a valid solution).
• Short Answer UI Cleanup: In the "Create Question" view for short answer questions (the final screenshot example), the “Add Another Choice” option is present and this isn’t needed, thus should be hidden/deprecated.

---

This is an excellent foundation for our assignment/quiz management system. Your attention to both UI and state handling really shines here. If you need anything clarified, feel free to reach out. Keep up the outstanding work!

— Ethan

[Jose-Alarcon1]

@SameerIssa Thank you so much for your thoughtful comments and approval

[Jose-Alarcon1]

Thank you so much, @AbdulAlharbi !

Really appreciate the detailed review and thoughtful suggestions. I'm glad the structure and functionality came through clearly — especially the UI responsiveness and clean JSX states.

As you mentioned, yes — the UML/sequence diagrams are definitely on the way and will be included soon. This first iteration was meant to get the core logic and views working cleanly, and you've confirmed it's headed in the right direction.

The next set of updates (coming with backend integration in collaboration with Ethan Z.) will handle:

• Connecting live data to replace mock content
• Enhancing error handling and validation
• Potentially modularizing the component further into subcomponents
• Switching to more robust form handling (looking into react-hook-form)

Thanks again for flagging the merge conflict — I’ll get that resolved shortly.

Excited to push this further in the next phase!

[Jose-Alarcon1]

Thanks @EthanZ23 ,

Thank you for the thorough and insightful review. Your feedback, especially from a backend perspective, is invaluable and greatly appreciated.

I'm glad to hear that the implementation aligns well with the backend schema and logic. Your recognition of the assignment action tab and the display of assignment types mirroring our backend enums is encouraging.

Regarding your suggestions:

• Delete Assignment Option: Adding a delete option in the action tab is a great idea. I'll plan to incorporate this in the next iteration.
• Student ID Field Input Type: I'll update the student ID field to a standard text input to enhance user-friendliness.
• Add Solution Option (Quiz): Implementing a way to add solutions after question creation makes sense and aligns with our backend logic. This will be addressed in the upcoming updates.
• Short Answer UI Cleanup: I'll ensure that the "Add Another Choice" option is hidden for short answer questions to prevent confusion.

These enhancements will be part of the next iteration when I integrate the frontend with the backend, collaborating closely with Ethan Z. Your guidance has been instrumental in shaping the direction of this feature.

Thanks again for your support and for being an integral part of the design process.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 57.05%. Comparing base (99729c1) to head (a159c55).
Report is 11 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #155   +/-   ##
=======================================
  Coverage   57.05%   57.05%           
=======================================
  Files          14       14           
  Lines         475      475           
  Branches       37       37           
=======================================
  Hits          271      271           
  Misses        196      196           
  Partials        8        8           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[AbdulAlharbi]

Final approval, great work!

[EthanZ23]

Nice addition with the updated diagram in your PR, it really helps clarify the flow and makes it much easier to understand the direction and how each part fits together. Everything looks good on my end, so I’m approving the PR. Great work!

[Jose-Alarcon1]

@AbdulAlharbi Thanks so much for your final approval.

[Jose-Alarcon1]

@EthanZ23 Thanks so much for your final approval and thoughtful comments. I will merge it now.

[AbdulAlharbi]

Is issue #158 covered by this PR? @Jose-Alarcon1