Interactive Stories and Editor UI

Block-Based Editor

Community members can create their own stories at level 6. The editor uses a block palette for adding content with drag-and-drop reordering.

Block limits scale with progression using a custom feature gate system: 20 blocks at level 6, 100 for subscribers, and 150 at level 25. The story creation feature itself unlocks at level 6 which encourages learners to focus on comprehension before production. This also works as a soft-spam filter to ensure only invested community members create content.

Each block can be configured independently and either reuse existing blocks or create a new one to build a story. That means an editor can create reusable blocks and share them across stories or include the same codex record multiple times in the same story.

Block Types

Like UNO cards, story blocks come in different types which have their own functionality. The base one being the TextBlock which is similar to the Number cards in Uno, while special cards unlock unique functionality for interactive storytelling as they're played like the reverse card. The story teller page arranges these blocks and handles playing them back to the reader.

Stories are made up of different blocks like Page breaks which pause until the reader hits continue, Music Notation blocks which render ABC notation as sheet music with audio playback, Ogham Text blocks which display text in the ancient Ogham script. There's also Codex records which display vocabulary, and Special Effects can trigger things like dark mode, sound effects, or animations.

Text Blocks

The foundation of every story. Text blocks support Irish content with English translations that readers can toggle on demand.

The first text block also renders with a drop cap and supports the title & content formatting.

Page Breaks

Create natural pauses in the narrative. Readers tap to continue, building anticipation and pacing the story experience.

Page breaks support optional text to display things like "End of chapter"

Codex Records

Embed vocabulary and grammar lessons directly in the story. Links to the Codex for deeper exploration without leaving the narrative.

Music Notation

ABC notation renders as sheet music with audio playback. Perfect for traditional Irish songs and learning pronunciation through melody.

Editors can enter ABC notation like this to render the music player:

X:1 
T:Amhrán na Siúlóide 
M:4/4 
L:1/4 
K:G 
|: G A B G | A B c A | B c d B | c2 B2 | 
G A B G | A B c A | B A G F | G4 :|

Ogham Text

Display text in the ancient Ogham script used in early medieval Ireland. Adds historical authenticity to stories about Irish mythology and history.

Special Effects

Trigger immersive effects like dark mode transitions, ambient sounds, screen shakes, or custom animations to enhance dramatic moments.

Just like page breaks, special effect blocks support optional text that appears in the story. They also support toggling state to on/off like disabling dark mode if previously enabled.

Architecture

Built on a flexible Items & Collections pattern used in other features on the site. This allows for reusing functionality like adding to a collection, storing metadata, handling image and media uploads, reusing blocks from the codex, and other benefits.