Ethan's 5th PR / Jose's 9th PR: (#182) Assignment & Quiz Backend Frontend Link

[EthanZ23]

Assignment & Quiz Backend–Frontend Integration

Added Frontend Assignment, Quiz, Question, Choices, and Solution Services for API Integration

---

Overview

What does this PR do?

This PR wires up our LessonConnect frontend components to the Django REST API for Assignments, Quizzes, Questions, Choices and Solutions. It introduces five modular service layers that encapsulate all HTTP calls, updates URL patterns and view logic on the backend, and adds react-side state management for full Create / Read / Update / Delete workflows. I also created a extra 'quiz info' + 'edit quiz form' view from Jose's Frontend structure and CSS. This was done cause of a few missing fields.

---

Key Features & Changes

What has been added or changed?

✔ Service Abstractions

• AssignmentService.js, QuizService.js, QuestionService.js, ChoiceService.js, SolutionService.js
• Each provides get, create, update and delete methods with automatic JWT header injection

✔ React Component Enhancements

• AssignmentCreate.jsx now supports:
  • Listing, creating, updating, deleting assignments
  • Auto-create & edit Quiz info
  • Manage Questions, Choices, and Solutions in nested views
  • “Back” buttons for intuitive navigation

✔ Backend Updates

• Added AssignmentListView & corresponding URL:

  path('assignments/', AssignmentListView.as_view(), name='assignment-list')

• Tweaked tests to cover list, detail, create, update, delete for Assignment
• Ensured Quiz view, Question view, Choice View, and Solution View all use IsAdminOrTutor permissions where appropriate

✔ State Management & UX

• Unified loading/error state with useState + useEffect
• Positive-only <input type="number" min /> enforcement
• Truncated text previews with “…” for long questions/solutions

---

Why This Is Needed

What problem does this solve?

This service centralizes all lesson-related API calls, preventing code duplication across components and ensuring consistent authentication handling. With this service, components can easily interact with Assignment, Quiz, Question, Choice, and Solution data without needing to understand the underlying API structure or authentication requirements. Furthermore, this provides a scalable structure, making it easier to add new endpoints (e.g. future “Submissions” or “Grades”).

---

Related Issue

🔗 This PR addresses [Issue #182 - Create Frontend Services for Assignment and Quiz API Integration]

---

Implementation Details

How was this feature developed?

• Axios HTTP client for making API requests
• Promise-based async/await pattern for clean, readable asynchronous code
• JWT authentication automatically included in request headers
• DRF Permission: IsAuthenticated, IsAdminOrTutor
• Local storage integration for secure token retrieval
• Modular service design for easy integration with React components
• Used React JSX, with useState and useEffect for state management
• Ensured accessibility & responsive design for seamless usage on all devices

---

How to Test This PR

Step-by-step testing guide

1. Run both front and back end (check README for instructions)
2. Login with a admin or tutor account via LessonConnect Website (http://localhost:5173/)
   2.1. If you need to make a tutor account head to the Django admin panel (http://127.0.0.1:8000/admin) and create a user. Then under Users create a profile (http://127.0.0.1:8000/admin/users/profile/) for the user you created and give them the role of a Tutor.
3. After logging in and seeing a 'login successful!' popup, go to the url and type: http://localhost:5173/tutor/assignment_create
4. You will be prompted with all the assignments in your database, if there's none create a new assignment, then click View/Manage Quiz (you can manage it's quiz features via the 'view/manage Quiz' button in the Actions tab)
5. Edit quiz info, then Manage Questions (you can also manage the quizzes questions, choices, and solution all via the 'Manage Questions' button in the Quiz info Actions tab)
6. Add/Edit/Delete Questions
7. Test API endpoints + button functionalities

---

Files Added/Modified

📂 List of important files changed in this PR

File Name	Description
Services/AssignmentServices.js	Main Assignment API wrapper
Services/QuizServices.js	Main Quiz API wrapper
Services/QuestionServices.js	Main Question API wrapper
Services/ChoiceServices.js	Main Choice API wrapper
Services/SolutionServices.js	Main Solution API wrapper
Components/AssignmentCreate.jsx	Main React component for assignments & quizzes
lessons/views.py	Added assignment list view + minor tweaks
lessons/urls.py	Added assignment list URL (new routes for list)
lessons/tests.py	Added assignment list test

---

AI Code Usage

🤖 Was AI-generated code used in this PR?

• Yes (AI was used to help create skeleton code for ChoiceServices.js & SolutionServices.js. Alongside a few helper method implementations in AssignmentCreate.jsx)
• No

---

Checklist for Reviewers

Things to check before approving this PR:

• Does the feature work as expected?
• Is authentication handled properly for all requests?
• UI navigation and “Back” buttons behave as expected?
• Are HTTP methods (GET, POST, PATCH, DELETE) used appropriately throughout?
• Is the code clean, modular, and well-documented? Passes existing tests?

---

Next Steps & Future Enhancements

What improvements can be made after merging?

• choice deletion UI (allow users to delete a choice once no longer needed)
• Solution update UI (allow users to update a solution once a solution is added to a question)
• Solution delete UI (allow users to delete a solution once no longer needed)
• Refactor return button (create and apply a more enhanced back/return button)

---

Final Notes

Thank you for reviewing! Please leave feedback if you have any suggestions or concerns. Special thanks to @Jose-Alarcon1! As this was a team effort with @Jose-Alarcon1, who was there from the beginning helping with the assignment create frontend scaffolding, CSS, and general feedback.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.16%. Comparing base (ee13801) to head (f6aa074).
Report is 18 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #184   +/-   ##
=======================================
  Coverage   81.16%   81.16%           
=======================================
  Files          17       17           
  Lines         775      775           
  Branches       51       51           
=======================================
  Hits          629      629           
  Misses        123      123           
  Partials       23       23           

☔ 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.

[Jose-Alarcon1]

Assignment & Quiz Backend–Frontend Integration

Provide Axios/API Endpoint Guidance and UI Enhancements for AssignmentCreate

Overview

This PR focuses on bridging the frontend-backend collaboration for the AssignmentCreate component by providing guidance on Axios usage and API endpoint integration. In addition, several UI enhancements were made to improve user interaction and prepare the component for seamless backend connectivity.

Key Features & Changes

• Core Feature Implementation:
  • Added a Delete Quiz button with helper logic to manage quiz deletion.
  • Added a Create Solution button to allow adding solutions to quizzes.
• UI/UX Enhancements:
  • Allowed the Student ID field to accept manual input instead of integer increments.
  • Fixed the superfluous "Add Another Choice" button on the Short Answer form.

Why This Is Needed

• Enables users to better manage quizzes and solutions directly in the UI.
• Prepares the AssignmentCreate module for backend API linkage.
• Improves UI clarity and form behavior.
• Bridges the collaboration gap between frontend and backend.
• Addresses issues that blocked backend from linking pages by modularizing the frontend structure, providing Axios/API guidance, and enabling smoother integration.

Related Issue

🔗https://github.com//issues/182

Implementation Details

• React hooks (useState) used for dynamic quiz and solution handling.
• Helper functions added for better modularity.
• UI updates tested with mock data to ensure functional correctness.

How to Test This PR

1. Navigate to the Assignments list.
2. Open a Quiz from the list.
3. Test the Delete Quiz functionality.
4. Test the Create Solution button by entering a solution for a quiz.
5. Verify manual entry in the Student ID field.
6. Confirm that no "Add Another Choice" button appears when creating a Short Answer question.

Files Added/Modified

File	Description
AssignmentCreate.jsx	Added delete quiz logic, create solution functionality, UI fixes

AI Code Usage

Yes — 2 Minimal

Checklist for Reviewers

• Delete button works
• Create solution functionality works
• UI improvements render correctly
• No new console errors or warnings
• Ready for backend connection

Special Contribution Note

🔔 Major Contribution:
I helped bridge the collaboration gap between frontend and backend by guiding Ethan on Axios usage and API endpoint integration.
This joint effort directly supports the success of full Assignment & Quiz backend/frontend connectivity.

🙏 Special Thanks:
Big thanks to Ethan for a smooth, effective, and enjoyable collaboration throughout this PR. He is the contributor that did the vast majority of work on this PR. I simply made a few UI upgrades and provide initial guidance.

Next Steps & Future Enhancements

• Link the delete and solution functions to real API routes.
• Add confirmation modals for delete actions.
• Further refine UI interactions with backend responses.

Final Notes

Thank you for reviewing! Please leave any comments or feedback if adjustments are needed.

Author: Jose Alarcon

[aviendha-andrus]

🔍 Peer Review: Great Job on This PR!

Hey Ethan and Jose! 👋 — just finished reviewing your PR titled "Assignment & Quiz Backend–Frontend Integration". Here’s my feedback:

---

✅ What Looks Great

• The core feature (Assignment & Quiz integration) has been implemented cleanly — functionality aligns perfectly with Issue #182 - Create Frontend Services for Assignment and Quiz API Integration.
• Really appreciate the service abstraction — creating modular Service.js files makes future maintenance and expansion much easier.
• Your backend adjustments (new views, URLs, tests) are lightweight, well-placed, and don’t introduce unnecessary complexity.
• The PR description is excellent — the detailed testing instructions and file change breakdown are super helpful for reviewers.
• Great job making the UX smooth: intuitive navigation ("Back" buttons), proper form validation, truncated text previews, etc.
• Backend logic looks excellently transitioned to a frontend environment

---

💡 Suggestions for Improvement

• Consider adding a sidebar that has all the view/manage quiz options on it. While it makes sense to traverse view/manage quiz -> manage questions -> create questions -> add solution, it gets a bit lengthy. A drop down menu might be a bit easier to navigate for quick fixes.
• Frontend appearance looks a little too much like plain datasets, perfect for an initial development, but eventually maybe the ID doesn't have to be displayed, or the information can be displayed in a usable layout.
• I feel like the solution logic might need more work, as you can only edit the question but not the solution.

---

🧪 Tested This Feature

I ran the following test steps:

• ✅ Launched both backend and frontend successfully.
• ✅ Logged in as an Admin/Tutor (tested user creation flow via Django Admin).
• ✅ Navigated to /tutor/assignment_create.
• ✅ Verified Assignment creation, listing, editing, and deletion.
• ✅ Verified "Manage Quiz" functionality — created quizzes, edited quiz info, and linked questions/choices/solutions.
• ✅ Verified state changes (e.g., loading indicators) and correct API requests.
• ✅ Checked responsiveness and proper JWT authentication headers.

Everything worked smoothly! 🚀

---

🔄 Next Steps

• Once choice/solution deletion UIs are added, make sure those new features update the frontend state immediately after a successful DELETE call.
• Brainstorm layout so that it is more accessible

---

🚀 Final Thoughts

This is absolutely fantastic! I'm really impressed, this was a big task and a lot went into it, great job!

[SameerIssa]

Peer Review: Great Job on This PR!

Hey Ethan and Jose — just finished reviewing your PR titled "Assignment & Quiz Backend–Frontend Integration". Here’s my feedback:

---

What Looks Great

• The core feature has been implemented cleanly — functionality aligns with the related issue.
• Extremely well-structured and modular service layer abstractions for Assignments, Quizzes, Questions, Choices, and Solutions.
• Love the attention to UI/UX details — loading states, navigation back buttons, and dynamic form handling make the flow intuitive.
• Your component structure and modularity make the codebase very scalable and easy to maintain.
• Backend updates were smartly scoped, permission checks (IsAdminOrTutor) were added appropriately, and API endpoints were expanded without introducing breaking changes.
• The PR description is thorough — clearly walks through the purpose, changes, and testing instructions.

---

Suggestions for Improvement (if any)

• Consider adding success and error toast notifications after create/update/delete operations for even better UX feedback.
• It might be helpful to add slight loading spinners/buttons especially during form submission to prevent double-submit risks.
• Eventually, consider batching Choice and Solution management into combined API endpoints to reduce multiple round trips per save.
• For more complex workflows later, a sequence diagram for the CRUD flow could be helpful during onboarding of new developers.

---

Tested This Feature

I ran the following test steps:

• Navigated to the Assignment Create page and verified assignment listing worked.
• Created a new assignment and verified backend creation.
• Edited quiz information, questions, choices, and solutions end-to-end.
• Tried deleting questions and verified it removed child choices/solutions.
• Confirmed that JWT auth headers are attached correctly through service layers.
• Resized window, tested UX responsiveness on desktop and mobile.

Everything behaved exactly as expected

---

Next Steps

• Would be awesome to polish up the UI for deleting Choices and Solutions (currently noted as future work).
• Keep me posted when you implement the enhanced Return Button refactor; I can review that too.

---

Final Thoughts

Fantastic job on this integration! This is a huge step toward fully operationalizing LessonConnect's assignment/quiz system. The modular design choices will pay off tremendously when scaling to Submissions, Grades, or Rubrics later. Thanks for your detailed, thoughtful work — this was a really strong PR to review, approved!

• Sameer

[EthanZ23]

Thanks so much for the thoughtful and detailed review @aviendha-andrus and @SameerIssa. I really appreciate you both taking the time to thoroughly review and test my PR.

I completely agree with the points you raised. A more streamlined navigation (like a sidebar or dropdown), cleaner data layouts, and improved solution editing are definitely areas that need more planning and work. Same for the UX polish with loading states, and more immediate frontend updates after DELETE operations. Your suggestions really help validate the next steps I had in mind, especially around brainstorming a more accessible layout and eventually batching Choice/Solution management to make saves more efficient.

For now, my focus is on finalizing a stable MVP that gets the core creation, editing, updating, and deletion workflows working. After that, I’ll start layering on these UI/UX refinements and broader architecture improvements you mentioned. Thanks again for the excellent insights.

-- Ethan