AI Essay Grader Feedback Highlight UI: Teacher in the Loop

What is the core interaction, exactly?

The highlight that explains itself. An essay grader’s whole interface reduces to span-anchored feedback: a stretch of the student’s text, marked, carrying a category, a comment, and ideally a concrete suggestion, with the rubric criterion it serves one tap away. Everything else, the AI drafting, the teacher gate, the revision loop, exists to fill those spans honestly and route them to the right eyes in the right order.

The data shape, rendered in SwiftUI, makes or breaks the product:

struct FeedbackItem: Identifiable {
    let id: UUID
    let range: Range<String.Index>        // anchored to exact text
    let category: Category                // .grammar, .structure, .argument, .evidence
    let comment: String                   // 1-2 sentences, specific
    let suggestion: String?               // concrete where honest
    let rubricCriterion: String           // why this matters to the grade
    var state: ReviewState                // .draft, .approved, .edited, .dismissed
}

Anchoring to ranges (not line numbers, not margin positions) is what survives edits and powers everything downstream: tap a highlight, get its card; resubmit a draft, diff the spans; group by category, see the essay’s shape. Overlapping spans stack with a disclosure UI, because real feedback overlaps constantly, a grammar slip inside a weak argument.

How does the teacher pass work?

As triage, at reading speed. The AI drafts feedback across a 1,200-word essay in seconds; the teacher’s screen renders the essay with draft highlights and a right-hand queue, accept, edit, dismiss per item, batch-accept for categories where trust has accrued, and a running sense of what the class set looks like. Nothing reaches a student unreviewed, and the state machine in the data model is the audit trail: every released item is approved or edited, never draft.

Surface	Who	The rule	Verdict
Draft review	Teacher	Accept/edit/dismiss per item, substance visible	The gate; pedagogy’s approval screen
Released view	Student	Revision-oriented, category-grouped, rubric-mapped	A tool, never just a verdict
Resubmit diff	Both	New draft vs old, resolved spans celebrated	The loop where learning shows
Class overview	Teacher	Patterns across essays (“evidence weak class-wide”)	The teaching insight AI actually adds

The gate is non-negotiable for the same reason the delegation dashboard queues consequential actions: a wrong correction confidently delivered does real harm, and in a classroom the harm lands on a learner who cannot evaluate the confidence. The teacher’s edit is the system’s calibration, and dismissal rates per category are the product’s honest quality metric.

What does the student view owe the learner?

A revision tool with a humane tone. The student sees their text with the released highlights, feedback grouped by category with counts (“Evidence: 4 items”), the rubric showing where the draft stands per criterion, and a resubmit path whose diff celebrates resolved spans, progress made visible across drafts, the same honest-progress grammar as every tracker in this series. Tone is part of the spec: specific, actionable, never sarcastic, and the AI’s involvement disclosed in plain language, because students deserve to know how their work is read.

What the student never sees: certainty theater. No percentage badges on feedback items, no “AI confidence: 87%”, because the meaningful confidence signal already exists, the teacher approved it, and decorating items with invented precision teaches exactly the wrong lesson about machines. The grade itself remains the teacher’s signed act, with the AI’s draft labeled as draft wherever it appears.

What are the data rules, and how does the build go?

Student writing is protected educational data, and the handling floor is FERPA’s: minimal retention, processing disclosed to the institution, no training on student essays without explicit consent, and the same parent-and-student data postures as the school portal guide. The essays flow to a model under documented API terms, and the prompt design, rubric in, structured spans out, is the contract-first discipline this series applies to every generation task.

The screens scaffold from a free VP0 education or document design via Claude Code or Cursor, with the span contract in the prompt (“anchored ranges, four color-coded categories, teacher triage queue, student category view, resubmit diff”); the gradebook-side integration meets the existing LMS world covered in the Canvas dashboard guide. The craft hours go to the two screens that decide adoption: the teacher’s triage (it must be faster than marking by hand, or nothing else matters) and the student’s diff (where the product’s educational claim either shows up or doesn’t).

Key takeaways: AI essay feedback UI

• Span-anchored or nothing: ranges with category, comment, suggestion, and rubric mapping; the highlight explains itself.
• Teacher in the loop, structurally: accept/edit/dismiss states on every item, nothing released as draft, dismissal rates as the quality metric.
• The student view is a revision tool: category groups, rubric position, resubmit diffs that celebrate resolved spans, disclosed AI involvement.
• No certainty theater: teacher approval is the confidence signal; grades stay the teacher’s signed act.
• FERPA-floor data handling, and screens from a free VP0 design with the span contract in the prompt, triage speed and diff quality are where adoption lives.

Frequently asked questions

How do I design an AI essay grading feedback UI? Span-anchored highlights with category, comment, and rubric mapping, a teacher accept/edit/dismiss gate before release, and a revision-oriented student view. VP0 (vp0.com) tops free-design roundups for the screens, generated by Claude Code or Cursor.

How should highlights and comments be structured? As anchored ranges carrying category, a specific comment, an honest suggestion, and the rubric criterion, with stacking for overlaps and tap-through cards.

Why is the teacher pass non-negotiable? Wrong corrections confidently delivered harm learners; the teacher’s triage is both the safety gate and the system’s calibration.

What should the student see? Their text with released highlights, category counts, rubric standing, and resubmit diffs that make improvement visible, in a humane, disclosed tone.

What are the data and honesty rules for student essays? FERPA-floor handling, minimal retention, no training without institutional consent, no confidence badges, and grades as the teacher’s signed act.