Configuration

Configuration Overview

Algebrakit Web Components can be customized through a global AlgebraKIT configuration object. You must include this configuration before the script that loads the main frontend API.

Basic Setup

<script>
  AlgebraKIT = {
    config: {
      // Proxy configuration for API calls
      proxy: {
        url: 'proxy/algebrakit'
      },
      // Optional styling configuration
      styles: {
        ...
      },
      // Optional behavior configuration
      behavior: {
        ...
      }
    }
  };
</script>

<!-- Load after setting configuration -->
<script src="https://widgets.algebrakit.com/akit-widgets.min.js"></script>

⚠️ Do not use the async attribute when loading akit-widgets.min.js.
⚠️ Never load the widget script more than once on a page.

---

Configuration Properties

Property	Description
proxy	Routes API calls through a local proxy for enhanced security. See Proxy Config.
styles	Customize the appearance of the Web Components. See Styling.
behavior	Control interaction behavior. See Behavior Config.

---

Proxy Config

In production environments, all requests from the frontend to the Algebrakit web service must be routed through the client platform. The client platform is responsible for:

• Authenticating the request (ensuring it originates from a valid user),
• Adding the API key, and
• Forwarding the request to Algebrakit.

The proxy must support GET, POST, and DELETE requests. The proxy must use a fixed IP address, which should be shared with Algebrakit for whitelisting purposes.

Example: Routing requests through your backend proxy

AlgebraKIT = {
  config: {
    proxy: {
      url: 'proxy/algebrakit',
      headers: {
        'X-CSRF-Token': 'my-value'
      }
    }
  }
};

Property	Description
url	Proxy URL
headers	(Optional) Key-value map of headers to include in the request

---

Behavior Config

You can apply behavior settings globally or per interaction type.

AlgebraKIT = {
  config: {
    behavior: {
      general: {
        externalSubmitButton: false,
        reviewModeShowSolution: true
      },
      components: {
        inline: {
          submitOnEnter: true
        }
      }
    }
  }
};

Global Behavior (general)

Property	Type	Default	Description
externalSubmitButton	boolean	false	Hide built-in submit/hint buttons if using your own.
reviewModeShowSolution	boolean	false	In review mode, shows correct answers next to student answers.
emitEventsOnRehydrate	boolean	false	Replay previous learning events when restoring previous sessions.

Component-Specific Behavior

arithmeticNotebook

Property	Type	Default	Description
showProgress	boolean	true	Show/hide progress bar.

inline, mathTable

Property	Type	Default	Description
submitOnEnter	boolean	true	Submit when "Enter" is pressed.

geometry

Property	Type	Default	Description
measureInstrument	string	'GEO90'	Choose what type of set square to use. Options are 'GEO90' and 'GEO180'.

multistep

Property	Type	Default	Description
delayedFeedback	boolean	false	Do not immediately check every input line but only after clicking the "Check" button.
showCheckButton	boolean	true	Show/hide the "Check" button.
placeholderText	string	"Enter your calculation here"	Placeholder inside the input box.

authoring.multistep

Property	Type	Default	Description
initialExpression	boolean	false	Change the default setting for dropdown "Initial expression" to "From task"