MOBILE-3412 h5pactivity: Support tracking in online

Author: dpalou

scripts/langindex.json

@@ -684,6 +684,7 @@
   "addon.mod_h5pactivity.no_compatible_track": "h5pactivity",
   "addon.mod_h5pactivity.offlinedisabledwarning": "local_moodlemobileapp",
   "addon.mod_h5pactivity.outcome": "h5pactivity",
+  "addon.mod_h5pactivity.previewmode": "h5pactivity",
   "addon.mod_h5pactivity.result_fill-in": "h5pactivity",
   "addon.mod_h5pactivity.result_other": "h5pactivity",
   "addon.mod_h5pactivity.review_my_attempts": "h5pactivity",

src/addon/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html

@@ -21,6 +21,11 @@
         <ion-icon name="warning"></ion-icon> {{ 'core.h5p.offlinedisabled' | translate }} {{ 'addon.mod_h5pactivity.offlinedisabledwarning' | translate }}
     </ion-card>
 
+    <!-- Preview mode. -->
+    <ion-card class="core-warning-card" icon-start *ngIf="accessInfo && !trackComponent">
+        <ion-icon name="warning"></ion-icon> {{ 'addon.mod_h5pactivity.previewmode' | translate }}
+    </ion-card>
+
     <ion-list *ngIf="deployedFile && !playing">
         <ion-item text-wrap *ngIf="stateMessage">
             <p >{{ stateMessage | translate }}</p>
@@ -39,5 +44,5 @@ <h2 *ngIf="progressMessage">{{ progressMessage | translate }}</h2>
         </ion-item>
     </ion-list>
 
-    <core-h5p-iframe *ngIf="playing" [fileUrl]="fileUrl" [displayOptions]="displayOptions" [onlinePlayerUrl]="onlinePlayerUrl"></core-h5p-iframe>
+    <core-h5p-iframe *ngIf="playing" [fileUrl]="fileUrl" [displayOptions]="displayOptions" [onlinePlayerUrl]="onlinePlayerUrl" [trackComponent]="trackComponent" [contextId]="h5pActivity.context"></core-h5p-iframe>
 </core-loading>

src/addon/mod/h5pactivity/components/index/index.ts

@@ -24,6 +24,7 @@ import { CoreCourseModuleMainActivityComponent } from '@core/course/classes/main
 import { CoreH5P } from '@core/h5p/providers/h5p';
 import { CoreH5PDisplayOptions } from '@core/h5p/classes/core';
 import { CoreH5PHelper } from '@core/h5p/classes/helper';
+import { CoreXAPI } from '@core/xapi/providers/xapi';
 import { CoreConstants } from '@core/constants';
 import { CoreSite } from '@classes/site';
 
@@ -57,17 +58,23 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
     fileUrl: string; // The fileUrl to use to play the package.
     state: string; // State of the file.
     siteCanDownload: boolean;
+    trackComponent: string; // Component for tracking.
 
     protected fetchContentDefaultError = 'addon.mod_h5pactivity.errorgetactivity';
     protected site: CoreSite;
     protected observer;
