shadcn.io is not affiliated with official shadcn/ui
Skill Assessment Onboarding Block for React
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 React with Base 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.
Related
- Pro
Role Selection Onboarding
One choiceA role question as a stack of five cards, each with an icon and a line on what it opens first, a field inside Something else that waits at its height, and one sentence that says where the product will start you.
- Pro
Goal Setting Onboarding
One choiceA goal question split in two: four goals as radio rows on one side and the plan the pick makes on the other, three things to set up with an Include switch each and one sentence that counts what stays.
- Pro
Learning Track Picker Onboarding
One choiceA course library's first-run track picker as a whole screen: three tracks in a single-open accordion where the open row is the choice, its first lessons, and a line and a button worked out from the pick.
- Pro
Company Size Onboarding
One choiceA team-size question as a slider over five labelled stops, a drawing of people that grows with the thumb, one sentence for that size and a list of the three things set up first.
- Pro
Certification Onboarding
Milestones and recapsA certificate step drawn as a stair of three exams: choosing a step takes every step below it, a tab lists the path, and another asks a practice question that answers on the spot.
- Pro
Use Case Onboarding
One choiceA use-case question as a grid of six tiles on shared hairlines, each a native radio with a small drawing of its board, and one sentence under the grid that says which board opens first.