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
| Property | Type | Description |
|---|---|---|
element |
Element | The DOM element of the exercise web component. |
interaction-created
Submitted when an interaction web component is created and ready in the web page.
Data
| Property | Type | Description |
|---|---|---|
element |
Element | The DOM element of the exercise web component. |
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.