+    protected messageListenerFunction: (event: MessageEvent) => Promise<void>;
 
     constructor(injector: Injector,
             @Optional() protected content: Content) {
         super(injector, content);
 
         this.site = this.sitesProvider.getCurrentSite();
         this.siteCanDownload = this.site.canDownloadFiles() && !CoreH5P.instance.isOfflineDisabledInSite();
+
+        // Listen for messages from the iframe.
+        this.messageListenerFunction = this.onIframeMessage.bind(this);
+        window.addEventListener('message', this.messageListenerFunction);
     }
 
     /**
@@ -102,17 +109,19 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
             this.description = this.h5pActivity.intro;
             this.displayOptions = CoreH5PHelper.decodeDisplayOptions(this.h5pActivity.displayoptions);
 
-            if (this.h5pActivity.package && this.h5pActivity.package[0]) {
-                // The online player should use the original file, not the trusted one.
-                this.onlinePlayerUrl = CoreH5P.instance.h5pPlayer.calculateOnlinePlayerUrl(
-                            this.site.getURL(), this.h5pActivity.package[0].fileurl, this.displayOptions);
-            }
-
             await Promise.all([
                 this.fetchAccessInfo(),
                 this.fetchDeployedFileData(),
             ]);
 
+            this.trackComponent = this.accessInfo.cansubmit ? AddonModH5PActivityProvider.TRACK_COMPONENT : '';
+
+            if (this.h5pActivity.package && this.h5pActivity.package[0]) {
+                // The online player should use the original file, not the trusted one.
+                this.onlinePlayerUrl = CoreH5P.instance.h5pPlayer.calculateOnlinePlayerUrl(
+                            this.site.getURL(), this.h5pActivity.package[0].fileurl, this.displayOptions, this.trackComponent);
+            }
+
             if (!this.siteCanDownload || this.state == CoreConstants.DOWNLOADED) {
                 // Cannot download the file or already downloaded, play the package directly.
                 this.play();
@@ -326,10 +335,56 @@ export class AddonModH5PActivityIndexComponent extends CoreCourseModuleMainActiv
         this.navCtrl.push('AddonModH5PActivityUserAttemptsPage', {courseId: this.courseId, h5pActivityId: this.h5pActivity.id});
     }
 
+    /**
+     * Treat an iframe message event.
+     *
+     * @param event Event.
+     * @return Promise resolved when done.
+     */
+    protected async onIframeMessage(event: MessageEvent): Promise<void> {
+        if (!event.data || !CoreXAPI.instance.canPostStatementInSite(this.site) || !this.isCurrentXAPIPost(event.data)) {
+            return;
+        }
+
+        try {
+            await CoreXAPI.instance.postStatement(event.data.component, JSON.stringify(event.data.statements));
+        } catch (error) {
+            CoreDomUtils.instance.showErrorModalDefault(error, 'Error sending tracking data.');
+        }
+    }
+
+    /**
+     * Check if an event is an XAPI post statement of the current activity.
+     *
+     * @param data Event data.
+     * @return Whether it's an XAPI post statement of the current activity.
+     */
+    protected isCurrentXAPIPost(data: any): boolean {
+        if (data.context != 'moodleapp' || data.action != 'xapi_post_statement' || !data.statements) {
+            return false;
+        }
+
+        // Check the event belongs to this activity.
+        const trackingUrl = data.statements[0] && data.statements[0].object && data.statements[0].object.id;
+        if (!trackingUrl) {
+            return false;
+        }
+
+        if (!this.site.containsUrl(trackingUrl)) {
+            // The event belongs to another site, weird scenario. Maybe some JS running in background.
+            return false;
+        }
+
+        const match = trackingUrl.match(/xapi\/activity\/(\d+)/);
+
+        return match && match[1] == this.h5pActivity.context;
+    }
+
     /**
      * Component destroyed.
      */
     ngOnDestroy(): void {
         this.observer && this.observer.off();
+        window.removeEventListener('message', this.messageListenerFunction);
     }
 }

src/addon/mod/h5pactivity/lang/en.json

@@ -24,6 +24,7 @@
     "no_compatible_track": "This interaction ({{$a}}) does not provide tracking information or the tracking provided is not compatible with the current activity version.",
     "offlinedisabledwarning": "You will need to be online to view the H5P package.",
     "outcome": "Outcome",
+    "previewmode": "This content is displayed in preview mode. No attempt tracking will be stored.",
     "result_fill-in": "Fill-in text",
     "result_other": "Unkown interaction type",
     "review_my_attempts": "View my attempts",

src/addon/mod/h5pactivity/pages/index/index.ts

@@ -14,9 +14,12 @@
 
 import { Component, ViewChild } from '@angular/core';
 import { IonicPage, NavParams } from 'ionic-angular';
+import { CoreDomUtils } from '@providers/utils/dom';
 import { AddonModH5PActivityIndexComponent } from '../../components/index/index';
 import { AddonModH5PActivityData } from '../../providers/h5pactivity';
 
+import { Translate } from '@singletons/core.singletons';
+
 /**
  * Page that displays an H5P activity.
  */
@@ -46,4 +49,17 @@ export class AddonModH5PActivityIndexPage {
     updateData(h5p: AddonModH5PActivityData): void {
         this.title = h5p.name || this.title;
     }
+
+    /**
+     * Check if we can leave the page or not.
+     *
+     * @return Resolved if we can leave it, rejected if not.
+     */
+    ionViewCanLeave(): Promise<void> {
+        if (!this.h5pComponent.playing) {
+            return;
+        }
+
+        return CoreDomUtils.instance.showConfirm(Translate.instance.instant('core.confirmleaveunknownchanges'));
+    }
 }

src/addon/mod/h5pactivity/providers/h5pactivity.ts

