Build a Custom Results Widget
Your learning inventory captures learner preferences — now give them something beautiful to look at. In this guide, you’ll build a custom radar chart widget that visualizes each learner’s results on their final screen.
This picks up right where Create a Learning Inventory left off.
Try the lesson
How this widget is built
Custom widgets in Teacharium are created using the Widget Builder — you describe what you want in plain language, and the AI generates the component code. No programming knowledge is required.
Creating the widget
Open the Widget Library from the sidebar and click Create Widget. Describe the radar chart: the number of axes, what each axis represents, the visual style. The AI generates a React component that renders the chart.
From there, refine it through conversation: adjust colors, change the scale, add labels, tweak the layout. Each refinement regenerates just the part you asked to change.
Configuring widget fields
Widgets can expose configurable fields that appear in the lesson editor’s settings panel. For this radar chart, each axis value is a field — so an author can wire each field to a lesson variable without editing any code.
In the Widget Builder, define the fields (one per learning style category). Each field becomes an input the lesson editor can connect to a variable.
Publishing and enabling the widget
Once the widget looks right, publish it from the Widget Builder. Then open the lesson’s Widget Settings and enable the new widget to make it available in the component sidebar.
Wiring to variables
Add the radar chart widget to the results step. In the settings panel, connect each field to the corresponding category variable from the lesson. When the step loads during playback, the widget reads the live variable values and renders the chart with the learner’s actual data.
This is the pattern for any widget that needs to display learner-specific results: expose fields in the widget, wire them to variables in the lesson.