TeachBack

Explain it first. Fix the idea, not the wording.

Comment

Inspiration

Students can give a correct-looking answer without understanding the idea behind it. Answer-first AI tutoring can make this worse when it supplies an explanation the learner copies while the original misconception remains.

TeachBack works differently. The learner explains first. GPT-5.6 then identifies one lesson-linked conceptual gap, the application presents a focused visual, and the learner explains again. The Growth view shows what changed without assigning a grade or mastery label.

What it does

The public demo teaches Why Earth has seasons through a six-stage loop:

  1. Learn: review the complete trusted lesson and four source fragments.
  2. Explain: describe the idea before seeing any help.
  3. Notice: GPT-5.6 identifies one supported idea and one primary misconception, with exact learner excerpts and source citations.
  4. Explore: use a deterministic axial-tilt visual targeted to that one gap.
  5. Retry: explain again without a model answer to copy.
  6. Growth: compare both unchanged attempts against the same lesson and show source-cited observations about what changed.

A printable learning record provides both Learner and Teacher views. The Teacher view shows the primary gap, cited evidence, intervention, whether the learner reopened the visual, observed changes, and a suggested follow-up—without grades, scores, mastery claims, or ability labels.

The demo is account-free and uses fictional learner responses.

How we built it

TeachBack is a responsive Next.js 16, React 19, and TypeScript web application deployed on Vercel.

GPT-5.6 runs server-side through the OpenAI Responses API with strict Zod structured outputs and store: false. It performs the first-attempt concept comparison, selects one source-grounded misconception, produces short gap-specific guidance and one reflection question, and compares the two explanations.

The application—not the model—controls navigation, state, visualization geometry, allowed-source-ID checks, exact-attempt preservation, safety language, and record composition.

Deterministic validators enforce:

  • known source IDs only;
  • learner excerpts that appear exactly in unchanged learner text;
  • one supported idea, one gap, and one guided intervention;
  • guidance of no more than 120 words and exactly one question;
  • rejection of grades, scores, mastery claims, ability or learning-style labels, effort or motivation judgments, and medical or learning diagnoses;
  • revalidation of restored session feedback before rendering;
  • safe interrupted-request recovery without losing learner words.

The axial-tilt explorer is deterministic, accessible SVG. Every orbital position reuses one parallel axis vector, and an equivalent text description supports reduced-motion and nonvisual use.

Codex served as the implementation lead. It translated the approved PRD and designs into the P0 architecture; implemented typed contracts, the state machine, model boundaries, validation, responsive interface, and accessible visual; wrote unit and Playwright tests; verified live GPT-5.6 behavior; and prepared the architecture, demo, and submission documentation.

Primary Codex session ID: 019f7c76-686b-77c3-87ca-d46191b6f47b.

Challenges we ran into

The central challenge was creating a strict boundary between model interpretation and product truth. The model can identify a conceptual gap, but the application must check that every learner excerpt is exact, every citation uses an allowed bundled source ID, the intervention follows the required limits, both attempts remain unchanged, and unsafe or malformed feedback is withheld.

The seasons visual also required scientifically consistent geometry rather than a decorative illustration. The Earth axes must remain parallel at all four orbital positions, with the correct hemisphere tilting toward the Sun in June and December.

Finally, live formative feedback must fail safely. TeachBack performs at most one repair or transient retry under a shared timeout. If the contract still fails, it preserves the learner’s work and offers a calm retry instead of silently switching to fixture output.

Accomplishments that we're proud of

  • A complete explain → notice → explore → retry → growth learning loop.
  • Live GPT-5.6 source-grounded formative analysis and comparison.
  • Byte-for-byte preservation of both learner attempts.
  • Deterministic allowed-source-ID, exact-excerpt, sequence, and prohibited-language validation.
  • An accessible four-position axial-tilt explorer with reduced-motion text.
  • A responsive mobile Retry experience with safe-area-aware actions.
  • Printable Learner and Teacher records.
  • 21 unit, state, schema, grounding, and safety tests plus an 8-test desktop/mobile browser suite.
  • A fresh production judge run with no browser warnings or errors.

What we learned

AI becomes more useful in education when it reveals thinking instead of replacing it. The meaningful artifact is not the generated explanation; it is the learner’s conceptual change, grounded in their own words and a trusted source.

We also learned that provenance and refusal behavior must be visible product states. When feedback cannot be validated, withholding it is better than showing a plausible but unsupported tutoring response.

What's next

After the single-lesson MVP, TeachBack could add teacher-authored trusted lessons, source uploads, voice or transcription, classroom and LMS integrations, persistent learner profiles with appropriate consent controls, and a library of deterministic misconception-specific visuals.

TeachBack is formative support, not a grader, test engine, diagnosis tool, or general-purpose answer generator.

Built With

Share this project:

Updates