@@ -31,6 +31,7 @@ import { makeSingleton, Translate } from '@singletons/core.singletons';
 @Injectable()
 export class AddonModH5PActivityProvider {
     static COMPONENT = 'mmaModH5PActivity';
+    static TRACK_COMPONENT = 'mod_h5pactivity'; // Component for tracking.
 
     protected ROOT_CACHE_KEY = 'mmaModH5PActivity:';
 
@@ -595,6 +596,7 @@ export type AddonModH5PActivityData = {
     grademethod: number; // Which H5P attempt is used for grading.
     contenthash?: string; // Sha1 hash of file content.
     coursemodule: number; // Coursemodule.
+    context: number; // Context ID.
     introfiles: CoreWSExternalFile[];
     package: CoreWSExternalFile[];
     deployedfile?: {

src/app/app.module.ts

@@ -88,6 +88,7 @@ import { CoreFilterModule } from '@core/filter/filter.module';
 import { CoreH5PModule } from '@core/h5p/h5p.module';
 import { CoreSearchModule } from '@core/search/search.module';
 import { CoreEditorModule } from '@core/editor/editor.module';
+import { CoreXAPIModule } from '@core/xapi/xapi.module';
 
 // Addon modules.
 import { AddonBadgesModule } from '@addon/badges/badges.module';
@@ -241,6 +242,7 @@ export const WP_PROVIDER: any = null;
         CoreH5PModule,
         CoreSearchModule,
         CoreEditorModule,
+        CoreXAPIModule,
         AddonBadgesModule,
         AddonBlogModule,
         AddonCalendarModule,

src/assets/lang/en.json

@@ -684,6 +684,7 @@
     "addon.mod_h5pactivity.no_compatible_track": "This interaction ({{$a}}) does not provide tracking information or the tracking provided is not compatible with the current activity version.",
     "addon.mod_h5pactivity.offlinedisabledwarning": "You will need to be online to view the H5P package.",
     "addon.mod_h5pactivity.outcome": "Outcome",
+    "addon.mod_h5pactivity.previewmode": "This content is displayed in preview mode. No attempt tracking will be stored.",
     "addon.mod_h5pactivity.result_fill-in": "Fill-in text",
     "addon.mod_h5pactivity.result_other": "Unkown interaction type",
     "addon.mod_h5pactivity.review_my_attempts": "View my attempts",
@@ -1407,6 +1408,7 @@
     "core.confirmdeletefile": "Are you sure you want to delete this file?",
     "core.confirmgotabroot": "Are you sure you want to go back to {{name}}?",
     "core.confirmgotabrootdefault": "Are you sure you want to go to the initial page of the current tab?",
+    "core.confirmleaveunknownchanges": "Are you sure you want to leave this page? If you have some unsaved changes they will be lost.",
     "core.confirmloss": "Are you sure? All changes will be lost.",
     "core.confirmopeninbrowser": "Do you want to open it in a web browser?",
     "core.considereddigitalminor": "You are too young to create an account on this site.",

src/core/h5p/assets/moodle/js/displayoptions.js

@@ -71,6 +71,21 @@ H5PEmbedCommunicator = (function() {
             // Parent origin can be anything.
             window.parent.postMessage(data, '*');
         };
+
+        /**
+         * Send a xAPI statement to LMS.
+         *
+         * @param {string} component
+         * @param {Object} statements
+         */
+        self.post = function(component, statements) {
+            window.parent.postMessage({
+                context: 'moodleapp',
+                action: 'xapi_post_statement',
+                component: component,
+                statements: statements,
+            }, '*');
+        };
     }
 
     return (window.postMessage && window.addEventListener ? new Communicator() : undefined);
@@ -150,6 +165,38 @@ document.onreadystatechange = function() {
         }, 0);
     });
 
+    // Get emitted xAPI data.
+    H5P.externalDispatcher.on('xAPI', function(event) {
+        var moodlecomponent = H5P.getMoodleComponent();
+        if (moodlecomponent == undefined) {
+            return;
+        }
+        // Skip malformed events.
+        var hasStatement = event && event.data && event.data.statement;
+        if (!hasStatement) {
+            return;
+        }
+
+        var statement = event.data.statement;
+        var validVerb = statement.verb && statement.verb.id;
+        if (!validVerb) {
+            return;
+        }
+
+        var isCompleted = statement.verb.id === 'http://adlnet.gov/expapi/verbs/answered'
+                    || statement.verb.id === 'http://adlnet.gov/expapi/verbs/completed';
+
+        var isChild = statement.context && statement.context.contextActivities &&
+        statement.context.contextActivities.parent &&
+        statement.context.contextActivities.parent[0] &&
+        statement.context.contextActivities.parent[0].id;
+
+        if (isCompleted && !isChild) {
+            var statements = H5P.getXAPIStatements(this.contentId, statement);
+            H5PEmbedCommunicator.post(moodlecomponent, statements);
+        }
+    });
+
     // Trigger initial resize for instance.
     H5P.trigger(instance, 'resize');
 };