HTML Widgets for Instructional Design

Interactive widgets for use in LMS

A centralized registry of self-contained interactive learning objects. Built with pure semantic HTML architecture and accessible layouts to ensure seamless inclusion via standard iframes.

01

Active Assessment & Practice

2 widgets

Formative interactive check-points designed to challenge cognitive parsing paths while eliminating data-tracking overhead dependencies.

[ 📋 TERM ]   ───   [ 🔍 DEF ]
Two-Column Matching
Active-state random array configuration tracking. Features responsive column mapping, focus selection visual loops, and instantaneous validation feedback.
/widgets/matching-activity/→
[ ◀ Option A ]   ⚖   [ Option B ▶ ]
This or That Choices
A binary decision architecture. Challenges students to choose between competing criteria, surfacing follow-up case context or rationale text upon selection.
/widgets/this-or-that/→
02

Classification & Sequencing

2 widgets

Structural frameworks targeting taxonomic organization, process alignment checks, and relationship mapping behaviors.

[ Bucket 1 ]   📥   [ Bucket 2 ]
Bin Sorting Matrix
Categorization engine prompting users to classify conceptual items into defined categories. Includes error handling and clear completion triggers.
/widgets/sorting-activity/→
[ 1 ] ➔ [ 2 ] ➔ [ 3 ] ➔ [ 4 ]
Process Sorter & Sequencer
Arrangement interface designed for timeline sorting, step-by-step methodology structures, or chronological process checking.
/widgets/sequencer-activity/→
03

Review & Retention

1 widget

Self-paced studying elements maximizing individual cognitive recall paths using lightweight 3D animation transforms.

╭──────╮ 🔄 ╭──────╮
CSS Flip Flashcards
A fast, accessible card layout featuring spatial 3D rotation animations. Tracks deck progression and includes semantic audio/screen reader indicators.
/widgets/flashcards/→