Implement Dynamic Question Statistics Table in Exam Details Page

[oankit]

Description

This PR introduces the QuestionsTable component to the ExamDetails page, providing detailed insights into the response distribution for each question within an exam. The table dynamically adjusts to display only the options (A, B, C, D, E) that were actually selected by students, ensuring a clear and concise representation of the data.

Key Features:

1. Dynamic Question Statistics Table:

   • The QuestionsTable component is integrated into the ExamDetails page.
   • It displays the percentage of students who selected each response option (A, B, C, D, E) for every question in the exam.
   • The table only includes columns for response options that were used in the exam, omitting unused options for a cleaner presentation.

2. Drawer Integration for Easy Access:

   • The QuestionsTable is accessible via a drawer that can be triggered from the ExamDetails page.
   • Users can view the response distribution by clicking on the "View Question Distribution" button, which opens the drawer containing the table.

3. Multi-Select Filtering:

   • Users can filter the questions displayed in the QuestionsTable using a multi-select dropdown, allowing for focused analysis on specific questions.
   • The dropdown supports selecting up to 10 questions simultaneously.

4. Data Fetching and Handling:

   • Exam details, including the question statistics, are fetched from the backend using secure API calls.
   • The backend processes the student responses and calculates the percentage distribution for each response option, ensuring accurate and reliable data.

5. Responsive Design:

   • The QuestionsTable is built to be responsive, fitting well within the layout of the ExamDetails page and adapting to various screen sizes.

Backend Enhancements:

• Added logic to calculate the percentage of students who selected each response for every question in an exam.
• The backend now returns these statistics as part of the examData, which is utilized by the QuestionsTable component.

UI/UX Improvements:

• Integrated tooltips for better user guidance, particularly for actions like viewing the question distribution and exporting results as CSV.
• Ensured that the table provides a clear visual distinction between questions and response options, enhancing readability and user experience. Closes #207 #243

Type of change

• [x] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [x] This change requires a documentation update

How Has This Been Tested?

Manual and visual verification

Checklist:

• [x] I have performed a self-review of my own code
• [x] I have commented my code where needed
• [ ] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules
• [x] Any UI changes have been checked to work on desktop, tablet, and mobile