H5P exercises can now easily be embedded into Moodle or other websites

mc_frontend/package-lock.json

@@ -4167,15 +4167,6 @@
       "integrity": "sha512-91IFKeKk7FjfmezPKkwtaRvSpnUc4gDwPAjA1YZ9Gn0q0PPeW+vbeUsZuyDwjI7+QTHhcLen2v25fi/AmhvbJA==",
       "dev": true
     },
-    "append-transform": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-1.0.0.tgz",
-      "integrity": "sha512-P009oYkeHyU742iSZJzZZywj4QRJdnTWffaKuJQLablCZ1uz6/cW4yaRgcDaoQ+uwOxxnt0gRUcwfsNP2ri0gw==",
-      "dev": true,
-      "requires": {
-        "default-require-extensions": "^2.0.0"
-      }
-    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -5357,12 +5348,6 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
-    "compare-versions": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/compare-versions/-/compare-versions-3.6.0.tgz",
-      "integrity": "sha512-W6Af2Iw1z4CB7q4uU4hv646dW9GQuBM+YpC0UvUCWSD8w90SJjp+ujJuXaEMtAXBtSqGfMPuFOVn4/+FlaqfBA==",
-      "dev": true
-    },
     "component-bind": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
@@ -6644,23 +6629,6 @@
         "ip-regex": "^2.1.0"
       }
     },
-    "default-require-extensions": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-2.0.0.tgz",
-      "integrity": "sha1-9fj7sYp9bVCyH2QfZJ67Uiz+JPc=",
-      "dev": true,
-      "requires": {
-        "strip-bom": "^3.0.0"
-      },
-      "dependencies": {
-        "strip-bom": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-          "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-          "dev": true
-        }
-      }
-    },
     "defaults": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz",
@@ -7569,16 +7537,6 @@
         }
       }
     },
-    "fileset": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/fileset/-/fileset-2.0.3.tgz",
-      "integrity": "sha1-jnVIqW08wjJ+5eZ0FocjozO7oqA=",
-      "dev": true,
-      "requires": {
-        "glob": "^7.0.3",
-        "minimatch": "^3.0.3"
-      }
-    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -8508,9 +8466,9 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8="
     },
     "html-escaper": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.0.tgz",
-      "integrity": "sha512-a4u9BeERWGu/S8JiWEAQcdrg9v4QArtP9keViQjGMdff20fBdd8waotXaNmODqBe6uZ3Nafi7K/ho4gCQHV3Ig==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
+      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
     "htmlparser2": {
@@ -9273,94 +9231,11 @@
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
-    "istanbul-api": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-2.1.6.tgz",
-      "integrity": "sha512-x0Eicp6KsShG1k1rMgBAi/1GgY7kFGEBwQpw3PXGEmu+rBcBNhqU8g2DgY9mlepAsLPzrzrbqSgCGANnki4POA==",
-      "dev": true,
-      "requires": {
-        "async": "^2.6.2",
-        "compare-versions": "^3.4.0",
-        "fileset": "^2.0.3",
-        "istanbul-lib-coverage": "^2.0.5",
-        "istanbul-lib-hook": "^2.0.7",
-        "istanbul-lib-instrument": "^3.3.0",
-        "istanbul-lib-report": "^2.0.8",
-        "istanbul-lib-source-maps": "^3.0.6",
-        "istanbul-reports": "^2.2.4",
-        "js-yaml": "^3.13.1",
-        "make-dir": "^2.1.0",
-        "minimatch": "^3.0.4",
-        "once": "^1.4.0"
-      },
-      "dependencies": {
-        "istanbul-lib-coverage": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-          "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
-          "dev": true
-        },
-        "istanbul-lib-instrument": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz",
-          "integrity": "sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==",
-          "dev": true,
-          "requires": {
-            "@babel/generator": "^7.4.0",
-            "@babel/parser": "^7.4.3",
-            "@babel/template": "^7.4.0",
-            "@babel/traverse": "^7.4.3",
-            "@babel/types": "^7.4.0",
-            "istanbul-lib-coverage": "^2.0.5",
-            "semver": "^6.0.0"
-          }
-        },
-        "make-dir": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-          "dev": true,
-          "requires": {
-            "pify": "^4.0.1",
-            "semver": "^5.6.0"
-          },
-          "dependencies": {
-            "semver": {
-              "version": "5.7.1",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-              "dev": true
-            }
-          }
-        },
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-          "dev": true
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
     "istanbul-lib-coverage": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
       "integrity": "sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg=="
     },
