Saving & Resuming Progress

The player does not have any built-in mechanism to fetch or decide on session state. Whether a lesson resumes or starts fresh is entirely controlled by whether you pass initialSessionState. If provided, the player restores the learner’s position, variables, widget states, and item answers. If omitted, the player starts a fresh session from the beginning.

This differs from the hosted embed SDK, which handles resume automatically via its resume option (default: true). When using TeachariumPlayer directly, you are responsible for loading and passing session state.

Saving Progress

Use the onStepChange callback to persist session state at each step boundary:


function LessonWithSaving({ lessonData }) {
  const handleStepChange = async (sessionState: SessionState) => {
    // Save to localStorage, server, etc.
    localStorage.setItem(
      `lesson-session-${lessonData.lesson.id}`,
      JSON.stringify(sessionState),
    );
  };
 
  return (
    <TeachariumPlayer
      lesson={lessonData}
      widgets={getWidgets()}
      onStepChange={handleStepChange}
    />
  );
}

Resuming Progress

Pass saved session state as initialSessionState:


function ResumableLesson({ lessonData }) {
  const savedSession = JSON.parse(
    localStorage.getItem(`lesson-session-${lessonData.lesson.id}`) || "null",
  );
 
  return (
    <TeachariumPlayer
      lesson={lessonData}
      widgets={getWidgets()}
      initialSessionState={savedSession}
    />
  );
}

Review Mode for Completed Lessons

When a lesson is completed, you can display it in review mode:


function ReviewLesson({ lessonData, completedSessionState }) {
  return (
    <TeachariumPlayer
      lesson={lessonData}
      widgets={getWidgets()}
      mode="review"
      initialSessionState={completedSessionState}
    />
  );
}