How would you structure an interactive non-linear tutorial script?

WHAT THIS TESTS: Whether you can separate content from control logic in a non-linear pedagogical system. Interviewers want to see that you treat branching narrative, user error, and contextual help as first-class architectural concerns rather than ad-hoc UI behavior. The question probes your ability to design a data model that instructional writers can populate without rewriting code, and that the runtime can query to produce coherent, personalized instruction at scale.

A GOOD ANSWER COVERS: First, a node-graph schema where each node is a content-addressable state containing media references, copy, and pedagogical intent, and edges represent transitions triggered by user actions, errors, or explicit help requests. Second, a strict separation between the script content and the engine, meaning JSON or YAML lesson plans rather than branching code, so localization and versioning remain trivial. Third, a user model that persists interaction history, error patterns, and skill mastery so the system can adapt over time. Fourth, a drama manager or orchestrator that evaluates the user model against the current graph state to decide which node to play next, ensuring the tutorial remains comprehensible even when the user deviates far from the happy path. Fifth, explicit error nodes and recovery loops rather than inline exceptions, so dead-ends become traversable branches and the user never feels trapped.

COMMON WRONG ANSWERS: Proposing a massive switch statement or nested if-else tree that hardcodes every branch in the application layer. Storing branch logic inside video chapter metadata or timestamp markers, which makes the content opaque to search, analytics, and localization. Treating errors as generic catch-all toasts instead of modeled states, which prevents the system from learning from mistakes or offering targeted remediation. Suggesting a purely linear script with optional sidebars, which misses the requirement for genuine non-linearity and user agency.

LIKELY FOLLOW-UPS: How would you localize this graph for ten languages without duplicating logic? How do you prevent cycles or dead-ends when users repeatedly make the same error? What is your content-authoring workflow so instructional designers can build lessons without engineering support? How do you handle asynchronous media loading when a branch decision must render within one hundred milliseconds? How do you version the graph without breaking in-progress user sessions?

ONE CONCRETE EXAMPLE: A coding tutorial where the user must write a function. The graph starts at Node INTRO. If the user runs correct code, the edge SUCCESS leads to Node ADVANCED. If the user triggers a syntax error, the edge SYNTAX_ERROR leads to Node HELP_SYNTAX, which plays a contextual video and updates the user model to flag syntax weakness. If the user model already shows three syntax errors, the drama manager overrides the default next node and routes to Node FOUNDATIONS_REVIEW instead of repeating HELP_SYNTAX. Every node is a JSON object with fields for audio URL, video URL, caption copy, and outgoing edge definitions, while the drama manager is a pure function of user model plus graph state.