How o9 Works Layout Showcase
Layout Showcase · Topic 7

Prose + Widget Layout

The standard topic layout when a topic has both explanatory text and an interactive simulation — prose first, widget below.

Supply Chain Network Graph

Item BOM BOD Resource Resource consumption
Drag nodes to reposition

How this layout differs from full-widget

This is the default topic layout with widget: set. The prose comes first — it sets up the concept — and the interactive component appears below as a hands-on exercise.

Compare this to full-widget, where the widget is the first thing the learner sees and the text is secondary context.

When to use it

Choose this layout when:

  • The concept needs explanation before a learner can make sense of the interaction
  • The widget is a “try it” extension of the text, not the core of the lesson
  • You want the reading experience to feel complete even without the widget

The graph widget

The panel below shows the supply chain network graph — the same one used in Chapter 2. Use it to explore how nodes and edges connect in a live o9-style network diagram.