# khan/khan-exercises architecture

> Architecture diagram of the GitHub repository khan/khan-exercises, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-10). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/khan/khan-exercises
- Repository: https://github.com/khan/khan-exercises

## Overview

Khan Exercises is a browser-based framework that turns exercise HTML into interactive learning activities. The principal workflow is learner interaction with an exercise, followed by answer evaluation and feedback; the README documents the HTML-to-plugin model, while the supplied tree contains framework code but no exercise HTML. The runtime also provides graphing, interactive widgets, math and chemistry support. Edges reflect explicit loader statements, sampled imports, or README documentation; unsampled subsystems are represented cautiously, and the exercise-content source path is unavailable.

Main entry points: [`main.js`](https://github.com/khan/khan-exercises/blob/master/main.js) (Runtime Loader), [`utils/graphie.js`](https://github.com/khan/khan-exercises/blob/master/utils/graphie.js) (Graphing Engine), [`utils/kpoint.js`](https://github.com/khan/khan-exercises/blob/master/utils/kpoint.js) (Point Geometry), [`utils/kvector.js`](https://github.com/khan/khan-exercises/blob/master/utils/kvector.js) (Vector Math)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_runtime["Exercise Runtime"]
  node_loader["Runtime Loader<br/>[main.js]"]
  node_framework["Exercise Framework<br/>[khan-exercise.js]"]
  node_answers["Answer Types<br/>[answer-types.js]"]
end

subgraph group_interaction["Interaction and Graphing"]
  node_interactive["Interactive Widgets<br/>[interactive.js]"]
  node_graphie["Graphing Engine<br/>[graphie.js]"]
  node_wrapped_shapes["Wrapped Shapes"]
end

subgraph group_math["Math and Science"]
  node_kline["Line Geometry<br/>[kline.js]"]
  node_kpoint["Point Geometry<br/>[kpoint.js]"]
  node_kvector["Vector Math<br/>[kvector.js]"]
  node_knumber["Number Math<br/>[knumber.js]"]
  node_math_core["Math Utilities<br/>[math.js]"]
  node_expressions["Expressions<br/>[expressions.js]"]
  node_chemistry["Chemistry Support<br/>[chemistry.js]"]
end

subgraph group_render["Rendering and Formatting"]
  node_math_format["Math Formatting<br/>[math-format.js]"]
  node_tex["TeX Rendering<br/>[tex.js]"]
  node_templates["Templates<br/>[tmpl.js]"]
end

node_learner(("Learner"))
node_exercise_html["Exercise HTML"]

node_learner -->|"opens"| node_exercise_html
node_exercise_html -->|"renders through"| node_framework
node_learner -.->|"uses exercise"| node_framework
node_loader -->|"loads"| node_framework
node_loader -->|"loads"| node_answers
node_loader -->|"loads"| node_graphie
node_loader -->|"loads"| node_interactive
node_loader -->|"loads"| node_kline
node_loader -->|"loads"| node_knumber
node_loader -->|"loads"| node_kpoint
node_loader -->|"loads"| node_kvector
node_loader -->|"loads"| node_math_core
node_graphie -->|"uses"| node_kpoint
node_graphie -->|"uses"| node_kvector
node_interactive -->|"uses"| node_graphie
node_interactive -->|"uses"| node_wrapped_shapes
node_kpoint -->|"delegates to"| node_kvector
node_kpoint -->|"compares with"| node_knumber
node_kline -->|"uses"| node_kpoint
node_kline -->|"compares with"| node_knumber
node_kvector -->|"uses"| node_knumber
node_chemistry -->|"uses"| node_math_format
node_math_format -->|"uses"| node_math_core
node_math_format -->|"uses"| node_expressions
node_graphie -->|"uses"| node_tex
node_graphie -->|"uses"| node_templates

click node_loader "https://github.com/khan/khan-exercises/blob/master/main.js"
click node_framework "https://github.com/khan/khan-exercises/blob/master/khan-exercise.js"
click node_answers "https://github.com/khan/khan-exercises/blob/master/utils/answer-types.js"
click node_interactive "https://github.com/khan/khan-exercises/blob/master/utils/interactive.js"
click node_graphie "https://github.com/khan/khan-exercises/blob/master/utils/graphie.js"
click node_wrapped_shapes "https://github.com/khan/khan-exercises/blob/master/utils/wrapped-defaults.js"
click node_kline "https://github.com/khan/khan-exercises/blob/master/utils/kline.js"
click node_kpoint "https://github.com/khan/khan-exercises/blob/master/utils/kpoint.js"
click node_kvector "https://github.com/khan/khan-exercises/blob/master/utils/kvector.js"
click node_knumber "https://github.com/khan/khan-exercises/blob/master/utils/knumber.js"
click node_math_core "https://github.com/khan/khan-exercises/blob/master/utils/math.js"
click node_expressions "https://github.com/khan/khan-exercises/blob/master/utils/expressions.js"
click node_chemistry "https://github.com/khan/khan-exercises/blob/master/utils/chemistry.js"
click node_math_format "https://github.com/khan/khan-exercises/blob/master/utils/math-format.js"
click node_tex "https://github.com/khan/khan-exercises/blob/master/utils/tex.js"
click node_templates "https://github.com/khan/khan-exercises/blob/master/utils/tmpl.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_loader,node_framework,node_answers toneBlue
class node_interactive,node_graphie,node_wrapped_shapes toneAmber
class node_kline,node_kpoint,node_kvector,node_knumber,node_math_core,node_expressions,node_chemistry toneMint
class node_math_format,node_tex,node_templates toneRose
class node_learner,node_exercise_html toneIndigo
```

## Components

### Exercise Runtime

- [Runtime Loader](https://github.com/khan/khan-exercises/blob/master/main.js): `main.js`
- [Exercise Framework](https://github.com/khan/khan-exercises/blob/master/khan-exercise.js): `khan-exercise.js`
- [Answer Types](https://github.com/khan/khan-exercises/blob/master/utils/answer-types.js): `utils/answer-types.js`

### Interaction and Graphing

- [Interactive Widgets](https://github.com/khan/khan-exercises/blob/master/utils/interactive.js): `utils/interactive.js`
- [Graphing Engine](https://github.com/khan/khan-exercises/blob/master/utils/graphie.js): `utils/graphie.js`
- [Wrapped Shapes](https://github.com/khan/khan-exercises/blob/master/utils/wrapped-defaults.js): `utils/wrapped-defaults.js`

### Math and Science

- [Line Geometry](https://github.com/khan/khan-exercises/blob/master/utils/kline.js): `utils/kline.js`
- [Point Geometry](https://github.com/khan/khan-exercises/blob/master/utils/kpoint.js): `utils/kpoint.js`
- [Vector Math](https://github.com/khan/khan-exercises/blob/master/utils/kvector.js): `utils/kvector.js`
- [Number Math](https://github.com/khan/khan-exercises/blob/master/utils/knumber.js): `utils/knumber.js`
- [Math Utilities](https://github.com/khan/khan-exercises/blob/master/utils/math.js): `utils/math.js`
- [Expressions](https://github.com/khan/khan-exercises/blob/master/utils/expressions.js): `utils/expressions.js`
- [Chemistry Support](https://github.com/khan/khan-exercises/blob/master/utils/chemistry.js): `utils/chemistry.js`

### Rendering and Formatting

- [Math Formatting](https://github.com/khan/khan-exercises/blob/master/utils/math-format.js): `utils/math-format.js`
- [TeX Rendering](https://github.com/khan/khan-exercises/blob/master/utils/tex.js): `utils/tex.js`
- [Templates](https://github.com/khan/khan-exercises/blob/master/utils/tmpl.js): `utils/tmpl.js`

### Other components

- **Learner**
- **Exercise HTML**

## Connections

- Learner → Exercise HTML: opens
- Exercise HTML → Exercise Framework: renders through
- Learner → Exercise Framework: uses exercise
- Runtime Loader → Exercise Framework: loads (evidence: `main.js`)
- Runtime Loader → Answer Types: loads (evidence: `main.js`)
- Runtime Loader → Graphing Engine: loads (evidence: `main.js`)
- Runtime Loader → Interactive Widgets: loads (evidence: `main.js`)
- Runtime Loader → Line Geometry: loads (evidence: `main.js`)
- Runtime Loader → Number Math: loads (evidence: `main.js`)
- Runtime Loader → Point Geometry: loads (evidence: `main.js`)
- Runtime Loader → Vector Math: loads (evidence: `main.js`)
- Runtime Loader → Math Utilities: loads (evidence: `main.js`)
- Graphing Engine → Point Geometry: uses (evidence: `utils/graphie.js`)
- Graphing Engine → Vector Math: uses (evidence: `utils/graphie.js`)
- Interactive Widgets → Graphing Engine: uses (evidence: `utils/interactive.js`)
- Interactive Widgets → Wrapped Shapes: uses (evidence: `utils/interactive.js`)
- Point Geometry → Vector Math: delegates to (evidence: `utils/kpoint.js`)
- Point Geometry → Number Math: compares with (evidence: `utils/kpoint.js`)
- Line Geometry → Point Geometry: uses (evidence: `utils/kline.js`)
- Line Geometry → Number Math: compares with (evidence: `utils/kline.js`)
- Vector Math → Number Math: uses (evidence: `utils/kvector.js`)
- Chemistry Support → Math Formatting: uses (evidence: `utils/chemistry.js`)
- Math Formatting → Math Utilities: uses (evidence: `utils/math-format.js`)
- Math Formatting → Expressions: uses (evidence: `utils/math-format.js`)
- Graphing Engine → TeX Rendering: uses (evidence: `utils/graphie.js`)
- Graphing Engine → Templates: uses (evidence: `utils/graphie.js`)