# Video wrapper with xAPI tracking

## Required files <a href="#videowrapperwithxapitracking-requiredfiles" id="videowrapperwithxapitracking-requiredfiles"></a>

We need to add [this script](https://gitlab.com/eduplex-api/scorm-to-xapi-wrapper/-/raw/main/src/xapiwrapper.min.js) in the page with the video we want to track using xAPI statements. This will create the window\.ADL object we will use to send xAPI statements to LRS.

***

## Potential Use Case <a href="#videowrapperwithxapitracking-potentialusecase" id="videowrapperwithxapitracking-potentialusecase"></a>

<figure><img src="/files/Hl8XUjawN1TRD5hMarUX" alt=""><figcaption></figcaption></figure>

… track individual/global behaviour inside video (see youtube)!

## Setup <a href="#videowrapperwithxapitracking-setup" id="videowrapperwithxapitracking-setup"></a>

Before sending any request, first we need to provide LRS configuration

```
initXAPITrack () {
  const conf = {
    endpoint: 'xxxxxxx',
    user: 'xxxxxxx',
    password: 'xxxxxxx'
  }
  window.ADL?.XAPIWrapper?.changeConfig(conf)
},
```

***

## Implementation <a href="#videowrapperwithxapitracking-implementation" id="videowrapperwithxapitracking-implementation"></a>

Once we have the LRS configuration ready we can start sending requests to LRS using this function:

```
sendXAPIStatement (action) {
  const statement = {
    actor: {
      account: {
        homePage: 'xxxxxxx',
        name: 'xxxxxxx'
      },
      objectType: 'Agent'
    },
    verb: action,
    object: {
      id: 'xxxxxxx',
      objectType: 'Activity'
    }
  }
  window.ADL?.XAPIWrapper?.sendStatement(statement)
}
```

The statement structure we are using has 3 parts:

* Actor: is the user watching the video
* Verb: is the action the user did
* Object: identifies the video

This function receives one parameter, the action or verb that we send to LRS. You can create your own verbs but its better to use standard ones, which are already defined in `window.ADL.verbs`. They have the following structure, for example for the verb `window.ADL.verbs.initialized`:

```
{
    "id": "http://adlnet.gov/expapi/verbs/initialized",
    "display": {
        "de-DE": "initialisierte",
        "en-US": "initialized",
        "fr-FR": "a initialisé",
        "es-ES": "inicializó",
        "ar-AR": "بدأ"
    }
}
```

Next step, we have to select which verbs we will use to track the video, in our case we decided to use:

* `initialized` when video starts
* `suspended` when video pauses
* `resumed` when video plays again
* `completed` when video ends

So now we know which verbs we want to use and we have all the configuration done, we just have to set listenners for each video event and call the function mentioned above. For example:

* on video starts → `sendXAPIStatement(window.ADL.verbs.initialized)`
* on video pause → `sendXAPIStatement(window.ADL.verbs.suspended)`
* on video play → `sendXAPIStatement(window.ADL.verbs.resumed)`
* on video end → `sendXAPIStatement(window.ADL.verbs.completed)`

You can link any event with any verb you want and this function will send statements to the LRS each time those events are triggered.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eduplex.eu/user-behavior-tracker/video-wrapper-with-xapi-tracking.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.