Web Components

Web Components Overview

Algebrakit provides Web Components that allow you to embed math exercises directly into your learning environment. These components are easy to use and integrate with the Algebrakit web service.

There are three main types of components:

Exercise Component (<akit-exercise>)
Represents a full exercise, which can include multiple questions (e.g. parts a, b, c) and interactions.
Interaction Component (<akit-interaction>)
Represents a single, scorable math interaction (e.g. solve an equation, graph a function) or a math manipulative. Algebrakit automatically detects the interaction type, such as Multistep, Geometry & Graphs, or Multi-digit Arithmatic.
Resource Component (<akit-resource>)
Displays a mathematical expression, such as a formula or equation. You will need resource components to display expressions from a randomized exercise item.

Even if you’re using only akit-interaction and akit-resource (instead of the full akit-exercise), these components still operate within the scope of a single exercise item. This ensures that all interactions and resources are tied to the same randomized instance—an essential requirement for consistency in randomized exercises.

Basic Usage

Below are examples of how to embed each component:

<akit-exercise session-id="..."></akit-exercise>
<akit-interaction session-id="..." ref-id="..."></akit-interaction>
<akit-resource session-id="..." ref-id="..."></akit-resource>

Attribute	Description
`session-id`	The ID of the exercise session. Obtain this from the backend using create-session.
`ref-id`	Refers to a specific interaction or resource within the exercise. Retrieve these IDs using the published-info endpoint.
`review-mode`	When set, the component becomes non-interactive and shows the student's past work. Useful for review or dashboards.
`solution-mode`	When set, the component displays the solution. Multistep interactions show a full worked derivation. Note: This mode is disabled for sessions created in `assessmentMode`, unless the session is locked.
`interactive-mode`	When set to `false`, the component is read-only and cannot be edited by the student.

Exercise Component Methods

You can interact with elements through JavaScript. These methods return Promises:

Method	Description
`submit()`	Evaluates all interactions and returns scoring information: `Promise<ScoringData>`
`getHint()`	Requests a hint for the active interaction. If a hint is shown, an `interaction-hint` event is triggered.
`giveUp(refId, options)`	Marks an interaction as failed. Optionally shows the answer, solution, or nothing. `options = { display: "NONE" \| "ANSWER" \| "DERIVATION" }`
`isFinished()`	Returns `true` if all interactions are completed or given up: `Promise<boolean>`
`setActive()`	Activates the first unfinished interaction.
`finishPendingEvents()`	Waits for all in-progress actions (evaluations, hints, etc.) to complete. Use this before calling the scoring endpoint.

Web component initialization

Before interacting with an Algebrakit web component (e.g. calling methods like submit()), you must ensure it is fully initialized. Use the waitUntilReady() function to wait for the component to finish loading and become ready for use.

await AlgebraKIT.waitUntilReady(document.querySelector("akit-exercise"));

Web Components for Displaying Mathematical Content

Algebrakit also offers components to display mathematical expressions or rich instructional content.

LaTeX Math

Use akit-mathml to render LaTeX formulas:

<akit-latex latex="\sqrt{1+x^2}"></akit-latex>

Rich Text with Math

Use akit-content-view to render mixed content returned by the Algebrakit web service (e.g. hints or feedback). The content is passed as a JSON array inside a <script> tag.

<akit-content-view>
    <script type="algebrakit/init-data">
        <!-- include JSON array of ContentElement here-->
        [{
          "mimeType": "text/plain",
          "content": "You did not multiply all terms of "
        }, {
          "mimeType": "application/x-tex",
          "content": "$p - 1$"
        }, {
          "mimeType": "text/plain",
          "content": " by "
        }, {
          "mimeType": "application/x-tex",
          "content": "$6$"
        }]
    </script>
</akit-content-view>

💡 Because the content is in JSON, you don’t need to escape special characters like < or &.