added renderer in answer box

Author: Edwin Chan

CENTRAL.md

@@ -35,7 +35,7 @@ Stack: Next.js, NextAuth (Google + dev bypass), Prisma, KaTeX for math, Lucide i
 
 - **Mobile/classes cleanup** — fixed mobile `/problem-sets` hiding task rows by restoring the responsive card table, stabilized the mobile sidebar grid to avoid icon reflow on tap/focus, and made dashboard auth/actions render as a compact mobile account card. `/classes` now has a teacher/admin `Announcements` subtab that lists existing class messages and supports author/admin deletion. Display-name fallbacks now treat literal `"null"`/`"undefined"` strings as empty via `lib/display-name.ts`.
 - **Mobile sidebar focus fix** — mobile sidebar sheet geometry now remains stable under `:hover`, `:focus`, and `:focus-within`, preventing the nav grid from jumping upward when a mobile tap focuses one of the upper links (source: `app/globals.css`).
-- **Practice answer preview and LaTeX grading** — Practice now renders a small KaTeX preview above the answer input using `mathInputToTex(...)`. `lib/grading.ts` normalizes math delimiters and common LaTeX forms through `lib/math-input.ts`, so expression answers and answer keys can use `$...$`, `\sqrt{...}`, `\frac{...}{...}`, braced powers, and `\pi`.
+- **Answer previews and LaTeX grading** — Practice and problem-set answer boxes now render a small KaTeX preview above the input using `mathInputToTex(...)`. `lib/grading.ts` normalizes math delimiters and common LaTeX forms through `lib/math-input.ts`, so expression answers and answer keys can use `$...$`, `\sqrt{...}`, coefficients before functions like `5\sqrt{2}-7`, `\frac{...}{...}`, braced powers, and `\pi`.
 - **Anime.js animation pass** — the shared `MathCurveLoader` now drives SVG path drawing, rotation, and dot pulses with Anime.js v4 instead of CSS keyframes, `AnimeRouteEffects` adds reduced-motion-aware route reveal animations for key panels/rows/actions, and analytics surfaces use `AnalyticsMotion` plus animated `TrendChart` path/dots for growing bars and drawn charts. `TypewriterGreeting` keeps the existing typed/deleted text state machine and only animates the caret, avoiding per-character text tween flicker. Dependency: `animejs` in `package.json`.
 - **Per-set analytics access** — admins can open `/admin/sets/[id]/analytics` directly from the student-facing problem set header and the admin set editor; the editor delete action uses full-size topbar button sizing while the list keeps compact row actions.
 - **Problem-set writeups** — `/problem-sets/[slug]/writeups` lets signed-in users post LaTeX/HTML solution notes with up to four images, then sort by latest/top and upvote/downvote posts. Authors can delete their own writeups with confirmation; admins can delete any writeup. `/writeups` is the sidebar directory for latest/top writeups and problem-set search. Persistence uses new `Writeup`, `WriteupImage`, and `WriteupVote` Prisma models plus `lib/writeup-images.ts`; image bytes are stored through the existing storage layer and streamed via `/api/files/[id]`.

DBSMO/Projects/dbsmo/Components.md

@@ -43,6 +43,7 @@ This note maps important [[dbsmo]] UI/components to their source files and usage
 ## Practice and Games
 
 - `PracticePage` in `app/practice/page.tsx`: client practice workflow using `/api/practice/tags`, `/api/practice/next`, and `/api/practice/submit`; renders `LatexStatement` and shows a live KaTeX answer preview above the answer input using `mathInputToTex(...)`.
