Interactive Rating Card

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

Star ratings help users give feedback quickly. In this challenge, you will build an Interactive Rating Card where users click a rating from 1 to 5, then submit to see a thank-you message.

The component should have five rating buttons, a submit button, and a thank-you panel that appears after submission showing the selected rating.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Declare reactive ratings array and a selectedRating ref.
Bind clicks to set rating value.
Submit click displays the custom thank-you panel.

Example Demo

User Flow

Step-by-step Flow Explanation:

User loads the page: The rating component shows a rating card asking for feedback from 1 to 5.
Select rating: User clicks on a rating button (1 to 5). The clicked button is styled with the active state class.
Submit feedback: User clicks the submit button.
Switch state: The rating panel is hidden, and the thank-you state panel is rendered displaying the selected rating value.
Verification: The test suite queries rating buttons, triggers clicks, and verifies successful state transition.

Related UI Challenges

Component UI

Discussion (0)

Join the Discussion

App.vue

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Component contains rating buttons (1 to 5)	Pending	Pending execution
Should active style the rating button on click	Pending	Pending execution
Should show the thank you state upon clicking Submit button	Pending	Pending execution