System Overview

Algebrakit is a system with the following main components:

  1. The web service hosts Algebrakit's evaluation engines, stores exercise items, and provides access to learning results.
  2. The question types are web components you inject into your web page and interact between the student and the web service.
  3. The exercise editors are web component for item editing in your platform.
  4. A hosted CMS to create and manage Algebrakit exercises.

Exercise life cycle

The life cycle of an exercise is as follows:

  1. Create sessions: Every question needs an exercies session, which stores the learning results. Your LMS calls the Algebrakit web service to create an empty session for every exercise you want to start. The sessions are stored on the Algebrakit side and referred to by a unique session ID.
  2. Insert web components: Insert a custom HTML tag to inject the exercise web component into your web page, with the session ID as an attribute. Each tag will transform automatically into a functioning Algebrakit exercise.
  3. Session events: The web component initializes automatically and communicates with the Algebrakit web service for evaluations, hints, and error feedback.
  4. Collect results: Use the session ID to retrieve the scoring results from the Algebrakit web service.

Exercise Flow

This approach guarantees no confidential information, such as the exercise's answer, is sent to the front end. It also minimizes the payload size of web service requests.

Frontend

The snippet below gives an idea of how to integrate Algebrakit into your web page. The script tag loads the Algebrakit frontend code from our CDN. The akit-exercise tags automatically convert into interactive exercises.

<html>
   <head></head>
   <body>
      ...  <!-- Whatever your page contains... -->

      <!--Insert an Algebrakit question here -->
      <akit-exercise session-id="{id}"></akit-exercise>

      ...  <!-- Whatever your page contains... -->

      <!--Load frontend API -->
      <script src="https://widgets.algebrakit.com/akit-widgets.min.js"></script>
   </body>
</html>

This is a minimal setup; read about the various options in configuration, learning events and styling.