Add a Plugin to a Problem

Guide on how to add a plugin to your problem package and reference it in the problem statement

Adding a Plugin to Your Problem Package

Plugins live inside your problem package (.zip) under the plugins/ directory. Each plugin is a subdirectory named after the plugin, and must contain an index.html entry point.

my-problem.zip
└── plugins/
    └── my-visualizer/
        ├── index.html    ← Required entry point
        ├── script.js     ← Optional
        └── style.css     ← Optional

index.html is required. It is the entry point the platform loads inside the iframe. Without it, the plugin will not render.

You do not need to include monkeyCodeInput.js in your ZIP. The platform automatically injects it into every plugin directory at import time.

Referencing a Plugin in the Problem Statement

To insert a plugin into the problem statement, use the \plugin{name} macro in your problem.en.tex file. Replace name with the exact directory name of your plugin under plugins/.

problem.en.tex

Here is a visualizer for the sample input:

\plugin{my-visualizer}

The graph above shows the connections between nodes.

The macro determines where in the statement the plugin iframe appears and which plugin is rendered. You can place it anywhere in the document body.

The name passed to \plugin{...} must exactly match the directory name under plugins/ in your ZIP — including capitalisation.

Using Multiple Plugins

A single problem can include more than one plugin. Add each plugin as its own subdirectory under plugins/, then reference each one with a separate \plugin{} macro in the statement.

plugins/
  visualizer/
    index.html
  debug/
    index.html

problem.en.tex


\plugin{visualizer}

Some explanatory text between the two plugins.

\plugin{debug}

Each \plugin{} call renders its own independent iframe. The plugins do not share state with each other.

Each plugin receives the same currently selected sample input independently via its own URL hash.

Introduction to Plugins

Reading Input in a Plugin