Tutor Chat AI Block for Vue

Everything. The topic, the three concepts, their questions, answers, hints and explanations are typed at the top of the file, and typed messages get one of a few scripted replies. Nothing is sent and no model runs. To make it real, generate or load each concept's content on the server and send check to a service that grades the answer; keep the card as it is.

Choose one of four answers and press Check. A correct answer shows its reason and locks the card; a wrong one says so and lets you try again. Hint is a button you can press twice, each press adds a line and the card counts "Hints used: 1 of 2". Once you are correct, the "Next concept" button appears in a slot the card already reserved, so nothing moves.

From the cards: a dot is filled when its question was answered correctly, the current concept has a ring, and the level badge follows the number of correct concepts (Beginner, Steady, Confident). Nothing is typed twice, and each dot also has a hidden word for a screen reader ("done", "now", "next").

The log is a focusable region announced as a log. The answers are a native radio group with a visible question as its legend, arrow keys move between them, and the result is also written to the status line under the composer. Enter sends typed text while Shift and Enter add a line.

Yes. The cards and rows use logical spacing, the send arrow mirrors, and fractions such as 3/8 keep their own order inside the text.

The answers stack in one column, the concept names sit in a row you can scroll sideways, and the composer keeps its place. The window keeps its height and only the log scrolls.