shadcn.io is not affiliated with official shadcn/ui
Quiz Game Chat Block for React
A one-to-one quiz thread where a host posts five question cards, you pick an option and press Check, and a progress band, a streak and a result card with Copy result follow.
Installation
Overview
Run a quiz inside a conversation, with this quiz game chat for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Quizmoor, a quiz host: Message rows where the host posts one question card at a time, each with four options as selectable rows. Pressing Check gives the verdict as a glyph and a word ("Correct", "Not quite: Bern") with one line of why, and the next question follows behind a Typing Indicator Text. A band under the top bar shows a Progress bar ("Question 3 of 5") and the streak, both worked out from your answers. After the fifth question a result card lists the score and the best streak, a Copy Button copies a line to share and Play again starts over. The composer's Shine Button, the only colored control, takes words, but the quiz is choice-only. The frame is ruled by Guides, and everything moves with CSS only. For a quiz bot, an onboarding check or any host that asks one thing at a time.
FAQ
How are the score and the streak worked out?
From one list of your answers. A question is correct when the option you picked matches its answer index, the score counts the correct ones, the streak counts the correct ones in a row at the end and the best streak is the longest run. The progress bar, the band text and the result card all read the same list, so they cannot disagree.
How do I change the questions?
Edit QUESTIONS: each has its text, four options, the index of the correct one and a line that says why. The count in the band, the progress bar and the result follow the length of the list.
What happens if I type instead of choosing?
The composer works like any chat, but the host answers that in this demo you choose an option on the card, and after the last question it points you to Play again. Quick answers are the card's own options, so there is nothing to parse.
What stays in the page, and how do I make it real?
Everything. The host is a script with short typing pauses, the answers live in state and Copy result writes one line to the clipboard (the status line says if the browser refuses). To wire it for real, send each answer to your server where check runs, take the verdict and the next question from the response and append them to the same list.
Is it usable with a keyboard and a screen reader?
Each question is a fieldset with its text as the legend and native radio buttons, so arrow keys move between options. The verdict is a glyph and a word, never color alone, the log is a focusable region announced as a log, and the status line announces what Check or Copy did.