-    "istanbul-lib-hook": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-2.0.7.tgz",
-      "integrity": "sha512-vrRztU9VRRFDyC+aklfLoeXyNdTfga2EI3udDGn4cZ6fpSXpHLV9X6CHvfoMCPtggg8zvDDmC4b9xfu0z6/llA==",
-      "dev": true,
-      "requires": {
-        "append-transform": "^1.0.0"
-      }
-    },
     "istanbul-lib-instrument": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.1.tgz",
@@ -9383,37 +9258,45 @@
       }
     },
     "istanbul-lib-report": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz",
-      "integrity": "sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
+      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
       "dev": true,
       "requires": {
-        "istanbul-lib-coverage": "^2.0.5",
-        "make-dir": "^2.1.0",
-        "supports-color": "^6.1.0"
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^3.0.0",
+        "supports-color": "^7.1.0"
       },
       "dependencies": {
-        "istanbul-lib-coverage": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-          "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
         "make-dir": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
           "dev": true,
           "requires": {
-            "pify": "^4.0.1",
-            "semver": "^5.6.0"
+            "semver": "^6.0.0"
           }
         },
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
           "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
         }
       }
     },
@@ -9445,28 +9328,12 @@
           "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
           "dev": true
         },
-        "make-dir": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-          "dev": true,
-          "requires": {
-            "pify": "^4.0.1",
-            "semver": "^5.6.0"
-          }
-        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
           "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
           "dev": true
         },
-        "pify": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-          "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-          "dev": true
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -9476,12 +9343,13 @@
       }
     },
     "istanbul-reports": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.2.7.tgz",
-      "integrity": "sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.2.tgz",
+      "integrity": "sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==",
       "dev": true,
       "requires": {
-        "html-escaper": "^2.0.0"
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
       }
     },
     "jasmine": {
@@ -9797,12 +9665,15 @@
       }
     },
     "karma-coverage-istanbul-reporter": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-2.0.6.tgz",
-      "integrity": "sha512-WFh77RI8bMIKdOvI/1/IBmgnM+Q7NOLhnwG91QJrM8lW+CIXCjTzhhUsT/svLvAkLmR10uWY4RyYbHMLkTglvg==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-3.0.3.tgz",
+      "integrity": "sha512-wE4VFhG/QZv2Y4CdAYWDbMmcAHeS926ZIji4z+FkB2aF/EposRb6DP6G5ncT/wXhqUfAb/d7kZrNKPonbvsATw==",
       "dev": true,
       "requires": {
-        "istanbul-api": "^2.1.6",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^3.0.6",
+        "istanbul-reports": "^3.0.2",
         "minimatch": "^3.0.4"
       }
     },

mc_frontend/package.json

@@ -67,7 +67,7 @@
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "^4.4.1",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage-istanbul-reporter": "^2.0.6",
+    "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "^3.1.1",
     "karma-jasmine-html-reporter": "^1.5.2",
     "protractor": "^5.4.3",

mc_frontend/src/app/app-routing.module.ts

@@ -26,7 +26,11 @@ export const routes: Routes = [
   {
     path: 'semantics',
     loadChildren: () => import('./semantics/semantics.module').then( m => m.SemanticsPageModule)
-  },
+  },
  {
+    path: 'embed',
+    loadChildren: () => import('./embed/embed.module').then( m => m.EmbedPageModule)
+  },
+
 
 
 

mc_frontend/src/app/app.component.html

 <ion-app>
-    <ion-menu contentId="content1" side="end" menuId="{{configMC.menuId}}">
+    <ion-menu content-id="content1" side="end" menuId="{{configMC.menuId}}">
         <ion-header>
             <ion-toolbar>
                 <ion-title>{{ 'MACHINA_CALLIDA' | translate }}</ion-title>

mc_frontend/src/app/app.component.spec.ts

@@ -24,6 +24,7 @@ import MockMC from './models/mockMC';
 import {LoadChildrenCallback, Route} from '@angular/router';
 import configMC from '../configMC';
 import {SemanticsPageModule} from './semantics/semantics.module';