+- `AnswerGrid` in `app/problem-sets/[slug]/answer-grid.tsx`: client answer sheet for standard, inline-statement, and test layouts; answer inputs now show the same live KaTeX preview above each active answer box.
 - `FtwLobbyForm` in `app/ftw/lobby-form.tsx`: FTW mode entry. It filters tags, creates solo matches through `/api/ftw/matches`, creates rooms through `/api/ftw/rooms`, and joins rooms through `/api/ftw/rooms/[code]/join`.
 - `FtwMatchClient` in `app/ftw/match/[id]/match-client.tsx`: solo FTW problem/submit client.
 - `FtwRoomClient` in `app/ftw/room/[code]/room-client.tsx`: multiplayer room UI with polling state, host actions, answer submission, locked/revealed answers, scores, and current problem rendering through `LatexStatement`.

README.md

@@ -47,6 +47,6 @@ Session updates from the CodeGraph/Second Brain indexing pass onward:
 - Fixed mobile problem-set task cards/sidebar tap layout/dashboard account controls, added the `/classes` Announcements subtab with existing-message deletion, and normalized literal `null` display names.
 - Added direct per-set Analytics buttons on both the student-facing set header for admins and the admin set editor, and made the set-editor Delete button match the other topbar action sizing.
 - Fixed the mobile sidebar tap/focus jump by keeping the opened sheet geometry stable when nav items receive focus.
-- Added a live rendered answer preview in Practice and expanded expression grading to understand common LaTeX input/keys such as `$5$`, `\sqrt{5}`, `\frac{1}{2}`, and `2^{1/2}`.
+- Added live rendered answer previews in Practice and problem-set answer boxes, and expanded expression grading to understand common LaTeX input/keys such as `$5$`, `\sqrt{5}`, `5\sqrt{2}-7`, `\frac{1}{2}`, and `2^{1/2}`.
 
 © 2026 Cosmic Crusader

app/globals.css

@@ -1598,6 +1598,59 @@ img.avatar {
   font-weight: 800;
 }
 
