Plugins are interactive visualizers or tools embedded directly in a problem statement. They run inside a sandboxed <iframe> and can receive the current sample input, allowing you to build custom animations, diagrams, or interactive demos that help contestants understand the problem.
A plugin is a self-contained HTML application that you include in your problem package. When a contestant views the problem, the plugin is rendered inline within the problem statement — giving you full control over how input data is visualized.
Common use cases include:
You place a plugin in your problem package and reference it with a \plugin{name} macro in your LaTeX problem statement. The platform renders it as an iframe at that position in the statement.
When a contestant selects a sample input, it is automatically passed to the plugin so it can visualize that specific input. The plugin always receives the currently selected input — no extra setup needed.
When a problem has at least one plugin, a Run button (▶) appears on each sample input panel. Clicking it scrolls the page to the plugin and passes the selected sample's input to it.
The same Run button also appears on the custom test case panel, so contestants can visualize their own inputs with the plugin.
| Page | What it covers |
|---|---|
| Add a Plugin to a Problem | ZIP structure, \plugin{} macro, multiple plugins |
| Plugin File Structure & Paths | Folder layout, asset paths, multi-file plugins |
| Reading Input in a Plugin | monkeyCodeInput.js API, manual input reading |
| Plugin Limitations | Sandbox rules, size limits, name constraints |
| Using Third-Party Libraries | Bundling external JS/CSS, why CDN links fail |