Screen Reader (Read-Aloud Canvas Helper)

An agent skill that builds read-aloud into any Sprout canvas — narration with real word-by-word highlighting synced to the browser's speech engine, not guessed timers. Each spoken word lights up as it's read, so early and emerging readers can follow along. Includes an honest fallback when a voice can't report word boundaries, and optional 'unskippable narration' gating for lessons.

Age range 4-10

Adopt in Sprout
Screen Reader (Read-Aloud Canvas Helper)

About

Authoring helper for building Sprout canvases with read-aloud narration and word highlighting synced to browser speech boundary events.

How it works

  1. 1Gather inputsConfirm the canvas goal and the exact narration text to read aloud and highlight.
  2. 2Wire boundary-synced highlightingTokenize the text into word spans carrying data-start/data-end character offsets; on SpeechSynthesisUtterance.onboundary, read event.charIndex and mark the span whose range contains it; clear the active word on onend/onerror.
  3. 3Handle the no-boundary fallbackIf the selected voice emits no boundary events, surface that limitation or use a conservative fallback — never present a timer guess as exact word sync.
  4. 4Respect gating + canvas constraintsWhen narration must be unskippable, disable Next/Replay/Play while speaking and unlock only in the onend/onerror path. Keep sandbox limits (no external scripts, fetch, or localStorage); the reader helper itself never calls completion — exactly one final sprout.score/complete/timed lives in the activity.

Inputs

Canvas goal

What the canvas is trying to teach or do.

canvas_goal

Narration text

The sentence or lesson text to read aloud and highlight.

narration_text
Screen Reader (Read-Aloud Canvas Helper) — Sprout