[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:

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
   • Added smooth transitions and hover effects for better user experience
   • Implemented click-outside functionality to close the dropdown menu

Implementation Details

• Dropdown Menu:

  • Created using native HTML/CSS for optimal performance
  • Maintains consistent styling with the existing application theme
  • Automatically closes after selection or when clicking outside

• PDF Generation Logic:

  • Modified generatePDF function to accept mode parameter
  • Added conditional rendering based on selected mode
  • Preserved existing PDF styling and layout while adding new content options

Screenshot

[Roaster05]

@yatikakain could you change the colour of the dropdown list to match with the bg, also could you also make a change in the functionality that if the content of the page is filled it will automatically add a new page

[yatikakain]

@Roaster05 yeah sure, I'll work on the page break feature and UI color of dropdown

[yatikakain]

@Roaster05 @Aditya062003
I’ve made the following changes based on your feedback and additional improvements:

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.
• Updated the color of the dropdown list to better match 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!

[Aditya062003]

Looks great! @Roaster05 think we can merge this.

[Roaster05]

@yatikakain remove the comments from line 74 till 98

[Roaster05]

@yatikakain also you should mimic these changes for the web ui as well

[Roaster05]

@Aditya062003 ??