feat(frontend): implement question type components (#540)

[minhle35]

Overview
This PR implements the five question component types requested in issue #540. These components enhance the application's form capabilities by supporting various response formats.
Key Changes

• Implemented five question component types: ShortAnswer, Dropdown, MultiChoice, MultiSelect, and Ranking
• Created a test route for component demonstration and validation

Testing

• Currently using the test route /question-components-test for manual testing of these components. Below are screenshots of the current implementation.

---

Fixes per request

1. Short Answer: extend the width and height (Increased width of textarea using cols attribute)

2. Dropdown box: add borderline, improve hover effects, and highlight selected options

3. Ranking: improve UI by integrating React DnD

[gyoumi]

Looks mostly good, a few things which could be fixed:

1. Short Answer

• It would be good if the border of the textbox was visible even if not selected, just so it is clear where the textbox is and where it ends
• It shows in your screenshots, but in the browsers I have tested (Chrome, Opera, Vivaldi) the text indicator does not appear when I click into the textbox. It would be good if we can have it be visible and flashing so that users can know when the textbox is active and ready to accept text

2. Ranking

• Similarly with the textbox, would be good if we could see exactly where and when each draggable element begins and ends.
• It would also be good if the draggable icon was inline with the rest of the element. You can try putting it on the left or right side (or remove it entirely) and see which looks best

[minhle35]

Fixed two components

1. Short answer: Replaced current textarea with existing TextArea component
   • Improves UI consistency
   • Adds focus states and hover effects

2. Ranking: Added interactive hover effects for drag-and-drop items

Screen.Recording.2025-06-06.at.1.53.55.PM.mov