+.set-answer-preview,
+.answer-cell-preview,
+.test-answer-preview {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 72px;
+  min-height: 46px;
+  max-width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--color-border);
+  border-bottom: 0;
+  border-radius: 12px 12px 0 0;
+  background: color-mix(in srgb, var(--meter-track) 84%, var(--color-card-bg));
+  color: var(--color-text-strong);
+  overflow-x: auto;
+}
+
+.set-answer-preview {
+  justify-self: start;
+  margin-bottom: -8px;
+}
+
+.answer-cell-preview {
+  width: calc(100% - 20px);
+  justify-self: center;
+  margin: 10px 10px -1px;
+}
+
+.test-answer-preview {
+  width: 100%;
+  min-height: 38px;
+  margin-bottom: -1px;
+  padding: 8px 10px;
+  border-radius: 10px 10px 0 0;
+  font-size: 0.86rem;
+}
+
+.set-answer-preview .katex-display,
+.answer-cell-preview .katex-display,
+.test-answer-preview .katex-display {
+  margin: 0;
+}
+
+.set-answer-preview .katex,
+.answer-cell-preview .katex {
+  font-size: 1.08em;
+}
+
+.test-answer-preview .katex {
+  font-size: 1em;
+}
+
 .question-answer-input:focus {
   border-color: var(--color-blue);
   outline: none;

app/problem-sets/[slug]/answer-grid.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { CheckCircle2, MessageSquareWarning, RotateCcw, XCircle } from "lucide-react";
 import { MathCurveLoader } from "@/app/math-curve-loader";
+import { mathInputToTex } from "@/lib/math-input";
 import { LatexStatement } from "./latex-statement";
 
 type SubmitResult = {
@@ -381,6 +382,17 @@ export function AnswerGrid({
     return "";
   }
 
+  function answerPreview(problemNumber: number, className = "set-answer-preview") {
+    const tex = mathInputToTex(answers[problemNumber] ?? "");
+    if (!tex) return null;
+
+    return (
+      <div className={className} aria-live="polite">
+        <LatexStatement statement={`$${tex}$`} />
+      </div>
+    );
+  }
+
   function renderJumpGrid(className?: string) {
     return (
       <div className={`problem-jump-grid${className ? ` ${className}` : ""}`}>
@@ -582,14 +594,17 @@ export function AnswerGrid({
                         <CheckCircle2 size={16} className="grade-icon correct-icon" />
                       </div>
                     ) : (
-                      <input
-                        className="question-answer-input"
-                        aria-label={`Answer ${number}`}
-                        name={`answer-${number}`}
-                        placeholder="Enter answer"
-                        value={answers[number] ?? ""}
-                        onChange={(e) => onAnswerChange(number, e.target.value)}
-                      />
+                      <>
+                        {answerPreview(number)}
+                        <input
+                          className="question-answer-input"
+                          aria-label={`Answer ${number}`}
+                          name={`answer-${number}`}
+                          placeholder="Enter answer"
+                          value={answers[number] ?? ""}
+                          onChange={(e) => onAnswerChange(number, e.target.value)}
+                        />
+                      </>
                     )}
                   </label>
 
@@ -667,14 +682,17 @@ export function AnswerGrid({
                               <CheckCircle2 size={14} className="grade-icon correct-icon" />
                             </div>
                           ) : (
-                            <input
-                              className="test-answer-input"
-                              aria-label={`Answer ${cell.label}`}
-                              name={`answer-${cell.problemNumber}`}
-                              placeholder={cell.label}
-                              value={answers[cell.problemNumber] ?? ""}
-                              onChange={(e) => onAnswerChange(cell.problemNumber, e.target.value)}
-                            />
+                            <>
+                              {answerPreview(cell.problemNumber, "test-answer-preview")}
+                              <input
+                                className="test-answer-input"
+                                aria-label={`Answer ${cell.label}`}
+                                name={`answer-${cell.problemNumber}`}
+                                placeholder={cell.label}
+                                value={answers[cell.problemNumber] ?? ""}
+                                onChange={(e) => onAnswerChange(cell.problemNumber, e.target.value)}
+                              />
+                            </>
                           )}
                         </td>
                       );
@@ -829,6 +847,7 @@ export function AnswerGrid({
             {problemNumbers.map((number) => (
               <label className="answer-cell" key={number}>
                 <span className="answer-cell-label">Question {number}</span>
+                {answerPreview(number, "answer-cell-preview")}
                 <input
                   className="answer-cell-input"
                   aria-label={`Answer ${number}`}

lib/grading.ts

@@ -273,7 +273,7 @@ function insertImplicitMultiplication(tokens: MathToken[]): MathToken[] {
     const current = tokens[index];
     const previous = result[result.length - 1];
 
-    if (previous && shouldInsertMultiplication(previous, current, tokens[index + 1])) {
+    if (previous && shouldInsertMultiplication(previous, current)) {
       result.push({ type: "operator", value: "*" });
     }
 
@@ -286,7 +286,6 @@ function insertImplicitMultiplication(tokens: MathToken[]): MathToken[] {
 function shouldInsertMultiplication(
   previous: MathToken,
   current: MathToken,
-  next: MathToken | undefined,
 ): boolean {
   const previousCanEndValue =
     previous.type === "number" ||
@@ -299,7 +298,7 @@ function shouldInsertMultiplication(
     return false;
   }
 
-  return !(current.type === "identifier" && next?.type === "leftParen");
+  return true;
 }
 
 class MathExpressionParser {

tests/grading.test.ts

@@ -72,6 +72,16 @@ describe("gradeAnswer", () => {
     expect(result.isCorrect).toBe(true);
   });
 
+  it("evaluates coefficients before LaTeX functions", () => {
+    const result = gradeAnswer({
+      answerType: "expression",
+      answerKey: "5\\sqrt{2}-7",
+      rawAnswer: "5sqrt(2)-7",
+    });
+
+    expect(result.isCorrect).toBe(true);
+  });
+
   it("evaluates LaTeX fractions and braced powers in expressions", () => {
     expect(
       gradeAnswer({