@seal-sdk/playable-ui

Presentation and text-rendering utilities for Playable learning flows.

@seal-sdk/playable-ui converts activity, progress and result data into view models suitable for display. Result and progress views can also be rendered as text.

Installation

npm install @seal-sdk/playable-ui

Quick start

import {
  presentPlayableResult,
  renderPlayableResult,
} from "@seal-sdk/playable-ui";

const view = presentPlayableResult({
  correct: true,
  score: 1,
  feedback: "Correct answer.",
  mastery: {
    level: "mastered",
  },
  correctAnswer: [
    "Anna",
    "likes",
    "music",
  ],
});

const output = renderPlayableResult(view);

console.log(output);

The rendered output includes the formatted score, mastery level and feedback.

Activity presentation

presentPlayableActivity(input)

Creates a PlayableActivityView containing:

• sessionId;
• activity title;
• activity level;
• a copy of availableUnits.

import {
  presentPlayableActivity,
} from "@seal-sdk/playable-ui";

const view = presentPlayableActivity({
  sessionId: "session-1",
  activity: {
    title: "Build the sentence",
    level: "sentence",
    availableUnits: [
      "music",
      "Anna",
      "likes",
    ],
  },
});

The current public contract provides an activity presenter but no activity text renderer.

Progress presentation

presentPlayableProgress(input)

Creates a learner progress view from skill records.

For each skill, the presenter:

• capitalizes the mastery level;
• preserves the number of attempts;
• formats the latest score as a percentage;
• exposes the current score as progress.

import {
  presentPlayableProgress,
  renderPlayableProgress,
} from "@seal-sdk/playable-ui";

const view = presentPlayableProgress({
  learnerId: "student-1",
  skillRecords: [
    {
      skillId: "basic-svo-construction",
      score: 1,
      attempts: 2,
      level: "mastered",
    },
  ],
});

const output = renderPlayableProgress(view);

renderPlayableProgress(view)

Renders learner and skill progress as a multiline text summary.

Result presentation

presentPlayableResult(input)

Creates a display-oriented result view.

The presenter:

• formats the numeric score as a percentage;
• capitalizes the mastery level;
• converts unit correctness into correct or incorrect;
• preserves the correct answer;
• uses an empty unit-feedback list when none is provided.

correctAnswer is required. unitFeedback is optional.

renderPlayableResult(view)

Renders a result view as multiline text containing feedback, score and mastery.

For an incorrect result, the renderer also displays the correct answer. Unit feedback is included when available.

Public types

The package exports these input and view contracts:

• PlayableActivityInput
• PlayableActivityView
• PlayableProgressInput
• PlayableProgressView
• PlayableResultInput
• PlayableResultView
• PlayableUnitFeedbackInput
• PlayableUnitFeedbackView