Animated HTML Rating System
A Great Little Place needed a browser-based rating tool that felt more deliberate than a standard star widget and still captured usable feedback data.
- Client
- A Great Little Place
- Duration
- Mar 2012 - Jun 2012
- Engine
- Construct 2
- Platforms
- Web / HTML5
The Brief
A standard star-rating widget collects a click and nothing else. The brief called for something visitors would actually engage with, and responsive enough to behave the same way across the range of devices a booking site's traffic comes from.
Our Approach
We built a custom HTML5 solution around a dynamic, interactive slider rather than a static star widget, using Construct 2 for the interactive animation layer, HTML5 for web compatibility, JavaScript for interactivity, and CSS3 for a responsive, adaptive design. The slider carries 2D character animations that react as a visitor drags it, giving the rating action itself some personality instead of a plain form control. Behind it, a PHP backend captures the user ratings and analytics, so A Great Little Place gets structured feedback data from the interaction.
The useful part was not the animation on its own. It was the combination of a playful front-end interaction and a backend reporting path that still behaved like a proper data collection tool. The widget had to feel light on the page, work across device sizes, and send ratings back in a form the client could actually use.
The Outcome
The result was a rating interaction with animated visitor feedback and structured reporting for A Great Little Place through the PHP backend, instead of a static star widget that only records a number.
Related Services
For browser-based interactive tools like this, see our interactive HTML5 content and Construct development services.