shadcn.io is not affiliated with official shadcn/ui
Music Quiz Music Block for React
A ten-question music quiz with a question number, score and streak, four answers you can choose with keys 1 to 4, a fifteen second CSS timer bar, two treble staff note questions, feedback on why, and a results card with Play again.
Installation
Overview
Turn music theory into a short game, with this music quiz for React with Base UI. It holds Chordquiz, a music trivia game, in a hairline frame with a plus mark on each corner: a strip with the question number, the score and the streak, both rolling with a Sliding Number, then one question at a time with four answers. Press 1 to 4 on the answers to choose, then Enter or the Shine Button to check. Each question has a timer bar, one CSS animation of fifteen seconds; when it ends the question closes with "Time is up" and the answer shown. Two questions draw a note on a treble staff to name. A checked answer shows a glyph and a sentence on why, and after the tenth a results card lists every question with the answer and Play again. Under reduced motion there is no timer and the card says "No time limit". It's built from Sliding Number, Shine Button and Guides, with a drawn staff and a CSS entrance only. For learning apps, theory courses and trivia.
FAQ
How do I write my own questions?
Edit QUESTIONS: each has the question text, four options, the index of the correct option, a sentence on why, and a staff field, which is a note like G4 to draw on the treble staff or an empty string for none. The deck length is the array's length, so the numbers, the progress and the results list follow it. Put the correct option in different places, as the sample does, so the position gives nothing away.
How does the timer work, and what about reduced motion?
The bar is one CSS animation of fifteen seconds that slides out; when it finishes it fires one event, and the block marks the question as timed out and shows the answer. There is no interval and no clock. It is not rendered once the question is checked. With reduced motion on, the bar is not drawn at all, the animation never runs and the card says "No time limit", so nobody is rushed by motion they asked to avoid.
How do I play it from the keyboard?
Tab to the answers, press 1 to 4 to choose one (focus follows the choice), then Enter to check; Enter again moves to the next question, and focus goes to its heading. The arrow keys also move between answers as in any radio group. Choosing an answer does not check it, so a stray key never costs a point, and Check answer says so if nothing is chosen.
How is the staff drawn, and can I add more clefs?
The staff is a small drawing from the note name: the position of the note is counted in half spaces from the bottom line, so G4 sits on the second line, and ledger lines appear for notes outside the five lines. It draws the treble clef only; for another clef shift the starting note of the count and name the clef in the question. The drawing has a title and the question text says which clef it is.
Is anything sent, and what stays local?
Nothing is sent. The score, the streak and the results live in the page and reset when you press Play again or reload. To make it real, load the deck from your API, post each answer with the time it took, and keep the best score on the account; the timer should then be enforced on the server too.