shadcn.io is not affiliated with official shadcn/ui
Homework Help Chat Block for Radix UI
A helper's worked solution as a three-column table of steps, with an Explain button on each step that posts a typed explanation and a box that checks your answer.
Installation
Overview
Show a worked solution that you can question, with this homework help chat for React with Radix UI. A framed window of fixed height holds the thread between you and Hollis Verbeek, a homework helper at Sumbrook: after the problem, "Solve 3(x − 2) + 4 = 2x + 9", a card shows the solution as a native table of five steps with the step number, the work in mono type and the rule named in words. Each step has an "Explain" Button: pressing it posts "Explain step 3, please." as your message, brings Hollis's typed explanation after a Typing Indicator Text and marks the step "Explained". The last line takes your own answer in an Input, and "Check my answer" says Right, with both sides worked out, or Not yet with the step to revisit. The composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only. It fits a study app, a tutoring portal or a help desk for course questions.
FAQ
What stays in the page, and how do I make it real?
Everything. The explanations are typed in the STEPS list, the replies to other messages come from a short typed script, and the check is a few lines of arithmetic in this file. Nothing is sent and no model runs, as the line under the composer says. To make it real, replace explainReply with the helper's own message when it arrives, and send the typed answer to your marking service in check.
How does
It reads the number you typed, puts it into both sides of the equation and compares them: when they match, the answer is Right and the card shows the common value. When they don't, it shows both sides and names the step to revisit, looked up from a short typed list of common mistakes (for example 9 points to step 5, where the 2 is added back) and step 2 for anything else.
What does Explain do to the thread?
It appends your request and, after a short typing line, the typed explanation for that step, starting "About step N:", and marks the row "Explained" with a check. The count in the card's header follows. Pressing it again asks again; the mark stays.
Why a plain table?
The solution is a native table with a caption, row headers for the step numbers and a stable three-column layout, so a screen reader can move through it by cell and the equations stay plain text with no math library. Equations use the real minus sign and run left to right in any language.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time such as "You, 09:42". Delivery is a glyph and a word, never a color. The table has a hidden caption and column headings, each Explain button is named with its step number, and your answer box has a visible label.