+import {EmbedPageModule} from './embed/embed.module';
 
 describe('AppComponent', () => {
     let statusBarSpy, splashScreenSpy, platformReadySpy, fixture: ComponentFixture<AppComponent>,
@@ -101,11 +102,23 @@ describe('AppComponent', () => {
     });
 
     it('should test routing', (done) => {
-        const semanticsRoute: Route = routes.find(x => x.path === configMC.pageUrlSemantics.slice(1));
-        const lcb: LoadChildrenCallback = semanticsRoute.loadChildren as LoadChildrenCallback;
-        const promise: Promise<any> = lcb() as Promise<any>;
-        promise.then((result: any) => {
-            expect(result).toBe(SemanticsPageModule);
+        const urls: string[] = [configMC.pageUrlEmbed.slice(1), configMC.pageUrlSemantics.slice(1)];
+        const modules: any[] = [EmbedPageModule, SemanticsPageModule];
+        let doneCount = 0;
+        new Promise(resolve => {
+            urls.forEach((url, index) => {
+                const route: Route = routes.find(x => x.path === url);
+                const lcb: LoadChildrenCallback = route.loadChildren as LoadChildrenCallback;
+                const promise: Promise<any> = lcb() as Promise<any>;
+                promise.then((result: any) => {
+                    expect(result).toBe(modules[index]);
+                    doneCount++;
+                    if (doneCount === urls.length) {
+                        resolve();
+                    }
+                });
+            });
+        }).then(() => {
             done();
         });
     });

mc_frontend/src/app/embed/embed-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EmbedPage } from './embed.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EmbedPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EmbedPageRoutingModule {}

mc_frontend/src/app/embed/embed.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EmbedPageRoutingModule } from './embed-routing.module';
+
+import { EmbedPage } from './embed.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EmbedPageRoutingModule
+  ],
+  declarations: [EmbedPage]
+})
+export class EmbedPageModule {}

mc_frontend/src/app/embed/embed.page.html

+<ion-content>
+  <div class="h5p-container"></div>
+</ion-content>

mc_frontend/src/app/embed/embed.page.spec.ts

+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {EmbedPage} from './embed.page';
+import {ActivatedRoute} from '@angular/router';
+import {of} from 'rxjs';
+import {HttpClientModule} from '@angular/common/http';
+import {IonicStorageModule} from '@ionic/storage';
+import {TranslateTestingModule} from '../translate-testing/translate-testing.module';
+import Spy = jasmine.Spy;
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+
+describe('EmbedPage', () => {
+    let embedPage: EmbedPage;
+    let fixture: ComponentFixture<EmbedPage>;
+    let loadExerciseSpy: Spy;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [EmbedPage],
+            imports: [
+                HttpClientModule,
+                IonicStorageModule.forRoot(),
+                TranslateTestingModule,
+            ],
+            providers: [
+                {provide: ActivatedRoute, useValue: {queryParams: of({})}}
+            ],
+            schemas: [CUSTOM_ELEMENTS_SCHEMA]
+        }).compileComponents().then();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(EmbedPage);
+        embedPage = fixture.componentInstance;
+        loadExerciseSpy = spyOn(embedPage, 'loadExercise').and.returnValue(Promise.resolve());
+        fixture.detectChanges();
+    });
+
+    it('should create', (done) => {
+        expect(embedPage).toBeTruthy();
+        loadExerciseSpy.and.callFake(() => Promise.reject());
+        embedPage.ngOnInit().then(() => {
+        }, () => {
+            done();
+        });
+    });
+
+    it('should load an exercise', (done) => {
+        loadExerciseSpy.and.callThrough();
+        const loadH5Pspy: Spy = spyOn(embedPage.exerciseService, 'loadH5P').and.returnValue(Promise.resolve());
+        embedPage.loadExercise().then(() => {
+            loadH5Pspy.and.callFake(() => Promise.reject());
+            embedPage.loadExercise().then(() => {}, () => {
+                expect(loadH5Pspy).toHaveBeenCalledTimes(2);
+                done();
+            });
+        });
+    });
+});

mc_frontend/src/app/embed/embed.page.ts

