Exercises, Interactions and Resources

Algebrakit's Web Components are the frontend components that enable students to make exercises. There are three categories of web components:

An Exercise web component represents a complete exercise, which can contain multiple questions (a, b, c) and interactions. All exercise web components are defined through the tag akit-exercise.
An Interaction web component represents a single interactive element in an exercise. All interaction web components are defined through the tag akit-interaction. Algebrakit will automatically figure out which question type is intended, such as algebra, geometry, long arithmetic, etc.
Resource web components display mathematical content such as formulae, tables and graphs. All presentation web components are defined through the tag akit-resource.

Mix Algebrakit interactions with other question types

An akit-exercise web component can represent complex exercises, with multiple content blocks and interactions. You can also use Algebrakit's math interactions directly in your own exercises using the akit-interaction web component. This allows you to stay in control of authoring, storing and running your own exercises and use Algebrakit to extend your set of question types.

General options for exercises and interactions

<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	A session represents a single user solving a single exercise. You obtain the session id by calling Algebrakit’s web service from your backend, see create-session
ref‑id	Refers to the particular math interaction or math resource within the exercise. You can find the ref-ids using the published-info endpoint.
review‑mode	When set to 'true' the web components will show all student inputs and responses from Algebrakit. This feature is intended for reviewing the student's actions by a teacher.
solution‑mode	When set to 'true' the web components will show the solution of the interaction. For Multistep Math interactions a worked derivation will be shown. Solution mode is not allowed on sessions that are created with the attribute 'assessmentMode', unless the session is locked
interactive‑mode	When set to 'false', students will not be able to make changes.

Methods for exercises

You can call the following methods on the akit-exercise nodes. All methods return a Promise

Method	Description
`submit`	`submit(): Promise<ScoringData>` Evaluate all interactions in the exercise and return scoring information.
`giveUp`	`giveUp(refId:string, options: GiveUpOptions): Promise<void>` `GiveUpOptions = {display: "NONE", "ANSWER", "DERIVATION"}` Set the state of the referred interaction to failed. Depending on the options, display the answer, the worked solution or nothing.
`isFinished`	`isFinished(): Promise<boolean>` Returns `true` if all interactions in the exercise are finished or given up.
`setActive`	`setActive(): Promise<>` Make the first non-finished interaction in the exercise active.
`finishPendingEvents`	`finishPendingEvents(): Promise<>` Wait until all learning activities (evaluation, hint, etc) are fully processed. Use this e.g. before retrieving scoring information from Algebrakit's web service.

Viewing mathematical content

Text content generated by Algebrakit generally contains math expressions. Examples are hint texts and error feedback in scoring information, see /session/score. The <akit-content-view> Web Component offers a convenient way to display such information in your webpage.

<akit-content-view>
    <script type="algebrakit/init-data">
        <!-- include JSON array of ContentElement here>
    </script>
</akit-content-view>

Note:

The content is included in JSON format and wrapped in <script> tags. This way you don't have to escape special symbols, such as <.
you can also convert content into html through Javascript, using AlgebraKIT.elements2HTML.

Events

You can listen to all events in a session by registering through addExerciseListener(). An eventData object is passed with each event. The eventData.event property denotes the type of event and what eventData.data to expect with this event. These types are listed below including their specific data.

exercise-created

Submitted when the exercise with its initial interactions is created and ready in the web page.

Data

{
    event: 'exercise-created'
    sessionId: string
    data: {
        element: Element;
        interactions: InteractionDescription[]
    }

    InteractionDescription = {
        refId: string;
        scorable: boolean;
        type: string;
    }
}

Property	Description
`element`	The DOM element of the exercise web component.
`interactions`	Information about the interactions in this exercise.
`refId`	A reference to the interaction in this exercise.
`scorable`	Indicates whether this interaction is scored or not. Non-scorable interactions are for display only, such as a table without input fields.
`type`	Indicates the type of interaction, such as 'multistep', 'geometry', 'fill-in-the-blanks', etc.

interaction-created

Submitted when an interaction web component is created and ready in the web page.

Data

{
    event: 'interaction-created'
    sessionId: string
    refId: string
    data: {
        element: Element;
        interaction: string;
    }
}

Property	Description
`element`	The DOM element of the exercise web component.
`refId`	The ID of the interaction within the exercise.
`interaction`	Indicates the type of interaction, such as 'multistep', 'geometry', 'fill-in-the-blanks', etc.

interaction-activated

Submitted when an interaction web component is activated for the first time (e.g. the student clicked on the web component).

interaction-hint

The student requested a hint.

interaction-evaluate

The student submitted an (intermediate) step, which was evaluated by Algebrakit.

Data

Property	Type	Description
`exerciseFinished`	boolean	Indicates whether the interaction is now finished or not.
`interactionType`	string	The web component type (e.g. 'multistep', 'choice', etc
`progress`	number	Value in the range [0,1] indicating how far the student is with solving the exercise. Applies to exercises that contain multiple sub problems in the authored correction model.
`replay`	boolean	When true, the web component submitted this event while replaying all the events to reconstruct an already existing session. This applies when the student revisits an interaction or when the web component is created in review mode.
`scoring`	Object	Contains scoring information, if a scoring model is set in Create Session. See Scoring for more information.

interaction-finished

The student finished the interaction

Data Same as for interaction-evaluate

question-finished

All interactions in a question of the exercise are finished.

Data

Property	Type	Description
`scoring`	Object	Contains scoring information for all interactions in this question combined, if a scoring model is set in Create Session](../webservice/#create-session). See Scoring for more information.
`replay`	boolean	When true, the web component submitted this event while replaying all the events to reconstruct an already existing session. This applies when the student revisits an interaction or when the web component is created in review mode.

exercise-finished

All interactions in the exercise are finished.

Data

Property	Type	Description
`scoring`	Object	Contains scoring information for this exercise, if a scoring model is set in Create Session](/webservice/create-session). See Scoring for more information.
`replay`	boolean	When true, the web component submitted this event while replaying all the events to reconstruct an already existing session. This applies when the student revisits an interaction or when the web component is created in review mode.

TypeScript Types

TypeScript types for Algebrakit's web component system are available at the following URL: https://widgets.algebrakit.com/types.tar.gz. These types always apply to the current release hosted at the same domain.