Interface Layout
The exam interface uses a two-panel layout: Left Panel (Question Area)- Question number and total count
- Question text
- Flag and notes buttons
- Answer options with elimination feature
- Navigation controls
- Question grid overview
- Performance breakdown (after finishing)
On mobile devices, these panels stack vertically for better readability.
Top Navigation Bar
The header displays key information and controls:Left Side
- X button: Exit the test (prompts confirmation if test is in progress)
- Test name: Shows which domain or “Certification Exam” for full tests
Right Side
- Theme toggle: Switch between light and dark mode
- Timer: Shows remaining time in MM:SS format (orange clock icon)
- Finish button: Submit your exam (green, shows only during active tests)
Question Panel Features
Question Number Badge
A small gray badge shows your progress:Action Buttons
Two buttons appear in the top-right of the question panel:Flag for Review
Add Notes
Notes are personal and don’t affect your score. They’re useful for tracking your thought process or concepts you want to research later.
Answer Selection Panel
Answer Options
Each option displays:- Letter badge (A-D): Color-coded based on state
- Answer text: The full option content
- × button: Eliminate/reactivate this option
Option States
Unselected (default)- White background with gray border
- Gray letter badge
- Clickable
- Orange background with orange border
- Orange letter badge (white text)
- Glowing ring effect
- Click again to deselect
- Gray background
- Strikethrough text
- Grayed out letter badge
- Cannot be selected until reactivated
- Green background with green border
- Shows after submitting in domain tests
- Red background with red border
- Shows after submitting in domain tests if you selected it
Eliminating Options
To eliminate an answer:- Click the ”×” button next to the option
- The text becomes crossed out and grayed
- The option cannot be selected
- Click the ”×” button again
- The option returns to normal state
- You can now select it if needed
Continue Button (Domain Tests Only)
In study mode, a large orange Continue button appears below the answer options. Button states:- Enabled: You’ve selected at least one answer that differs from your previous selection
- Disabled (grayed out): You haven’t changed your selection or selected too many options
The Continue button only appears in domain tests. In exam mode, use the Previous/Next buttons to navigate.
Feedback Display (Study Mode Only)
After clicking Continue in a domain test, immediate feedback appears:Correct Answer
- Green box with checkmark
- “Correct!” message
- Shows the correct answer letters and text
- Explanation of why the answer is correct
Incorrect Answer
- Red box with X
- “Incorrect” message
- Shows the correct answer letters and text
- Detailed explanation to help you learn
Navigation Controls
The navigation section appears at the bottom of the right panel.Previous and Next Buttons
Domain Tests (Study Mode)- Previous: Jump to previous unanswered question
- Next: Jump to next unanswered question
- Buttons are disabled if no unanswered questions in that direction
- Cannot revisit answered questions
- Previous: Go to the previous question (any question)
- Next: Go to the next question (any question)
- Automatically saves your current answer when moving
- Can revisit any question at any time
In exam mode, navigating away from a question auto-saves your selected answer.
Question Grid
A numbered grid shows all questions in the test: Grid layout:- 10 questions per row on desktop
- 5 questions per row on mobile
- Click any number to jump to that question
- White/gray = unanswered
- Green = answered correctly
- Red = answered incorrectly
- Orange = flagged for review
- Blue dot in corner = has notes
- White/gray = unanswered
- Darker gray = answered
- Orange = flagged for review
- Blue dot in corner = has notes
- No green/red until after finishing
- Orange ring around the number
Review Screen (Exam Mode Only)
When you click Finish in a full exam simulation, a review screen replaces the question panel.Review Question List
All questions display in a scrollable list: Answered questions:- Green background
- Green left border
- ”✓ Answered” label
- Click to jump to that question
- Red background
- Red left border
- ”✗ Not answered” label
- Click to jump to that question
Review Panel Controls
The right panel shows:- Blue information box explaining the review process
- Checkbox: “I have reviewed all answers”
- Two buttons:
- Cancel: Return to the exam
- Confirm Finish: Submit exam (only enabled after checking the box)
Results Screen
After finishing a test, the interface transforms to show your results.Score Display
The center shows:- Large trophy icon (green if passed, red if not passed)
- “Certification Passed!” or “Not Passed” heading
- Your score (100-1000 scale)
- Minimum passing score (700)
Domain Performance Breakdown
For full exams, the right panel displays:- Performance percentage for each domain
- Progress bars (green if ≥70%, red if below)
- AWS recommendation reminder (aim for 80%+)
Action Buttons
Two buttons at the bottom:- Back to Home: Return to main menu
- Retry Test: Take another test of the same type
Dark Mode
Toggle between light and dark themes using the sun/moon icon in the top-right. Light mode:- White backgrounds
- Black text
- Better for well-lit environments
- Dark slate backgrounds
- Light text
- Reduces eye strain in low-light conditions
Your theme preference is saved automatically and persists across sessions.
Security Features
During active tests, the app enforces exam integrity: Disabled actions:- Screenshots (PrintScreen, Cmd+Shift+S)
- Text copying (Ctrl+C, right-click copy)
- Right-click context menu
- Alert message appears
- Action is blocked
- Test continues normally
Accessibility Features
- Keyboard navigation: Use Tab to move between elements, Enter/Space to select
- High contrast: Dark mode provides better contrast for visual accessibility
- Clear labels: All buttons have descriptive titles on hover
- Responsive design: Works on desktop, tablet, and mobile devices