React Components

import { EdpireAssessmentPlayer, AssessmentShell, EdpireQuestion } from "@edpire/sdk/react"

import { EdpireAssessmentPlayer } from "@edpire/sdk/react"

function LessonPage({ assessmentId }: { assessmentId: string }) {
  return (
    <EdpireAssessmentPlayer
      tokenEndpoint="/api/edpire/token"
      assessmentId={assessmentId}
      onComplete={(r) => console.log("Score:", r.score, "/", r.max_score)}
      onError={(e) => console.error(e.code, e.message)}
      style={{ width: "100%", height: "100vh" }}
    />
  )
}

import { AssessmentShell } from "@edpire/sdk/react"
import type { SubmitResult } from "@edpire/sdk/react"

function Player({ assessment, meta }) {
  async function handleSubmit(answers): Promise<SubmitResult> {
    const res = await fetch("/api/grade", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ answers }),
    })
    if (!res.ok) throw new Error("Grading failed")
    return res.json()
  }

  return (
    <AssessmentShell
      assessment={assessment}
      meta={{ title: "Unit 3 Quiz", category: "Grammar" }}
      locale="en"
      onSubmit={handleSubmit}
    />
  )
}

// POST /api/grade/route.ts
import { EdpireClient } from "@edpire/sdk/client"

const client = new EdpireClient({ apiKey: process.env.EDPIRE_API_KEY! })

export async function POST(req: Request) {
  const { assessmentId, answers } = await req.json()
  const result = await client.submit(assessmentId, {
    learner_ref: session.userId,
    answers,
  })

  // Map GradeResult (snake_case) → SubmitResult (camelCase)
  return Response.json({
    submissionId: result.submission_id,
    totalScore: result.score,
    maxScore: result.max_score,
    percentage: result.percentage,
    passed: result.passed,
    exerciseFeedback: [],   // GradeResult doesn't include per-node feedback;
                            // the score banner shows, but inline corrections won't.
    awaitingManualGrading: false,
  })
}

interface SubmitResult {
  submissionId: string
  totalScore: number
  maxScore: number
  percentage: number
  passed: boolean
  /** If null/undefined, the "View Full Report" button is hidden. */
  returnUrl?: string | null
  exerciseFeedback: ExerciseFeedbackData[]
  /** When true, score banners hide the score (still under review). */
  awaitingManualGrading?: boolean
}

import { EdpireQuestion } from "@edpire/sdk/react"
import type { RuntimeAnswer } from "@edpire/sdk/react"

function QuestionStep({ step }) {
  const [answers, setAnswers] = useState<RuntimeAnswer[]>([])
  const [feedback, setFeedback] = useState<Record<string, unknown> | null>(null)

  return (
    <EdpireQuestion
      content={step.content}        // ContentAST from flattenAssessment()
      onAnswersChange={setAnswers}
      feedback={feedback}           // null = no feedback; pass /check result to show it
      dir="ltr"                     // "rtl" for Arabic
    />
  )
}

npx --package=@edpire/sdk create-edpire-app nextjs my-app       # EdpireAssessmentPlayer + token handler
npx --package=@edpire/sdk create-edpire-app vite-express my-app  # same, with Vite + Express