Prompt: Multi Step Wizard Form with Validation and Summary (FPC007)
Model: Groq-Gemma2-9b | Date: 05/17/2025 | Page Title: Event Registration Wizard
Prompt Description
Create a complex multi-step wizard form for event registration. The wizard should have at least 3 steps, client-side validation at each step, a progress indicator, and a final summary/confirmation step.
**Wizard Steps & Content:**
1. **Step 1: Personal Information (`data-testid='wizard-step-1'`)**
* Fields: Full Name (required), Email (required, valid email), Phone Number.
* 'Next' button to proceed.
2. **Step 2: Event Preferences (`data-testid='wizard-step-2'`)**
* Fields: Ticket Type (select dropdown: Standard, VIP), Number of Tickets (input number, min 1), Dietary Restrictions (textarea).
* 'Previous' and 'Next' buttons.
3. **Step 3: Payment Details (Structure Only - `data-testid='wizard-step-3'`)**
* Placeholder fields for Card Number, Expiry Date, CVV. (No actual payment processing).
* 'Previous' and 'Next' buttons.
4. **Step 4: Review & Confirm (`data-testid='wizard-step-4'`)**
* Display a summary of all information entered in previous steps.
* 'Previous' button and a 'Confirm Registration' button (`data-testid='confirm-registration-btn'`).
5. **Success Message:** After confirming, hide the wizard and show a success message (`data-testid='registration-success-msg'`).
**Core Features:**
* **Progress Indicator:** Visually show current step and total steps (e.g., 'Step 1 of 4'). Identifiable as `data-testid='wizard-progress-indicator'`.
* **Navigation:** Users must be able to navigate between steps using 'Next'/'Previous' buttons.
* **Client-Side Validation:** Each step's 'Next' button should trigger validation for its fields. If invalid, display clear error messages next to fields (e.g., in a `div` with `data-testid='error-fieldName'`) and prevent progression.
* **State Management:** Data entered in each step should persist when navigating back and forth.
**Technical & Accessibility Requirements:**
* Semantic HTML. The wizard itself could be a large `<form>` or a series of fieldsets within a form.
* ARIA: Use `aria-current='step'` on the current step in the progress indicator. Manage focus appropriately when navigating steps (e.g., focus first field of new step).
* Responsive design for all steps and form elements.
* All form elements MUST have associated labels. Error messages should be programmatically linked to inputs using `aria-describedby`.
* Styling: Tailwind CSS. Custom CSS/JS for visual styling of progress bar, step transitions (optional animation), and dynamic error message display.
**Testing Identifiers:**
* Wizard container: `data-testid='event-wizard-form'`
* Step 1 container: `data-testid='wizard-step-1'` (and similar for other steps)
* Progress Indicator: `data-testid='wizard-progress-indicator'`
* Full Name Input: `data-testid='input-fullName'`
* Email Input: `data-testid='input-email'`
* Error for Full Name: `data-testid='error-fullName'`
* Confirm Registration Button: `data-testid='confirm-registration-btn'`
* Success Message: `data-testid='registration-success-msg'`
Key Links & Info
Analysis Timestamp: 05/17/2025 11:46:10
Desktop Screenshot:
Mobile Screenshot:
Scores for this Prompt
Technical Quality
158.0 / 190.0
(83.16%)
Prompt Adherence
10.0 / 21.0
(47.62%)
Overall Weighted
54.73 %
Technical Quality Breakdown
HTML Structure & Semantics (5.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| HTML Lang | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Page Title | PASS |
PASS
|
1.0 / 1.0 | desktop |
| Main Tag | FAIL |
No visible <main>.
|
0.0 / 1.0 | desktop |
| Nav Tag | WARN |
No visible <nav>.
|
0.0 / 1.0 | desktop |
| Footer Tag | WARN |
No visible <footer>.
|
0.0 / 1.0 | desktop |
| H1 Count | FAIL |
No visible headings.
|
0.0 / 1.0 | desktop |
| Heading Order Logic | FAIL |
No visible headings.
|
0.0 / 1.0 | desktop |
| Image Alts | INFO |
No visible images (INFO).
|
1.0 / 1.0 | desktop |
| Form Labels | INFO |
No relevant form inputs (INFO).
{
"unlabeled_count": 0
}
|
2.0 / 2.0 | desktop |
CSS Quality (2.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| CSS Variables | WARN |
No :root CSS variables.
|
0.0 / 2.0 | desktop |
| Modern Layout Body/Main | INFO |
Flex/Grid not on body/main.
|
0.0 / 1.0 | desktop |
| Inline Styles | PASS |
Minimal inline styles.
|
1.0 / 1.0 | desktop |
| !important Usage | PASS |
No !important in <style> tags.
|
1.0 / 1.0 | desktop |
JavaScript Health (5.0 / 5.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| JS Console Errors | PASS |
No significant JS errors.
|
5.0 / 5.0 | desktop |
Accessibility (Axe-core) (28.0 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Axe Violations | WARN |
3 Axe violations (Crit:0,Ser:0,Mod:3,Min:0). Report: axe_report_FPC007_Multi_Step_Wizard_Form_with_Validation_and_Summary_desktop.json
[
{
"help": "Page must have one main landmark",
"id": "landmark-one-main",
"impact": "moderate"
},
{
"help": "Page must contain a level-one heading",
"id": "page-has-heading-one",
"impact": "moderate"
},
{
"help": "All page content must be contained by landmarks",
"id": "region",
"impact": "moderate"
}
]
|
14.0 / 20.0 | desktop |
| Axe Violations | WARN |
3 Axe violations (Crit:0,Ser:0,Mod:3,Min:0). Report: axe_report_FPC007_Multi_Step_Wizard_Form_with_Validation_and_Summary_mobile.json
[
{
"help": "Page must have one main landmark",
"id": "landmark-one-main",
"impact": "moderate"
},
{
"help": "Page must contain a level-one heading",
"id": "page-has-heading-one",
"impact": "moderate"
},
{
"help": "All page content must be contained by landmarks",
"id": "region",
"impact": "moderate"
}
]
|
14.0 / 20.0 | mobile |
Rendered Color & Contrast (25.0 / 30.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Step' in <span class='text-gray-500 mr-2'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Failure (AA) | FAIL |
AA FAIL 3.68 for '1' in <span class='text-blue-500 font-bold'>
{
"bg_eff": "rgb(255, 255, 255)",
"fg": "rgb(59, 130, 246)",
"ratio": 3.6779011537825332,
"text": "1"
}
|
0.0 / 0.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'of 4' in <span class='text-gray-500 ml-2'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | desktop |
| Contrast Check Result | FAIL |
1 WCAG AA failures on 3 instances.
|
12.5 / 15.0 | desktop |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'Step' in <span class='text-gray-500 mr-2'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Failure (AA) | FAIL |
AA FAIL 3.68 for '1' in <span class='text-blue-500 font-bold'>
{
"bg_eff": "rgb(255, 255, 255)",
"fg": "rgb(59, 130, 246)",
"ratio": 3.6779011537825332,
"text": "1"
}
|
0.0 / 0.0 | mobile |
| Contrast Suboptimal (AAA) | INFO |
AAA WARN 4.83 for 'of 4' in <span class='text-gray-500 ml-2'>
{
"ratio": 4.834490081424352
}
|
0.0 / 0.0 | mobile |
| Contrast Check Result | FAIL |
1 WCAG AA failures on 3 instances.
|
12.5 / 15.0 | mobile |
Responsiveness (Viewport & Scroll) (16.0 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Viewport Meta Tag | PASS |
Configured correctly for responsiveness.
|
4.0 / 4.0 | desktop |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | desktop |
| Viewport Meta Tag | INFO |
Already scored for this prompt.
|
0.0 / 0.0 | mobile |
| Horizontal Scrollbar | PASS |
No horizontal scrollbar detected.
|
6.0 / 6.0 | mobile |
Performance (Lighthouse) (38.4 / 40.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
99/100
|
19.8 / 20.0 | desktop |
| Lighthouse Score | PASS |
93/100
|
18.6 / 20.0 | mobile |
Accessibility (Lighthouse) (20.0 / 20.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
100/100
|
10.0 / 10.0 | desktop |
| Lighthouse Score | PASS |
100/100
|
10.0 / 10.0 | mobile |
Best Practices (Lighthouse) (9.6 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | desktop |
| Lighthouse Score | PASS |
96/100
|
4.8 / 5.0 | mobile |
SEO (Lighthouse) (9.0 / 10.0)
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Lighthouse Score | PASS |
90/100
|
4.5 / 5.0 | desktop |
| Lighthouse Score | PASS |
90/100
|
4.5 / 5.0 | mobile |
Prompt Adherence Breakdown
| Check | Status | Message & Data | Points | Viewport |
|---|---|---|---|---|
| Wizard Form Container | PASS |
Element 'form[data-testid='event-wizard-form']' present and visible.
Selector:
form[data-testid='event-wizard-form'] |
1.0 / 1.0 | desktop |
| Step 1 Visible Initially | FAIL |
Element '[data-testid='wizard-step-1']' present but NOT visible.
Selector:
[data-testid='wizard-step-1'] |
0.0 / 1.0 | desktop |
| Progress Indicator | PASS |
Element '[data-testid='wizard-progress-indicator']' present and visible.
Selector:
[data-testid='wizard-progress-indicator'] |
2.0 / 2.0 | desktop |
| Full Name Input | FAIL |
Element 'input[data-testid='input-fullName']' present but NOT visible.
Selector:
input[data-testid='input-fullName'] |
0.0 / 1.0 | desktop |
| Email Input | FAIL |
Element 'input[data-testid='input-email']' present but NOT visible.
Selector:
input[data-testid='input-email'] |
0.0 / 1.0 | desktop |
| Step 1 Validation (Empty Name) | PASS |
All interaction steps/outcomes verified.
|
4.0 / 4.0 | desktop |
| Navigate to Step 2 and Back | FAIL |
One or more interaction steps/outcomes failed.
Interaction Log: [ "--- Executing Step: Fill Step 1 ---", " [FAIL] Trigger config missing." ] |
0.0 / 5.0 | desktop |
| Progress Indicator Updates (aria-current) | FAIL |
Custom script evaluation result: False (expected true).
Script Eval: False
|
0.0 / 3.0 | desktop |
| Form Inputs Have Labels | PASS |
Custom script evaluation result: True (expected true).
Script Eval: True
|
3.0 / 3.0 | desktop |
| Wizard Form Container | PASS |
(Points already awarded) Element 'form[data-testid='event-wizard-form']' present and visible.
Selector:
form[data-testid='event-wizard-form'] |
0.0 / 1.0 | mobile |
| Step 1 Visible Initially | FAIL |
Element '[data-testid='wizard-step-1']' present but NOT visible.
Selector:
[data-testid='wizard-step-1'] |
0.0 / 1.0 | mobile |
| Progress Indicator | PASS |
(Points already awarded) Element '[data-testid='wizard-progress-indicator']' present and visible.
Selector:
[data-testid='wizard-progress-indicator'] |
0.0 / 2.0 | mobile |
| Full Name Input | FAIL |
Element 'input[data-testid='input-fullName']' present but NOT visible.
Selector:
input[data-testid='input-fullName'] |
0.0 / 1.0 | mobile |
| Email Input | FAIL |
Element 'input[data-testid='input-email']' present but NOT visible.
Selector:
input[data-testid='input-email'] |
0.0 / 1.0 | mobile |
| Step 1 Validation (Empty Name) | PASS |
(Points already awarded) All interaction steps/outcomes verified.
|
0.0 / 4.0 | mobile |
| Navigate to Step 2 and Back | FAIL |
One or more interaction steps/outcomes failed.
Interaction Log: [ "--- Executing Step: Fill Step 1 ---", " [FAIL] Trigger config missing." ] |
0.0 / 5.0 | mobile |
| Progress Indicator Updates (aria-current) | FAIL |
Custom script evaluation result: False (expected true).
Script Eval: False
|
0.0 / 3.0 | mobile |
| Form Inputs Have Labels | PASS |
(Points already awarded) Custom script evaluation result: True (expected true).
Script Eval: True
|
0.0 / 3.0 | mobile |