+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {ExerciseService} from '../exercise.service';
+import {ExerciseParams} from '../models/exerciseParams';
+import {rejects} from 'assert';
+
+@Component({
+    selector: 'app-embed',
+    templateUrl: './embed.page.html',
+    styleUrls: ['./embed.page.scss'],
+})
+export class EmbedPage implements OnInit {
+
+    constructor(public activatedRoute: ActivatedRoute,
+                public exerciseService: ExerciseService) {
+    }
+
+    loadExercise(): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            this.activatedRoute.queryParams.subscribe((params: ExerciseParams) => {
+                this.exerciseService.loadH5P(params.eid).then(() => {
+                    return resolve();
+                }, () => {
+                    return reject();
+                });
+            });
+        });
+    }
+
+    ngOnInit(): Promise<void> {
+        return new Promise<void>((resolve, reject) => {
+            this.loadExercise().then(() => {
+                return resolve();
+            }, () => {
+                return reject();
+            });
+        });
+    }
+
+}

mc_frontend/src/app/exercise.service.spec.ts

@@ -5,6 +5,16 @@ import {APP_BASE_HREF} from '@angular/common';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {IonicStorageModule} from '@ionic/storage';
 import {TranslateTestingModule} from './translate-testing/translate-testing.module';
+import {ExercisePart} from './models/exercisePart';
+import MockMC from './models/mockMC';
+import {ApplicationState} from './models/applicationState';
+import {AnnisResponse} from '../../openapi';
+import {ExerciseType, MoodleExerciseType} from './models/enum';
+import {ExerciseParams} from './models/exerciseParams';
+import Spy = jasmine.Spy;
+import configMC from '../configMC';
+
+declare var H5PStandalone: any;
 
 describe('ExerciseService', () => {
     let exerciseService: ExerciseService;
@@ -31,15 +41,134 @@ describe('ExerciseService', () => {
         expect(guid.length).toBe(36);
     });
 
+    it('should create a new H5P standalone instance', (done) => {
+        let h5pCreated = false;
+
+        class MockH5P extends Promise<void> {
+            constructor(el, h5pLocation, options, displayOptions) {
+                super((resolve) => {
+                    h5pCreated = true;
+                    return resolve();
+                });
+            }
+        }
+
+        spyOn(H5PStandalone, 'H5P').and.returnValue(MockH5P);
+        const promise: any = exerciseService.createH5Pstandalone(null, '', null, null);
+        promise.resolve().then(() => {
+            expect(h5pCreated).toBe(true);
+            done();
+        });
+    });
+
+    it('should get H5P elements', () => {
+        expect(exerciseService.getH5Pelements('')).toBeFalsy();
+        const iframe: HTMLIFrameElement = MockMC.addIframe(exerciseService.h5pIframeString);
+        const element: HTMLElement = exerciseService.getH5Pelements('body');
+        expect(element).toBeTruthy();
+        const nodeList: NodeList = exerciseService.getH5Pelements('head', true);
+        expect(nodeList.length).toBe(1);
+        iframe.parentNode.removeChild(iframe);
+    });
+
     it('should initialize H5P', (done) => {
         let h5pCalled = false;
         spyOn(exerciseService, 'createH5Pstandalone').and.callFake(() => new Promise(resolve => {
             h5pCalled = true;
             return resolve();
         }));
-        exerciseService.initH5P('').then(() => {
+        exerciseService.initH5P('', false).then(() => {
             expect(h5pCalled).toBe(true);
             done();
         });
     });
+
+    it('should load an exercise', (done) => {
+        const ar: AnnisResponse = {exercise_type: MoodleExerciseType.cloze.toString()};
+        const getSpy: Spy = spyOn(exerciseService.helperService, 'makeGetRequest').and.returnValue(Promise.resolve(ar));
+        const initSpy: Spy = spyOn(exerciseService, 'initH5P').and.returnValue(Promise.resolve());
+        exerciseService.helperService.applicationState.next(
+            exerciseService.helperService.deepCopy(MockMC.applicationState) as ApplicationState);
+        let ep: ExerciseParams = {eid: 'eid'};
+        exerciseService.loadExercise(ep).then(() => {
+            expect(initSpy).toHaveBeenCalledTimes(1);
+            getSpy.and.callFake(() => Promise.reject());
+            exerciseService.loadExercise(ep).then(() => {
+            }, () => {
+                expect(initSpy).toHaveBeenCalledTimes(1);
+                ep = {file: '', type: ''};
+                exerciseService.loadExercise(ep).then(() => {
+                    ep = {file: '', type: exerciseService.vocListString};
+                    exerciseService.loadExercise(ep).then(() => {
+                        expect(initSpy).toHaveBeenCalledTimes(3);
+                        done();
+                    });
+                });
+            });
+        });
+    });
+
+    it('should load H5P', (done) => {