Story Builder

Interactive story game for English practice (SPEAKID). The story is chosen first; it defines which questions the student answers. Answers are then woven into a comic-style story.

Flow

1. Lobby — Play
2. Play — Pick a random story → story provides inputKeys and comprehensionQuestions → show Questions (5 inputs, first is always "What is your name?")
3. Story — Slides with substituted answers; prev/next navigation
4. Comprehension — Questions about the story (if any)
5. End — Try again (new story) | Return to lobby

Tech

• React 18+, TypeScript, Vite
• Layout: 1280×720 base, scaled to viewport; portrait mobile shows "Please rotate your device"
• CSS Modules, all selectors under .root for NPM host isolation

Dev

npm install
npm run dev

Open http://localhost:5174

Build (library)

npm run build

Output: dist/ (ES + CJS + types + style.css).

Use as NPM

import { StoryBuilder } from "speakid-story-builder";
import "speakid-story-builder/style.css";

<StoryBuilder
  questions={questions}
  stories={stories}
  onEvent={(e) => console.log(e)}
/>

Data

• Question bank: Question { id, answerKey, text, placeholder? }. Stories reference keys (e.g. name, goal, problem).
• Stories: Story { id, slides, inputKeys, comprehensionQuestions? }. inputKeys is the list of answer keys needed (e.g. ["name", "goal", "problem", "food", "place"]); first should be name.