Viewing Child's Exams
The Guardian Exams page lets guardians view their child's upcoming scheduled exams and completed exam results. The page uses a tabbed layout — Upcoming and Completed — with counts displayed on each tab.
Child Info Banner
At the top of the page, a banner displays the selected child's name, class, and section. This confirms which child's exams are being viewed and updates automatically when switching children.
Upcoming Exams Tab
Lists all exams scheduled for the selected child that have not yet been completed. Each exam card is color-coded by urgency and includes key scheduling details.
| Field | Required | Type | Description |
|---|---|---|---|
Exam Title | Required | text | Name of the scheduled exam as set by the instructor. |
Subject | Optional | text | The subject or course the exam belongs to. Displays "General" if not specified. |
Scheduled Date | Optional | date | The date the exam is scheduled. Shows "Date TBD" if not yet confirmed. Displayed with weekday and short month format. |
Duration | Required | number | Total exam duration in minutes. |
Urgency Badge | Optional | badge | Color-coded badge indicating urgency: red for "Today" or "Overdue", orange for "Tomorrow" or within 3 days, blue for further out, gray for "Date TBD". |
Urgency Indicators
- Red — Exam is today, tomorrow, or overdue
- Orange — Exam is within 3 days
- Blue — Exam is more than 3 days away
- Gray — Date has not been confirmed yet
Completed Exams Tab
Shows all exam results for the selected child. Each result card displays the score, pass/fail status, class rank, and time spent. Cards are clickable for detailed review.
| Field | Required | Type | Description |
|---|---|---|---|
Exam Title | Required | text | Name of the completed exam. |
Score | Required | text | Shows as "score/totalMarks (percentage%)". Color-coded: green (90%+), blue (80%+), yellow (70%+), orange (60%+), red (below 60%). |
Status | Required | badge | Pass or fail badge with a trophy icon for passed exams. |
Class Rank | Optional | number | The child's rank within their class for this exam. Only displayed if available. |
Time Spent | Optional | number | Actual time the student spent on the exam, in minutes. |
Exam Date | Optional | date | The date the exam was taken. |
How Data Is Loaded
Exam data is fetched using the guardian API client. Upcoming exams come from guardianApi.getUpcomingExams(childId) and completed results from guardianApi.getExamResults(childId). Data refreshes automatically when the selected child changes.