PIE Items and Elements

Understanding the foundational concepts of PIE: reusable elements that compose into complete assessment items.

Introduction

PIE Element

A PIE Element is a reusable, interactive component that implements a specific question type. Think of it as a building block.

Multiple Choice
Text Entry
Graphing
Drag and Drop
20+ question types

Reusable Component

PIE Item

A PIE Item is a complete assessment question that may contain one or more elements plus optional supporting content.

Reading passage
One or more questions
Scoring rubric
Feedback and hints

Assessment Unit

Items are what students see as complete questions. Elements are the interactive components that capture responses. An item might combine a reading passage with multiple elements (e.g., a multiple choice and a constructed response) to assess comprehension from different angles.

Element Architecture

Every PIE element provides multiple interfaces to support different use cases:

Delivery Interface

The interactive UI students and teachers see. Adapts based on mode and role:

Gather mode: Students interact and select answers
View mode: Read-only display without interaction
Evaluate mode: Shows correctness and feedback

Authoring Interface

Configuration UI where educators create questions using forms and visual editors. WYSIWYG experience.

Add/edit choices
Mark correct answers
Configure layouts
Set feedback and hints

Controller

JavaScript/TypeScript functions that transform data and calculate scores based on context.

model() - Build UI model
outcome() - Calculate score
Runs client or server-side
Security filtering by role

Elements adapt their interface based on environment mode and user role

Live Interactive Example

Try interacting with a live PIE multiple choice element below. Switch between different modes and roles to see how the element adapts:

Item Configuration Structure

PIE items are configured using JSON with three essential sections that work together:

1. elements

Maps element tags from markup to PIE element NPM packages. Tells the player which PIE elements (and which versions) to load from CDN or your server.

2. models

Array of element configurations. Each model defines one element's content, behavior, and correct answers. Linked by id. Each model entry is interpreted by the PIE element implementation it is mapped to. The PIE element should advertise its interface (the PIE React elements do this through JSON schemas) but ultimately it is entirely up the PIE element how that is interpreted. In this case, 'choices' is specific for the multiple-choice PIE element. Only a few things are in all models: the 'id', the 'element' and the 'prompt'.

3. markup

HTML defining element placement and layout. Can include passages, multiple elements, and custom structure. Element tags must match elements keys. While it can be used for sophisticated layout, it is typically not recommended for this and instead you should try to build in layout concerns in the PIE element implementation and aim for consistency.