shadcn.io is not affiliated with official shadcn/ui
Skill Assessment Onboarding Block for Vue
Four skills rated with a segmented control each, and a result band that works out the overall level, where to start and which basics to skip from the four ratings.
Installation
Overview
Start a learner at the right place, with this skill check for Vue with Ark UI. It is a setup panel of Whetstoneby, a coding practice site: four ruled rows, Layout, Components, Accessibility and Data, each with a Segment Group of New, Comfortable and Expert, and under them a result band. Once all four are rated the band shows the overall level (Beginner, Intermediate or Advanced, worked out from the four ratings and never typed), where Whetstoneby will start you (the first skill you rated lowest), and one sentence that says which basics it skips (“We'll skip the basics for Layout, Accessibility and Data and start you at Components.”). Before that it says how many rows are still to rate. Use this level is the one Shine Button, with a ghost Skip for now. Nothing is saved.
FAQ
How do I change the skills and levels?
Edit SKILLS (an id, a title and a hint each) and LEVELS (an id, a label and the points a rating adds). The overall level is the mean of the four ratings' points, below 0.6 Beginner and below 1.4 Intermediate, otherwise Advanced; change the two limits in overallOf to suit your scale. The start point is the first skill rated lowest, and the skipped basics are every skill rated above New.
Is the level typed anywhere?
No. The level, the start point and the sentence are all computed from the ratings by small pure functions (overallOf, startOf, sentenceOf), so they cannot disagree with the rows. Until all four are rated the band shows dashes and the sentence counts how many are left.
What happens if I press Use this level too early?
It stays in the tab order and looks quiet until all four rows are rated. Pressing it names the first row still to rate (“Rate Data to continue.”) in a reserved line and puts focus on that row's control.
How do the segments work from the keyboard?
Each row is one tab stop, named for its skill (“Layout level”), and the arrow keys move between New, Comfortable and Expert and pick one; the chosen segment is filled with the foreground color so the primary color stays on the one button.
What stays local in the demo, and how do I wire it?
Everything: Use this level says the ratings were saved in this demo and nothing leaves the page. In your app send the four ratings to your server where submit says so and start the learner where its response says; keep the sentence as the receipt. Skip for now says it was skipped and keeps the ratings.