[UX Improvement] Add Wikipedia Logo to Toggle Button for Better Context

[yatikakain]

Description

The current toggle button in the quiz generation interface does not provide any visual context to indicate its functionality. Users might not immediately understand that this button is used to enable or disable additional context retrieval from Wikipedia. To improve UX, we propose adding a Wikipedia logo with enabled and disabled states to make its purpose clearer.

Suggested Improvements

1. Add Wikipedia Logo:

   • When the toggle is enabled, display the Wikipedia logo in a highlighted state.
   • When the toggle is disabled, show a faded or crossed-out version of the Wikipedia logo.

2. Tooltip or Label (Optional):

   • A small tooltip saying "Enable Wikipedia Context" or "Disable Wikipedia Context" when hovering over the button.

Expected Behavior

• Users will immediately understand that this toggle controls whether additional context from Wikipedia is included in the quiz generation process.
• The UI will be more intuitive, reducing confusion and improving usability.

Proposed Solution

• Modify the toggle button UI to include a Wikipedia logo.
• Change the appearance of the logo dynamically based on the toggle state.
• Optionally, add a tooltip or small label for further clarity.

Additional Context

This change will enhance the user experience by making the toggle button’s function visually obvious, eliminating the need for guesswork.

Would love to work on this! Let me know your thoughts. 🚀

[mohit-soni2003]

Hey ! @yatikakain i am interested to work on it, can you please assign this issue to me.

[yatikakain]

@mohit-soni2003 I'm already working on this.

[akhileshdasari2004]

Hey @yatikakain, I have resolved this issue! I made the toggle button with the Wikipedia logo with dynamic transparency. Assign me this as i cannot push the changes to the repo .

[yatikakain]

Hi @akhileshdasari2004 the issue is already resolved in the PR #191
Additionally the issue was only related to extension UI.