Frontend API - Overview

The frontend API handles the creation of the web components and the processing of learning events. Include a script tag to your web page to load the frontend API from https://widgets.algebrakit.eu/akit-widgets.min.js. The frontend API is exposed by the global AlgebraKIT javascript object.

Configuration

You can specify configuration parameters in the AlgebraKIT object. Include this configuration before the script tag that loads and initialises the frontend API.

<script>
    AlgebraKIT = {
        config: {
            widgets : [{
                name: 'akit-formula-editor', 
                handwriting: 'MyScript'
            }],
            proxy: 'proxy/algebrakit',
            theme: 'my-custom-theme'
        }
    };
</script>
<!--Load API *after* setting configuration  -->
<script href="https://widgets.algebrakit.eu/akit-widgets.min.js"></script>
Property Description
widgets Optional configuration settings per web component type. See the web component overview for a list of supported web component types and their configuration parameters.
proxy If set, the web components will communicate with AlgebraKIT’s web service through this local proxy to prevent cross-origin communication.
theme An optional identifier to a predefined theme, which defines the style and design of the web components. Custom themes are created by the AlgebraKiT team based on your requirements.

Exposed API

After the akit-widgets.min.js script is initialized, the following functionality is added to AlgebraKIT:

Function Description
addExerciseListener Add a listener to one of the events that are generated by AlgebraKIT web components.
getWidgets Retrieve a list of all created web component instances.
render Search and render expressions written in latex or MathML.

Add exercise listener

Register a listener for learning events on a session.

AlgebraKIT.addExerciseListener(
    function(eventData){
        //Do something with the eventData
    })
AlgebraKIT.addExerciseListener(
    sessionId: "my-session-id", 
    function(eventData){
        //Do something with the eventData
    })

The properties of the eventData object are listed below.

Parameter Type Description
sessionId string If given, register to events for this session. If omitted, register to events on all sessions.
refId string An ID corresponding to the specific interaction where the event originated
event string The type of this event. You can find a list of all events here
data object The event data sent with the event. The event overview describes what data objects can be expected with each event type

Get widgets

Returns a list with general data for all created web component instances.

AlgebraKIT.getWidgets(): <WidgetData[]>

<WidgetData> = {
   id <string>,
   tag <string>,
   attributes: [{key: value}],
   node: <HTMLElement>,
   interaction:<boolean>
}

Returns

Property Description
id An ID that is assigned to this web component.
tag The tag name for this web component. Identifies the type of interaction.
attributes List of attributes that are defined on the element.
node The root DOM element of the generated web component.
interaction Indicates whether the web component corresponds to an interactive exercise, or a non-interactive element such as a worked out solution, graph, table, etc.

Render

Searches for latex expressions or <mathml> nodes within node, or in the whole document if node is absent. Latex expressions are text enclosed within single or double dollar signs. Where a single dollar sign denotes inline rendering and double dollar signs denote so called ‘display view’ rendering.

AlgebraKIT.render(node: <HTMLElement>)