[Feature] Add PDF modes for quizzes with logo, dynamic pages, UI updates, and text wrapping.

[yatikakain]

Related Issue

This PR addresses #111, which introduces multiple PDF generation modes to provide users with flexible options for creating quiz documents.

Description of Changes

This PR implements the following key features in the extension as well as website:

1. PDF Generation Modes:

• Added three distinct modes for PDF generation:
  • Questions Only (original functionality)
  • Questions with Answers (new)
  • Answers Only (new)
• Implemented through a dropdown menu interface for seamless mode selection.

2. UI Enhancements:

• Replaced the single "Generate PDF" button with an interactive dropdown.
• Ensured that color of the dropdown list matches with the background for a more cohesive design.
• Added smooth transitions and hover effects for better user experience.
• Implemented click-outside functionality to close the dropdown menu.

3. Dynamic Page Management:

• Modified the page layout to dynamically manage pages based on content.
• The page will now automatically add new pages when the current page is filled, ensuring that the content is properly distributed across pages.
• Instead of fixing the number of questions per page, I have used dynamic spacing to ensure that the questions and options always remain on the same space, and content does not overflow onto the next page incorrectly. This approach ensures that questions and their corresponding options stay together on the same page, improving readability and consistency.

4. Text and Option Layout:

• Instead of fixing the number of questions per page, I’ve implemented dynamic spacing to ensure that both the questions and options stay aligned across varying content amounts, without clipping.

5. Logo Integration:

• Added a logo to the header of the PDF, ensuring branding.

6. Default A4 Size:

• The PDF generation is now set to a default A4 size, making it suitable for standard printing formats.

7. Text Wrapping:

• Initially, the longer questions were overflowing horizontally and were not visible. To resolve this, I implemented text wrapping for both the questions and answers, ensuring that the text does not overflow or get cut off, which improved the layout and readability.

Screenshot:

---

Looking forward to your review and feedback!

[yatikakain]

@Roaster05 @Aditya062003 please have a look at this. I've implemented the changes in both the website and the extension. Looking forward to your review!