Completion Score Feature Demo
Watch your profile completion percentage grow as you fill in the form fields below. A real-time progress bar and smart weighting system guide you to 100%.
What is a Completion Score?
A completion score is a dynamic percentage that reflects how much of a user profile or form has been filled out. It combines a visual progress bar with real-time feedback, encouraging users to complete all fields and improve data quality.
This demo showcases a weighted scoring system where critical fields (email, phone) contribute more to the total score than optional ones. The progress bar animates smoothly, providing instant visual gratification.
Live Demo: Complete Your Profile
UX Rationale & Design Decisions
Weighted Scoring System
Not all fields are equal. Email and phone (20% each) are weighted higher because they’re critical for communication. Profile details like name and bio (15% each) come next, while optional fields (company, website, location at 10% each) round out the score. This weighting reflects real-world importance and guides users to prioritize essential information.
Accessibility Considerations
All form inputs have associated labels for screen readers. The progress bar includes ARIA attributes (role, aria-valuenow, aria-valuemin, aria-valuemax) to announce completion percentage. Focus states are clearly visible, and color contrast meets WCAG AA standards. Keyboard navigation works seamlessly through all interactive elements.
Performance & Smooth Animation
The progress bar uses CSS transitions for smooth width changes, avoiding janky JavaScript animations. Event listeners are attached once on page load, and the scoring calculation runs in O(n) time. Debouncing isn’t needed here since checkbox/input changes are discrete user actions, not rapid-fire events like scrolling.
How AI Builder Generates This Feature
AI Builder transforms a simple text prompt into a complete WordPress page with Gutenberg blocks, custom CSS, and vanilla JavaScript. Here’s how it works for this completion score feature:
- Gutenberg Blocks: AI Builder creates a JSON structure with core/cover for the hero, core/group containers for sections, and a core/html block containing the form markup and widget structure.
- Custom CSS: The AI generates scoped styles for the completion widget, progress bar animations, form fields, and responsive breakpoints—all without conflicting with existing site styles.
- Vanilla JavaScript: AI Builder writes the complete logic for input listeners, weighted scoring calculation, progress bar updates, and ARIA attribute management—no libraries required.
- Instant Deployment: The generated code is production-ready and works immediately in WordPress, with no manual editing or debugging needed.
This approach lets you prototype complex interactive features in seconds, then customize the generated code to match your exact requirements.
Reproduce This Feature
Want to generate this exact completion score feature in your own WordPress site? Copy the prompt below and paste it into AI Builder:
Create a block demonstrating a "Completion Score" feature: a checklist + form inputs (email, phone, bio, etc.) and a percentage meter that updates as fields are completed, with a smooth animated progress bar. Implement the full logic in vanilla JS inside an HTML block (input listeners, weighted scoring, rendering).Copied!
Ready to Build Interactive Features?
AI Builder empowers you to create complex, interactive WordPress pages with custom logic in seconds. No coding expertise required—just describe what you want, and watch it come to life.