Players, an assessment toolkit and accessibility tools for PIE (Portable Interactions and Elements) assessment content. Every player is a custom element, so it runs in any web page, with any framework or none.
- Item player renders one PIE item, for delivery or authoring.
- Section player composes the items and passages of one section, with layouts, toolbars and section session state.
- Assessment toolkit coordinates tools, accommodations, text-to-speech, highlighting and accessibility catalogs, and resolves which tools each learner receives.
- Tools: calculators, ruler, protractor, line reader, answer eliminator, highlighter, dictionaries, color schemes, sign language video and more.
- Print player renders items for paper and answer keys; theme carries design tokens and color schemes.
The PIE elements these players render, the question types and passages, come from pie-elements-ng. Hosts assemble their production assessment players from these building blocks; @pie-players/pie-assessment-player is a reference assembly (product scope).
npm install @pie-players/pie-item-playerOr, without a build step:
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@pie-players/pie-item-player@x.y.z/dist/pie-item-player.js"
></script>
<pie-item-player id="player"></pie-item-player>Getting started renders an item, saves the learner's response and scores it.
| Guide | Covers |
|---|---|
| Getting started | A first item in a page |
| Installing | Packages, entry points, versions and pinning |
| Architecture | How the players, toolkit, tools and elements fit together |
| Item player | Loading strategies, modes, sessions, scoring |
| Section player | Sections, layouts, navigation, persistence |
| Assessment toolkit | Tools, accommodations and tool policy |
| Accessibility | Text-to-speech, accessibility catalogs, WCAG |
| Theming | Design tokens and color schemes |
| Security | Answer keys, hosted mode, trust boundaries |
| All documentation | The full index |
The @pie-players/* packages release together under one version number, written x.y.z in these docs; the preloaded player is versioned on its own. Packages and entry points lists every package and what it needs, and versioning covers pinning and stability.
The packages are built with Bun, TypeScript and Svelte 5. Each custom-element package bundles its UI runtime (Svelte 5; Lit for the print player), so hosts install no framework.
bun install
bun run dev:section -- --rebuild # first run: builds package dist outputs
bun run dev:section # section demos
bun run testContributors need Bun 1.3.11 and Node 24.22 (.nvmrc); the demo system lists the rest of the toolchain. Environment setup covers the demos' environment variables and releasing the release workflow.
MIT.