From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 9 Feb 2022 16:34:20 +0000 (+0100)
Subject: wip #5041 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b34108333374f20ed8eba35fb4f97f5628d82bd8;p=fluidbook-toolbox.git

wip #5041 @1
---

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index fedae2bb1..e6d4a4503 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -22,8 +22,20 @@
     <select />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="5d2ecd5e-a05a-4f96-a195-fa6372618165" name="Default Changelist" comment="wip #5041 @1.5">
+    <list default="true" id="5d2ecd5e-a05a-4f96-a195-fa6372618165" name="Default Changelist" comment="wip #5041">
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/index.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/js/app.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/js/bootstrap.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/sass/app.sass" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/sass/open-sans-v27-latin-300.woff2" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/sass/open-sans-v27-latin-500.woff2" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/sass/open-sans-v27-latin-600.woff2" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/sass/open-sans-v27-latin-700.woff2" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/sass/open-sans-v27-latin-800.woff2" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/resources/elearningpackage/sass/open-sans-v27-latin-regular.woff2" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/SubForms/ElearningPackageContent.php" beforeDir="false" afterPath="$PROJECT_DIR$/app/SubForms/ElearningPackageContent.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/webpack.mix.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.mix.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -62,8 +74,8 @@
         <option value="View Helper" />
         <option value="Less File" />
         <option value="composer.json" />
-        <option value="HTML File" />
         <option value="JavaScript File" />
+        <option value="HTML File" />
       </list>
     </option>
   </component>
@@ -315,7 +327,7 @@
     <property name="add_unversioned_files" value="$PROJECT_DIR$/vendor/backpack/crud/src/resources/views/crud/buttons/bulk_clone.blade.php&#10;H:/Works/FluidbookToolbox/vendor/backpack/crud/src/app/Http/Controllers/Auth/ResetPasswordController.php&#10;C:/Users/vince/Works/FluidbookToolbox/vendor/cubist/cms-back/src/app/Middleware/BackLocaleSelector.php&#10;D:/Works/FluidbookToolbox/vendor/laravel-lang/lang/locales/fr/fr.json&#10;D:/Works/FluidbookToolbox/.env" />
     <property name="android.sdk.path" value="$PROJECT_DIR$/../../AndroidSDK" />
     <property name="aspect.path.notification.shown" value="true" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/app/Fields" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$/resources/elearningpackage/js" />
     <property name="list.type.of.created.stylesheet" value="Less" />
     <property name="node.js.detected.package.eslint" value="true" />
     <property name="node.js.detected.package.tslint" value="true" />
@@ -335,18 +347,18 @@
   </component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="D:\Works\FluidbookToolbox\resources\elearningpackage\js" />
+      <recent name="D:\Works\FluidbookToolbox\resources\elearningpackage\sass" />
       <recent name="D:\Works\FluidbookToolbox\app\Fields" />
       <recent name="D:\Works\FluidbookToolbox\app\Models" />
       <recent name="D:\Works\FluidbookToolbox\app\Http\Controllers\Admin\Operations\ELearningMedia" />
-      <recent name="D:\Works\FluidbookToolbox\resources\views\vendor\backpack\crud\buttons\elearningmedia" />
-      <recent name="D:\Works\FluidbookToolbox\resources\views\vendor\backpack\crud\buttons" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="D:\Works\FluidbookToolbox\resources\elearningpackage\js" />
       <recent name="C:\Users\vince\Works\FluidbookToolbox\app\Models\Fluidbook" />
       <recent name="C:\Users\vince\Works\FluidbookToolbox\storage" />
       <recent name="C:\Users\vince\Works\FluidbookToolbox\storage\app" />
       <recent name="C:\Users\vince\Works\FluidbookToolbox\storage\quizlogs" />
-      <recent name="H:\Works\FluidbookToolbox\app\Http\Controllers\Admin" />
     </key>
   </component>
   <component name="RunManager">
@@ -670,14 +682,7 @@
       <workItem from="1644333352980" duration="463000" />
       <workItem from="1644333850613" duration="6297000" />
       <workItem from="1644343001625" duration="4220000" />
-      <workItem from="1644394645639" duration="11254000" />
-    </task>
-    <task id="LOCAL-00186" summary="wait #4627 @1.5">
-      <created>1635513367225</created>
-      <option name="number" value="00186" />
-      <option name="presentableId" value="LOCAL-00186" />
-      <option name="project" value="LOCAL" />
-      <updated>1635513367226</updated>
+      <workItem from="1644394645639" duration="12784000" />
     </task>
     <task id="LOCAL-00187" summary="wait #4714">
       <created>1635513527084</created>
@@ -1015,7 +1020,14 @@
       <option name="project" value="LOCAL" />
       <updated>1644412790547</updated>
     </task>
-    <option name="localTasksCounter" value="235" />
+    <task id="LOCAL-00235" summary="wip #5041">
+      <created>1644422183555</created>
+      <option name="number" value="00235" />
+      <option name="presentableId" value="LOCAL-00235" />
+      <option name="project" value="LOCAL" />
+      <updated>1644422183555</updated>
+    </task>
+    <option name="localTasksCounter" value="236" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -1060,7 +1072,6 @@
     <MESSAGE value="wait #4962 @0.25" />
     <MESSAGE value="wait #4977 @0.25" />
     <MESSAGE value="wip #5041 @0.75" />
-    <MESSAGE value="wip #5041" />
     <MESSAGE value="wait #5049 @0.25" />
     <MESSAGE value="wip #5045 @0.25" />
     <MESSAGE value="wip #5045 @1" />
@@ -1072,7 +1083,8 @@
     <MESSAGE value="wip #5045 @1.1" />
     <MESSAGE value="wait #5045 @0.5" />
     <MESSAGE value="wip #5041 @1.5" />
-    <option name="LAST_COMMIT_MESSAGE" value="wip #5041 @1.5" />
+    <MESSAGE value="wip #5041" />
+    <option name="LAST_COMMIT_MESSAGE" value="wip #5041" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/app/SubForms/ElearningPackageContent.php b/app/SubForms/ElearningPackageContent.php
index 7c43e0f9a..44a7a5106 100644
--- a/app/SubForms/ElearningPackageContent.php
+++ b/app/SubForms/ElearningPackageContent.php
@@ -3,16 +3,12 @@
 namespace App\SubForms;
 
 use App\Fields\ElearningMediaAudioID;
-use App\Fields\ElearningMediaID;
 use App\Fields\ElearningMediaVideoID;
 use App\Fields\FluidbookID;
 use App\Fields\QuizID;
-use App\Models\ELearningMedia;
-use App\Models\Quiz;
 use Cubist\Backpack\Magic\Fields\Checkbox;
 use Cubist\Backpack\Magic\Fields\Files;
 use Cubist\Backpack\Magic\Fields\SelectFromArray;
-use Cubist\Backpack\Magic\Fields\SelectFromModel;
 use Cubist\Backpack\Magic\Fields\Text;
 use Cubist\Backpack\Magic\SubForm;
 
diff --git a/resources/elearningpackage/index.html b/resources/elearningpackage/index.html
new file mode 100644
index 000000000..d83e023d4
--- /dev/null
+++ b/resources/elearningpackage/index.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width">
+    <title></title>
+    <link href="css/app.css" rel="stylesheet">
+</head>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
+    <symbol id="interface-close" viewBox="0 0 512 512">
+        <path fill="currentColor"
+              d="m512 63l-66-63-190 193-193-193-63 63 193 193-193 190 63 66 193-193 190 193 66-66-193-190z"/>
+    </symbol>
+    <symbol id="icon-QZ" viewBox="0 0 36 36">
+        <path stroke="currentColor" fill="transparent" d="M23.1,9.6c5.3,0,9.5,3.8,9.5,8.5c0,4.7-4.3,8.5-9.5,8.5c-1.1,0-2.1-0.2-3-0.4c-1.1,1-1.7,1.4-3.6,2.3
+		 M16.5,28.5l0-4.3c-1.8-1.5-2.9-3.7-2.9-6.1 M23.7,22.2c0,0.1,0,0.2,0,0.3 M24.5,14.4l-0.6,5.4 M12.9,13.3c0,0.1,0,0.2,0,0.3
+		 M11.2,6.8c1-1.8,3.9-1.9,3.9,0.6c0,1.7-2.2,1.6-2.2,3.6 M12.9,1.1c-5.3,0-9.5,3.8-9.5,8.5c0,4.7,4.3,8.5,9.5,8.5
+		c1.1,0,2.1-0.2,3-0.4c1.1,1,1.7,1.4,3.6,2.3l0-4.3c1.8-1.5,2.9-3.7,2.9-6.1C22.4,4.9,18.1,1.1,12.9,1.1z"/>
+    </symbol>
+    <symbol id="icon-FB" viewBox="0 0 36 36">
+        <g>
+            <path stroke="currentColor" fill="transparent" d="M27.5,28.3v2.2 M27.5,26.8v-0.7c0-1.2-1-2.2-2.2-2.2H8.5c-1.2,0-2.2-1-2.2-2.2v-2.2 M30,34.9h-4.9
+			c-0.3,0-0.5-0.2-0.5-0.5v-7.1c0-0.3,0.2-0.5,0.5-0.5H30c0.3,0,0.5,0.2,0.5,0.5v7.1C30.5,34.6,30.2,34.9,30,34.9z M29.7,16.5h-7.3
+			c-1.4,0-2.4,0.4-2.9,1.5H18V5.5c0-2.4,1.4-4.4,4.4-4.4h7.3V16.5z M6.3,16.5h7.3c1.4,0,2.4,0.4,2.9,1.5H18V5.5
+			c0-2.4-1.4-4.4-4.4-4.4H6.3V16.5z M31.2,4.1h1.5v15.4H22.4l-1.5,1.5h-5.9l-1.5-1.5H3.3V4.1h1.5"/>
+        </g>
+    </symbol>
+    <symbol id="icon-IN" viewBox="0 0 36 36">
+        <path stroke="currentColor" fill="transparent" d="M7.3,18.9h7.8v-7.6H7.3V18.9z M28.1,7.5H7.3V5h20.8V7.5z M17,18.9h11.7 M17,16.4h11.7 M17,13.8h11.7 M17,11.3
+		h11.7"/>
+        <path stroke="currentColor" fill="transparent"
+              d="M33,26.6H4.6c-0.7,0-1.3-0.6-1.3-1.3V1.1h28.4v24.2C31.7,26,32.3,26.6,33,26.6"/>
+    </symbol>
+    <symbol id="icon-AN" viewBox="0 0 36 36">
+        <path stroke="currentColor" fill="transparent" d="M14.4,16.7V8.5c0-0.7,0.7-1.2,1.3-0.8l7.2,4.1c0.6,0.4,0.6,1.3,0,1.7l-7.2,4.1C15.2,17.9,14.4,17.4,14.4,16.7z
+		"/>
+        <path stroke="currentColor" fill="transparent" d="M32.2,24.1H3.8c-0.3,0-0.5-0.2-0.5-0.5V1.6c0-0.3,0.2-0.5,0.5-0.5h28.3c0.3,0,0.5,0.2,0.5,0.5v21.9
+		C32.6,23.9,32.4,24.1,32.2,24.1z"/>
+    </symbol>
+    <symbol id="icon-VI" viewBox="0 0 36 36">
+        <path stroke="currentColor" fill="transparent" d="M14.4,16.7V8.5c0-0.7,0.7-1.2,1.3-0.8l7.2,4.1c0.6,0.4,0.6,1.3,0,1.7l-7.2,4.1C15.2,17.9,14.4,17.4,14.4,16.7z
+		"/>
+        <path stroke="currentColor" fill="transparent" d="M32.2,24.1H3.8c-0.3,0-0.5-0.2-0.5-0.5V1.6c0-0.3,0.2-0.5,0.5-0.5h28.3c0.3,0,0.5,0.2,0.5,0.5v21.9
+		C32.6,23.9,32.4,24.1,32.2,24.1z"/>
+    </symbol>
+    <symbol id="icon-PC" viewBox="0 0 36 36">
+        <path stroke="currentColor" fill="transparent" d="M27.5,28.7c3.2-3.3,5.1-7.9,5.1-12.9s-2-9.6-5.1-12.9"/>
+        <path stroke="currentColor" fill="transparent"
+              d="M10.6,21.9H5.2c-1,0-1.8-0.8-1.8-1.8v-8.5c0-1,0.8-1.8,1.8-1.8h5.5l8.5-8.5v29.3L10.6,21.9z"/>
+        <path stroke="currentColor" fill="transparent"
+              d="M25.2,25.2c2.3-2.4,3.8-5.8,3.8-9.4c0-3.7-1.5-7-3.8-9.4 M23,21.8c1.5-1.5,2.4-3.7,2.4-6c0-2.3-0.9-4.5-2.4-6"
+        />
+    </symbol>
+    <symbol id="check-ok" viewBox="0 0 32 32">
+        <g>
+            <path d="M17,3.9C9.8,3.9,3.9,9.8,3.9,17S9.8,30.1,17,30.1S30.1,24.2,30.1,17S24.2,3.9,17,3.9 M17,31C9.3,31,3,24.7,3,17
+			S9.3,3,17,3s14,6.3,14,14S24.7,31,17,31"/>
+        </g>
+        <polygon points="14.5,22.6 9.3,17.3 9.9,16.7 14.5,21.3 24.1,11.8 24.7,12.4 	"/>
+    </symbol>
+    <symbol id="check-nok" viewBox="0 0 32 32">
+        <g>
+            <path d="M17,3.9C9.8,3.9,3.9,9.8,3.9,17S9.8,30.1,17,30.1c7.2,0,13.1-5.9,13.1-13.1S24.2,3.9,17,3.9 M17,31C9.3,31,3,24.7,3,17
+			S9.3,3,17,3c7.7,0,14,6.3,14,14S24.7,31,17,31"/>
+        </g>
+        <polygon points="23.2,11.4 22.6,10.8 17,16.4 11.4,10.8 10.8,11.4 16.4,17 10.8,22.6 11.4,23.2 17,17.6 22.6,23.2 23.2,22.6
+		17.6,17"/>
+    </symbol>
+    <symbol id="tile" viewBox="0 0 400.9 279.4">
+        <g>
+            <path fill="currentColor" d="M41.2,246.9l254.4,24.5
+		c12,1.2,23.7-5.4,30.4-16.9l50.9-96.2c10.2-17.6,5.5-41-10.3-51.3l-166-81c-4.8-2.3-8.6-3.6-13.1-4c-9.7-0.9-19.6,3.1-26.7,11.6
+		l-139.3,152C2.7,207.9,14.4,244.3,41.2,246.9"/>
+        </g>
+    </symbol>
+    <symbol id="logo" viewBox="0 0 1121 291">
+        <g>
+            <g>
+                <path stroke="currentColor" d="M206.7,141.8c0,0.1,0,0.1,0,0.2c0,0,0.1,0.1,0.2,0.1h36.9c0.1,0,0.2-0.1,0.2-0.2v-3.6
+				c0-9.6-6.5-16.3-15.9-16.3C216.8,121.9,208.6,129.5,206.7,141.8 M191.1,153.8c0-22.6,15.7-39.7,36.6-39.7
+				c18.4,0,31.3,12.3,31.3,29.8v5.6c0,0.2-0.2,0.4-0.4,0.4h-52.4c-0.1,0-0.2,0.1-0.2,0.2v0.4c0,19.9,10.5,33.2,26.3,33.2
+				c6.2,0,13.2-2.3,20.2-6.7c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0.1,0.3,0.2l2.9,5.8c0.1,0.2,0,0.4-0.1,0.5
+				c-8.6,6.2-16.9,8.9-27.9,8.9C206.6,192.5,191.1,176.2,191.1,153.8"/>
+                <path stroke="currentColor" d="M331.9,128.7c7.3-7.5,15.5-14.4,26.8-14.4c15.2,0,24.3,9.8,24.3,26.1v50.1c0,0.2-0.2,0.4-0.4,0.4h-12.2
+				c-0.2,0-0.4-0.2-0.4-0.4v-50.5c0-5.7-1.4-10-4.2-12.8c-2.3-2.3-5.6-3.5-9.8-3.5c-8.1,0-16.9,7.7-22,15.3c0,0,0,0.1,0,0.1l0,51.4
+				c0,0.2-0.2,0.4-0.4,0.4h-13.2c-0.2,0-0.4-0.2-0.4-0.4v-50.5c0-7.4-2.4-16.3-13.9-16.3c-8.1,0-16.9,7.7-22,15.2c0,0,0,0.1,0,0.1
+				l0,51.4c0,0.2-0.2,0.4-0.4,0.4h-13.1c-0.2,0-0.4-0.2-0.4-0.4v-53.9c0-12-2.6-16.8-10.7-19.7c-0.2-0.1-0.3-0.2-0.3-0.4l0-0.2
+				c0-0.2,0.2-0.4,0.4-0.4h24.2c0.2,0,0.4,0.2,0.4,0.4v10.3c0,0.1,0,0.2,0.1,0.2c0.1,0,0.2,0,0.2-0.1c5.8-5.9,13.8-12.6,24.9-12.6
+				C323.9,114.3,329.7,123.3,331.9,128.7C331.8,128.7,331.9,128.8,331.9,128.7c0.1,0.1,0.2,0.1,0.3,0"/>
+                <path stroke="currentColor" d="M421.5,184.8c9.2,0,15.4-4.3,15.4-10.7c0-5.2-3.4-9.4-20.6-15.9c-15.3-5.8-21.6-12.3-21.6-22.3
+				c0-12.7,11.1-21.7,26.9-21.7c12.8,0,21.1,5,24.8,8c0.1,0.1,0.1,0.2,0.2,0.3c0,0.1,0,0.2-0.1,0.3l-7.7,8.3
+				c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1c-3-3.4-9.1-9-17.1-9c-8.8,0-14.1,3.8-14.1,10.2c0,6.2,3.5,8.9,19.6,15.1
+				c16.3,6.3,22.1,12.3,22.1,22.7c0,13-11.5,22.5-27.3,22.5c-11,0-20.3-2.7-27.7-8c-0.1-0.1-0.2-0.2-0.2-0.3c0-0.1,0-0.2,0.1-0.3
+				l7.7-8.4c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1C408.2,182.1,414.1,184.8,421.5,184.8"/>
+                <path stroke="currentColor" d="M460,191l0-99.3c0-11.6-2.6-16.2-10.7-19c-0.2-0.1-0.3-0.2-0.3-0.4v-1.9c0-0.2,0.2-0.4,0.4-0.4h24.2l0.3,0.1
+				l0.1,0.3l0,120.2c0,0.2-0.2,0.4-0.4,0.4h-13.2c0,0-0.4,0-0.4-0.4"/>
+                <path stroke="currentColor" d="M499.7,141.8c0,0.1,0,0.1,0.1,0.2c0,0,0.1,0.1,0.2,0.1h36.9c0.1,0,0.2-0.1,0.2-0.2v-3.6
+				c0-9.6-6.5-16.3-15.9-16.3C509.8,121.9,501.6,129.5,499.7,141.8 M484.1,153.8c0-22.6,15.7-39.7,36.6-39.7
+				c18.4,0,31.3,12.3,31.3,29.8v5.6c0,0.2-0.2,0.4-0.4,0.4h-52.4c-0.1,0-0.2,0.1-0.2,0.2v0.4c0,19.9,10.5,33.2,26.2,33.2
+				c6.2,0,13.2-2.3,20.2-6.7c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0.1,0.3,0.2l3,5.8c0.1,0.2,0,0.4-0.1,0.5
+				c-8.6,6.2-16.9,8.9-27.9,8.9C499.6,192.5,484.1,176.2,484.1,153.8"/>
+                <path stroke="currentColor" d="M891.7,141.8c0,0.1,0,0.1,0,0.2c0,0,0.1,0.1,0.2,0.1h36.9c0.1,0,0.2-0.1,0.2-0.2v-3.6
+				c0-9.6-6.5-16.3-15.9-16.3C901.8,121.9,893.6,129.5,891.7,141.8 M876.1,153.8c0-22.6,15.7-39.7,36.6-39.7
+				c18.4,0,31.3,12.3,31.3,29.8v5.6c0,0.2-0.2,0.4-0.4,0.4h-52.4c-0.1,0-0.2,0.1-0.2,0.2v0.4c0,19.9,10.6,33.2,26.3,33.2
+				c6.2,0,13.2-2.3,20.2-6.7c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0.1,0.3,0.2l3,5.8c0.1,0.2,0,0.4-0.1,0.5
+				c-8.6,6.2-16.9,8.9-27.9,8.9C891.6,192.5,876.1,176.2,876.1,153.8"/>
+                <path stroke="currentColor" d="M630,123v-6.6c0-0.2,0.2-0.4,0.4-0.4h12.4c0.1,0,0.2-0.1,0.2-0.2v-15.3c0-17.4,12.4-29.5,30.1-29.5
+				c9.8,0,16.7,3.3,21.7,6.2c0.1,0,0.2,0.2,0.2,0.3c0,0.1,0,0.2-0.1,0.3l-7.7,9.5c-0.1,0.1-0.2,0.1-0.3,0.2c-0.1,0-0.2,0-0.3-0.1
+				l-0.4-0.4c-5.7-4.9-9.5-8.1-16-8.1c-8.2,0-13.2,9.6-13.2,25.2l0,11.8c0,0,0,0.1,0.1,0.1c0,0,0.1,0.1,0.2,0.1h18.4
+				c0.2,0,0.4,0.2,0.4,0.4v7.2c0,0.2-0.2,0.4-0.4,0.4h-18.4c-0.1,0-0.2,0.1-0.2,0.2l0,67.4c0,0.2-0.2,0.4-0.4,0.4h-13.1l-0.3-0.1
+				l-0.1-0.3l0-67.4c0-0.1,0-0.1-0.1-0.1c0,0-0.1-0.1-0.1-0.1h-12.2c-0.2,0-0.4-0.2-0.4-0.4"/>
+                <path stroke="currentColor" d="M708.4,128.1c8.9-9.4,14-13.8,21.8-13.8c5,0,7.7,3,9.1,4.6l0.3,0.4c0.1,0.2,0.1,0.4,0,0.5l-9.3,10.8
+				c-0.1,0.2-0.4,0.2-0.6,0.1c-2.4-1.9-4.1-2.5-6.9-2.5c-4.5,0-10.6,5.9-14.8,10.3c0,0,0,0.1,0,0.1v51.9c0,0.2-0.2,0.4-0.4,0.4
+				h-13.2c-0.2,0-0.4-0.2-0.4-0.4v-53.9c0-12-2.6-16.8-10.7-19.7c-0.2-0.1-0.3-0.2-0.3-0.4v-0.2c0-0.2,0.2-0.4,0.4-0.4h24.2
+				c0.2,0,0.4,0.2,0.4,0.4V128c0,0.1,0,0.2,0.1,0.2C708.2,128.2,708.3,128.2,708.4,128.1"/>
+                <path stroke="currentColor" d="M970.4,128.1c8.9-9.4,14-13.8,21.8-13.8c5,0,7.7,3,9.1,4.6l0.3,0.4c0.1,0.2,0.1,0.4,0,0.5l-9.3,10.8
+				c-0.1,0.2-0.4,0.2-0.6,0.1c-2.4-1.9-4.1-2.5-6.9-2.5c-4.5,0-10.6,5.9-14.8,10.3c-0.1,0-0.1,0.1-0.1,0.1v51.9
+				c0,0.2-0.2,0.4-0.4,0.4h-13.2c-0.2,0-0.4-0.2-0.4-0.4v-53.9c0-12-2.6-16.8-10.7-19.7c-0.2-0.1-0.3-0.2-0.3-0.4v-0.2
+				c0-0.2,0.2-0.4,0.4-0.4h24.2c0.2,0,0.4,0.2,0.4,0.4V128c0,0.1,0.1,0.2,0.1,0.2C970.2,128.2,970.3,128.2,970.4,128.1"/>
+                <path stroke="currentColor" d="M785.7,153.5l-15.4,3.5c-9.4,2.2-14.3,7.3-14.3,14.7c0,6.3,5.3,11,12.5,11c5.5,0,13-3.7,17.4-8.6
+				c0,0,0-0.1,0-0.1v-20.3c0-0.1,0-0.1-0.1-0.2C785.9,153.5,785.8,153.5,785.7,153.5 M747,136.7c-1.1-1.8-1.5-3.5-1.5-5.7
+				c0-9.6,11.5-16.7,27.4-16.7c18.2,0,27.1,8.1,27.1,24.8v31.1c0,11.6,2.6,16.2,10.7,19c0.2,0.1,0.3,0.2,0.3,0.4v0.9
+				c0,0.2-0.2,0.4-0.4,0.4h-20.3c-0.2,0-0.3-0.1-0.4-0.3l-2.3-8c0-0.1-0.1-0.1-0.1-0.1c-0.1,0-0.1,0-0.2,0.1
+				c-5.7,6-15.2,9.7-24.7,9.7c-12.3,0-20.6-7.6-20.6-18.9c0-13,7.7-20.7,24.2-24.2l19.7-4.1c0.1,0,0.2-0.1,0.2-0.2v-8.8
+				c0-9.1-5.1-13.9-14.7-13.9c-8.5,0-11.5,4-11.5,7.5c0,0.5,0.1,1.6,0.6,3.1c0,0.1,0,0.2,0,0.3c-0.1,0.1-0.2,0.2-0.3,0.2l-12.9,3.5
+				c-0.2,0.1-0.4,0-0.5-0.2"/>
+                <path stroke="currentColor" d="M857.3,174.1c0-5.2-3.4-9.4-20.6-15.9c-15.3-5.8-21.6-12.3-21.6-22.3c0-12.7,11.1-21.7,27-21.7
+				c12.8,0,21.1,5,24.8,8c0.1,0.1,0.2,0.2,0.2,0.3c0,0.1,0,0.2-0.1,0.3l-7.7,8.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1
+				c-3-3.4-9.1-9-17.1-9c-8.8,0-14.1,3.8-14.1,10.2c0,6.2,3.5,8.9,19.6,15.1c16.3,6.3,22.1,12.3,22.1,22.7c0,13-11.5,22.5-27.3,22.5
+				c-11,0-20.3-2.7-27.8-8c-0.1-0.1-0.2-0.2-0.2-0.3c0-0.1,0-0.2,0.1-0.3l7.6-8.4c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1
+				c6.2,6.3,12.1,9.1,19.6,9.1C851.1,184.8,857.3,180.5,857.3,174.1"/>
+                <path stroke="currentColor" d="M609.9,127.3C609.9,127.2,609.9,127.2,609.9,127.3l0.2-2c0-1.7-0.4-3.2-1.3-4.5c-1.2-1.6-3-2.7-5.4-3.1
+				c-0.2,0-0.4-0.2-0.4-0.4v-0.9c0-0.2,0.2-0.4,0.4-0.4h5.6l0,0h14.2c0.1,0,0.3,0.1,0.3,0.2c0.1,0.1,0.1,0.3,0,0.4
+				C592.9,189,592.8,189,592.8,189l-17.3,38.7c-0.1,0.2-0.2,0.2-0.4,0.2l-15.1,0c-0.2,0-0.3-0.1-0.4-0.3l0-0.1
+				c0-0.1,0.1-0.2,0.1-0.3c9.4-8.6,22.8-36.3,24.3-39.4c0,0,0-0.1,0-0.1c0,0,0-0.1,0-0.1l-30.2-71.1l0-0.2l0.1-0.2
+				c0.1-0.1,0.2-0.2,0.3-0.2h14.5c0.2,0,0.3,0.1,0.4,0.3l22.5,54.1c0,0.1,0.1,0.1,0.2,0.1c0.1,0,0.2,0,0.2-0.1l9.2-22.3
+				c8.1-19.8,8.1-19.8,8.1-19.8c0,0,0.2-0.7,0.2-0.7"/>
+                <path stroke="currentColor" d="M115,191V93.2c0-11.8-2.8-16.5-11.7-19.4c-0.2-0.1-0.3-0.2-0.3-0.4v-1c0-0.2,0.2-0.4,0.4-0.4h25.2
+				c0.2,0,0.4,0.2,0.4,0.4v54.9c0,0.1,0.1,0.2,0.1,0.2c0.1,0,0.2,0,0.2,0c6.1-5.8,14.5-12.4,26.2-12.4c16,0,25.5,9.6,25.5,25.8v49.7
+				c0,0.2-0.2,0.4-0.4,0.4h-13.2c-0.2,0-0.4-0.2-0.4-0.4v-49.9c0-7.3-2.5-16.1-14.3-16.1c-8.3,0-17.4,7.6-22.6,15.1c0,0,0,0.1,0,0.1
+				l0,50.8c0,0.2-0.2,0.4-0.4,0.4h-13.9c-0.2,0-0.4-0.2-0.4-0.4"/>
+            </g>
+        </g>
+    </symbol>
+    <symbol id="lock-locked" viewBox="0 0 30 30">
+        <g>
+            <path fill="currentColor" d="M5.7,8.7c0-2.5,2.1-4.6,4.6-4.6s4.6,2.1,4.6,4.6v2.7h2.2V8.7c0-3.8-3.1-6.8-6.8-6.8S3.5,5,3.5,8.7v2.7h2.2
+			V8.7z"/>
+            <path fill="currentColor" d="M11.3,20.9l0.1,2.2c0,0.4-0.5,0.8-0.9,0.8h-0.4c-0.4,0-0.9-0.3-0.9-0.8l0.1-2.2c-0.6-0.3-1-1-1-1.7
+			c0-1.1,0.9-2,2-2s2,0.9,2,2C12.3,19.9,11.9,20.6,11.3,20.9 M19.2,13.2c0-0.4-0.4-0.8-0.8-0.8H2.3c-0.5,0-0.8,0.4-0.8,0.8l-0.3,8.4
+			c0,1.5,0.6,2.9,1.7,3.8c1.9,1.5,4.5,2.6,7.5,2.6c3.1,0,5.9-1.2,7.8-2.8c0.9-0.8,1.5-2,1.4-3.3L19.2,13.2z"/>
+        </g>
+    </symbol>
+    <symbol id="lock-unlocked" viewBox="0 0 30 30">
+        <g>
+            <path fill="currentColor" d="M11.4,21l0.1,2.2c0,0.4-0.5,0.8-0.9,0.8h-0.4c-0.4,0-0.9-0.4-0.9-0.8L9.4,21c-0.6-0.3-1-1-1-1.7
+			c0-1.1,0.9-2,2-2s2,0.9,2,2C12.5,20,12,20.7,11.4,21 M19.5,13.3c0-0.4-0.4-0.8-0.8-0.8H2.2c-0.5,0-0.8,0.4-0.9,0.8l-0.3,8.4
+			c-0.1,1.5,0.6,2.9,1.8,3.8c1.9,1.5,4.6,2.6,7.6,2.6c3.2,0,6-1.2,7.9-2.8c1-0.8,1.5-2,1.4-3.3L19.5,13.3z"/>
+            <path fill="currentColor" d="M22,2c-3.8,0-6.9,3.1-6.9,6.8v2.7h2.3V8.8c0-2.5,2.1-4.6,4.7-4.6s4.7,2.1,4.7,4.6v2.7h2.3V8.8
+			C28.9,5.1,25.8,2,22,2"/>
+        </g>
+    </symbol>
+</svg>
+<div id="z">
+    <div id="wrapper">
+        <header>
+            <div id="logo"></div>
+            <div id="tile"></div>
+            <div id="contents">
+                <h1></h1>
+                <p></p>
+            </div>
+        </header>
+        <main>
+            <table>
+                <thead>
+                <tr>
+                    <th></th>
+                    <th class="t"></th>
+                    <th class="y">Type</th>
+                    <th class="c">Mandatory</th>
+                    <th class="c">Completed</th>
+                    <th class="c">Score</th>
+                    <th></th>
+                </tr>
+                </thead>
+                <tbody>
+
+                </tbody>
+            </table>
+        </main>
+    </div>
+</div>
+
+<div id="scowin">
+    <div id="scobar">
+        <div id="scoicon"></div>
+        <h2></h2><a href="#" class="close"></a></div>
+    <iframe id="sco" frameborder="0"></iframe>
+</div>
+
+<script src="data.js"></script>
+<script src="js/app.js"></script>
+</body>
+</html>
diff --git a/resources/elearningpackage/js/app.js b/resources/elearningpackage/js/app.js
new file mode 100644
index 000000000..c214f337b
--- /dev/null
+++ b/resources/elearningpackage/js/app.js
@@ -0,0 +1,635 @@
+require('./bootstrap');
+import {SCORM} from 'pipwerks-scorm-api-wrapper';
+import gsap from "gsap";
+
+window.savedState = {};
+window.currentModule = null;
+
+
+SCORM_INITED = false;
+SCORM_START_TIME = null;
+SCORM_INTERACTION_TIMESTAMPS = [];
+SCORM_CORRECT_ANSWERS = [];
+SCORM_ID_TO_N = {};
+SCORM_WEIGHTING = 0;
+SCORM_QUESTIONS = [];
+SCORM_SUCCESS_STATUS = 'unknown';
+SCORM_SUCCESS_SCORE = 0;
+SCORM_EVENTS_INITED = false;
+SCORM_INTERACTIONS_INITED = false;
+SCORM_LOCATION_INITED = false;
+SCORM_OK = false;
+
+var _CMI12 = {
+    'location': 'cmi.core.lesson_location',
+    'status': "cmi.core.lesson_status",
+    'session_time': 'cmi.core.session_time',
+    'success_status': '',
+    'exit': 'cmi.core.exit',
+    'cmi.score.raw': 'cmi.core.score.raw',
+    'cmi.score.min': 'cmi.core.score.min',
+    'cmi.score.max': 'cmi.core.score.max',
+    'cmi.score.scaled': '',
+};
+
+var _CMI2004 = {
+    'location': 'cmi.location',
+    'status': 'cmi.completion_status',
+    'session_time': 'cmi.session_time',
+    'success_status': 'cmi.success_status',
+    'exit': 'cmi.exit',
+};
+
+
+$(function () {
+    $("header #logo").html(getSpriteIcon('logo'));
+    $("header #tile").html(getSpriteIcon('tile'));
+    initScorm();
+    $(window).on('resize', function () {
+        resize();
+    });
+    resize();
+});
+
+function resize() {
+    if ($(window).width() < 480) {
+        $("#z").css('transform', 'scale(' + ($(window).width()/480) + ')');
+    }else{
+        $("#z").css('transform', 'scale(1)');
+    }
+}
+
+function _cmi(key) {
+    var res = null;
+    switch (pipwerks.SCORM.version) {
+        case "1.2" :
+            res = _CMI12[key];
+            break;
+        case '2004':
+            res = _CMI2004[key];
+            break;
+    }
+    if (res == undefined || res == null) {
+        res = key;
+    }
+    return res;
+}
+
+function initScorm() {
+    if (SCORM_INITED) {
+        return;
+    }
+
+    SCORM_INITED = true;
+    try {
+        if (pipwerks.SCORM.init()) {
+            SCORM_OK = true;
+        }
+    } catch (e) {
+
+    }
+
+    try {
+        if (FORCE_SCORM) {
+            SCORM_OK = true;
+        }
+    } catch (e) {
+
+    }
+
+    if (SCORM_OK) {
+        scormExit();
+        startScormTimer();
+        initScormEvents();
+    }
+    initState();
+    setContents();
+    initEvents();
+    window.API = window.API_1484_11 = new SCORMFacade();
+    return SCORM_OK;
+}
+
+function initState() {
+
+    if (SCORM_LOCATION_INITED) {
+        return;
+    }
+    SCORM_LOCATION_INITED = true;
+
+    var currentLocation = '';
+    if (SCORM_OK) {
+        currentLocation = getScormValue('location');
+    }
+
+    if (currentLocation === undefined || currentLocation === null || currentLocation === 'null' || currentLocation === '') {
+        window.savedState = {};
+    } else {
+        window.savedState = JSON.parse(currentLocation);
+    }
+
+    console.log(currentLocation, window.savedState);
+
+
+    if (window.savedState === undefined || window.savedState === null || window.savedState === 'null') {
+        window.savedState = {};
+    }
+
+    var clone = $.extend(true, {}, window.savedState);
+    $.each(DATA.modules, function (k, v) {
+        var id = v.id.toString();
+        var defaultState = {
+            completion_status: 'incomplete',
+            success_status: 'unknown',
+            score: 0,
+            location: '',
+            cmi: {}
+        };
+        if (clone[id] === undefined || clone[id] === null) {
+            window.savedState[id] = defaultState;
+        } else {
+            window.savedState[id] = $.extend(true, defaultState, clone[id]);
+        }
+    });
+}
+
+function scormMarkAsComplete() {
+    if (!SCORM_OK) {
+        return;
+    }
+    scormExit();
+}
+
+
+function finishScorm() {
+    if (!SCORM_OK) {
+        return;
+    }
+    setSessionTime();
+    pipwerks.SCORM.save();
+    pipwerks.SCORM.quit();
+}
+
+function scormExit() {
+    if (!SCORM_OK) {
+        return;
+    }
+    var v = 'suspend';
+    setScormValue('exit', v);
+}
+
+function startScormTimer() {
+    SCORM_START_TIME = new Date();
+}
+
+function scormCompleteAndClose() {
+    scormComplete();
+    scormClose();
+}
+
+function scormClose() {
+    parent.close();
+    top.close();
+    window.close();
+}
+
+function initEvents() {
+    $(document).on('click', '[data-id]:not([data-lock="locked"])', function () {
+        openSubSCO($(this).data('id'));
+        return false;
+    });
+
+    $(document).on('click', '#scobar a.close', function () {
+        closeSubSCO();
+        return false;
+    });
+}
+
+function closeSubSCO() {
+    $("#scowin").removeClass('show');
+    $('#sco').attr('src', '');
+}
+
+function openSubSCO(id) {
+    var module = getModuleData(id);
+    currentModule = module;
+    var path = module.path;
+
+    var e = path.split('.');
+    var ext = e.pop().toLowerCase();
+
+    if (ext === 'pdf') {
+        path = 'js/libs/pdfjs/web/viewer.html?file=../../../../' + path;
+    }
+
+    $("#scowin").addClass('show').attr('data-type', module.type);
+    $("#scowin h2").text(module.title);
+    $("#scobar #scoicon").html(getSpriteIcon('icon-' + module.type));
+    $("#scobar .close").html(getSpriteIcon('interface-close'));
+    $("#sco").attr('src', path);
+
+    if (!module.scorm) {
+        setModuleState(module.id, {completion_status: 'completed', success_status: 'passed'});
+    }
+}
+
+function setModuleState(id, data) {
+    var clone = $.extend(true, {}, window.savedState[id]);
+    window.savedState[id] = $.extend(true, {}, clone, data);
+    saveStatus();
+    setContents();
+}
+
+function saveStatus() {
+    if (!SCORM_LOCATION_INITED) {
+        return;
+    }
+    setSCORMLocation(window.savedState);
+    var completed = true;
+    var globalScore = 0;
+    var globalScoreItems = 0;
+    for (var k in DATA.modules) {
+        var m = DATA.modules[k];
+        var s = window.savedState[m.id];
+        if (m.mandatory && s.completion_status !== 'completed' && s.completion_status !== 'passed') {
+            completed = false;
+        }
+        var score = calcScore(s);
+        if (!isNaN(score) && score >= 0) {
+            globalScore += score;
+            globalScoreItems++;
+        }
+    }
+    var score100 = globalScore / globalScoreItems;
+    if (isNaN(score100)) {
+        score100 = -1;
+    }
+    if (score100 > 0) {
+        setScormValue('cmi.score.raw', score100);
+        setScormValue('cmi.score.scaled', score100 / 100);
+        setScormValue('cmi.score.min', 0);
+        setScormValue('cmi.score.max', 100);
+    }
+    if (!isNaN(score100) && score100 > 0) {
+        setScormValue('success_status', 'passed');
+    } else {
+        setScormValue('success_status', 'unknown');
+    }
+    setScormValue('status', completed ? 'completed' : 'incomplete');
+}
+
+function getModuleData(id) {
+    for (var k in DATA.modules) {
+        var m = DATA.modules[k];
+        if (m.id == id) {
+            return m;
+        }
+    }
+    return null;
+}
+
+function setContents() {
+    if (!SCORM_LOCATION_INITED) {
+        return;
+    }
+    var vcheck = getSpriteIcon('check-ok');
+    var xcheck = getSpriteIcon('check-nok');
+    var types = {IN: 'Infographic PDF', AN: 'Animation', VI: 'Video', FB: 'Fluidbook', PC: 'Podcast HTML', QZ: 'Quiz'};
+    $('header h1').text(DATA.title);
+    $('header p').text(DATA.description);
+    $('title').text(DATA.title);
+    $('tbody').html('');
+
+
+    $.each(DATA.modules, function (k, v) {
+        var s = window.savedState[v.id];
+        var lock = '';
+        var lockstatus = 'none';
+        var lockCol = '';
+        if (v.lock) {
+            console.log(v.lock);
+            lock = 'data-lock="';
+            lockstatus = 'unlocked';
+            lockCol = getSpriteIcon('lock-unlocked');
+            for (var i = 0; i < v.lock.length; i++) {
+                var ss = window.savedState[v.lock[i].toString()];
+                if (ss.completion_status !== 'completed' && ss.completion_status !== 'passed') {
+                    lockstatus = 'locked';
+                    lockCol = getSpriteIcon('lock-locked');
+                    break;
+                }
+            }
+            lock += lockstatus + '"';
+        }
+        var score = calcScore(s);
+        var tr = $('<tr ' + lock + ' data-type="' + v.type + '" data-id="' + v.id + '"><td class="i">' + getSpriteIcon('icon-' + v.type) + '</td></tr>');
+        $('tbody').append(tr);
+
+        var mandatory = (v.mandatory ? vcheck : xcheck);
+        var validated = (s.completion_status === 'completed' ? vcheck : xcheck);
+        var scoreCol = '<div class="scoreCont">' + (score < 0 ? '-' : score + ' %') + '</div>';
+
+        tr.append('<td class="t">' + v.title + '</td>');
+        tr.append('<td class="y d">' + types[v.type] + '</td>');
+        tr.append('<td class="c d">' + mandatory + '</td>');
+        tr.append('<td class="c d">' + validated + '</td>');
+        tr.append('<td class="score c d">' + scoreCol + '</td>');
+        tr.append('<td class="l">' + lockCol + '</td>');
+        $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Type</strong>' + types[v.type] + '</td><td></td></tr>');
+        $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Mandatory</strong>' + mandatory + '</td><td></td></tr>');
+        $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Validated</strong>' + validated + '</td><td></td></tr>');
+        $('tbody').append('<tr ' + lock + ' data-id="' + v.id + '" class="m"><td></td><td><strong>Score</strong>' + scoreCol + '</td><td></td></tr>');
+        $('tbody').append('<tr ' + lock + ' class="m"><td class="sp"></td></tr>');
+    });
+}
+
+function calcScore(s) {
+    if (s === undefined) {
+        return -1;
+    }
+    var raw = doubleQuestionMark(s.cmi['cmi.core.score.raw'], s.cmi['cmi.score.raw'], -1);
+    var max = doubleQuestionMark(s.cmi['cmi.core.score.max'], s.cmi['cmi.score.max'], 100);
+    var min = doubleQuestionMark(s.cmi['cmi.core.score.min'], s.cmi['cmi.score.min'], 0);
+
+    console.log(raw, max, min);
+    var scale = max - min;
+    var norm = raw - min;
+    if (isNaN(scale) || isNaN(norm)) {
+        return -1;
+    }
+    return 100 * (norm / scale);
+}
+
+function doubleQuestionMark() {
+    for (var i = 0; i < arguments.length; i++) {
+        if (arguments[i] === undefined || arguments[i] === null) {
+            continue;
+        }
+        return arguments[i];
+    }
+}
+
+(function (global) {
+    'use strict';
+    if (!global.console) {
+        global.console = {};
+    }
+    var con = global.console;
+    var prop, method;
+    var dummy = function () {
+    };
+    var properties = ['memory'];
+    var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
+        'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
+        'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
+    while (prop = properties.pop()) if (!con[prop]) con[prop] = {};
+    while (method = methods.pop()) if (typeof con[method] !== 'function') con[method] = dummy;
+    // Using `this` for web workers & supports Browserify / Webpack.
+})(typeof window === 'undefined' ? this : window);
+
+
+function initScormEvents() {
+    if (!SCORM_OK || SCORM_EVENTS_INITED) {
+        return;
+    }
+    SCORM_EVENTS_INITED = true;
+
+    $(window).on('unload', function () {
+        finishScorm();
+    });
+
+    setInterval(function () {
+        pipwerks.SCORM.save();
+    }, 5000);
+}
+
+function setSCORMLocation(location) {
+    return setScormValue('cmi.location', JSON.stringify(location));
+}
+
+function setSCORMScore(score, max, min) {
+    if (min === undefined) {
+        min = 0;
+    }
+
+    setScormValue('cmi.core.score.raw', score);
+    setScormValue('cmi.core.score.min', min);
+    setScormValue('cmi.core.score.max', max);
+}
+
+
+function getScormValue(elementName) {
+    if (!SCORM_OK) {
+        return null;
+    }
+    var cmi = _cmi(elementName);
+    if (cmi == '') {
+        return null;
+    }
+    var result = pipwerks.SCORM.get(cmi);
+    return result;
+}
+
+function setScormValue(elementName, value) {
+    if (!SCORM_OK) {
+        return;
+    }
+    var cmi = _cmi(elementName);
+    if (cmi == '') {
+        return false;
+    }
+    var result = pipwerks.SCORM.set(cmi, value);
+    return result;
+}
+
+function getSpriteIcon(icon, attrs, dimensions) {
+    var a = [];
+    var iconSymbol = $('svg symbol[id="' + icon + '"]');
+    if (iconSymbol.length > 1) {
+        $('svg symbol[id="' + icon + '"]:not(:last)').remove();
+        iconSymbol = $('svg symbol[id="' + icon + '"]');
+    }
+
+    if (iconSymbol.length == 0) {
+        //console.warn('Unable to find sprite icon: ' + icon);
+        return ''; // Bail out because symbol doesn't exist
+    }
+
+    if (attrs == undefined) {
+        attrs = {};
+    }
+    if (attrs.viewBox == null) {
+        attrs.viewBox = iconSymbol.get(0).attributes.viewBox.value;
+    }
+    if (dimensions === true) {
+        var vb = attrs.viewBox.split(' ');
+        attrs.x = vb[0];
+        attrs.y = vb[1];
+        attrs.width = vb[2];
+        attrs.height = vb[3];
+    }
+    if (attrs.class == null) {
+        attrs.class = icon;
+    } else {
+        attrs.class += ' ' + icon;
+    }
+
+    attrs.class += ' nav-icon svg-icon'; // Common class for all icons
+
+    $.each(attrs, function (k, v) {
+        a.push(k + '="' + v + '"');
+    });
+    return '<svg ' + a.join(' ') + ' aria-hidden="true"><use xlink:href="#' + icon + '" /></svg>';
+}
+
+
+function setSessionTime() {
+    if (!SCORM_OK) {
+        return;
+    }
+    var currentTime = new Date();
+    var sessionTime;
+
+    var endTime = currentTime.getTime()
+    var calculatedTime = endTime - SCORM_START_TIME;
+
+    if (pipwerks.SCORM.version == '1.2') {
+        var totalHours = Math.floor(calculatedTime / 1000 / 60 / 60);
+        calculatedTime = calculatedTime - totalHours * 1000 * 60 * 60
+        if (totalHours < 1000 && totalHours > 99) {
+            totalHours = "0" + totalHours;
+        } else if (totalHours < 100 && totalHours > 9) {
+            totalHours = "00" + totalHours;
+        } else if (totalHours < 10) {
+            totalHours = "000" + totalHours;
+        }
+
+        var totalMinutes = Math.floor(calculatedTime / 1000 / 60);
+        calculatedTime = calculatedTime - totalMinutes * 1000 * 60;
+        if (totalMinutes < 10) {
+            totalMinutes = "0" + totalMinutes;
+        }
+
+        var totalSeconds = Math.floor(calculatedTime / 1000);
+        if (totalSeconds < 10) {
+            totalSeconds = "0" + totalSeconds;
+        }
+        sessionTime = totalHours + ":" + totalMinutes + ":" + totalSeconds;
+        setScormValue('session_time', sessionTime);
+    } else {
+        setScormValue('session_time', scormSecondsToTimeInterval(calculatedTime / 1000));
+    }
+
+}
+
+function dateToScormTime(date) {
+    var res = date.toISOString();
+    var e = res.split('.');
+    e.pop();
+    return e.join('.');
+}
+
+function getScormTimeInterval(start, end) {
+    var diff = Math.round((end.getTime() - start.getTime()) / 1000);
+    return scormSecondsToTimeInterval(diff);
+}
+
+function scormSecondsToTimeInterval(diff) {
+    var diff = Math.round(diff);
+    var h = Math.floor(diff / 3600);
+    diff = diff % 3600;
+    var m = Math.floor(diff / 60);
+    var s = diff % 60;
+    return 'PT' + h + 'H' + m + 'M' + s + 'S';
+}
+
+function SCORMFacade() {
+}
+
+SCORMFacade.prototype = {
+    LMSInitialize: function () {
+        return this.Initialize();
+    },
+    Initialize: function () {
+        this._log('Init');
+        return true;
+    },
+    LMSFinish: function () {
+        return this.Terminate();
+    },
+    Terminate: function () {
+        this._log('Terminate');
+        closeSubSCO();
+        return true;
+    },
+    LMSGetValue: function (key) {
+        return this.GetValue(key);
+    },
+    GetValue: function (key) {
+        var d = savedState[currentModule.id];
+        var res;
+        if (key === 'cmi.core.lesson_status' || key === 'cmi.completion_status') {
+            res = d.completion_status;
+        } else if (key === 'cmi.location' || key === 'cmi.core.lesson_location') {
+            if (typeof d.location === 'string' || typeof d.location === 'number') {
+                res = d.location;
+            } else {
+                res = JSON.stringify(d.location);
+            }
+        } else if (key === 'cmi.success_status') {
+            res = d.success_status;
+        } else {
+            res = d.cmi[key] === null ? '' : d.cmi[key];
+        }
+        this._log('Get value ' + key + ' :: ' + res);
+        return res;
+    },
+    LMSSetValue: function (key, value) {
+        return this.SetValue(key, value);
+    },
+    SetValue: function (key, value) {
+        this._log('Set value ' + key + ' :: ' + value);
+        var data = {cmi: {}};
+        if (key === 'cmi.core.lesson_status' || key === 'cmi.completion_status') {
+            key = 'completion_status';
+            data[key] = value;
+        } else if (key === 'cmi.location' || key === 'cmi.core.lesson_location') {
+            key = 'location';
+            data[key] = value;
+        } else if (key === 'cmi.success_status') {
+            key = 'success_status';
+            data[key] = value;
+        } else {
+            data.cmi[key] = value;
+        }
+
+        setModuleState(currentModule.id, data);
+        return true;
+    },
+    LMSCommit: function (d) {
+        return this.Commit(d);
+    },
+    Commit: function (d) {
+        return true;
+    },
+    LMSGetLastError: function () {
+        return this.GetLastError();
+    },
+    GetLastError: function () {
+        return 0;
+    },
+    LMSGetErrorString: function (code) {
+        return this.GetErrorString(code);
+    },
+    GetErrorString: function (code) {
+        return '';
+    },
+    LMSGetDiagnostic: function (code) {
+        return this.GetDiagnostic(code);
+    },
+    GetDiagnostic: function (code) {
+        return '';
+    },
+    _log: function (log) {
+        console.log('SCORM facade : ' + log);
+    },
+};
diff --git a/resources/elearningpackage/js/bootstrap.js b/resources/elearningpackage/js/bootstrap.js
new file mode 100644
index 000000000..836e4b909
--- /dev/null
+++ b/resources/elearningpackage/js/bootstrap.js
@@ -0,0 +1,12 @@
+window._ = require('lodash');
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+window.axios = require('axios');
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.$ = window.jQuery = require('jquery');
+
diff --git a/resources/elearningpackage/sass/app.sass b/resources/elearningpackage/sass/app.sass
new file mode 100644
index 000000000..2ab9cb298
--- /dev/null
+++ b/resources/elearningpackage/sass/app.sass
@@ -0,0 +1,342 @@
+$colors: (IN: #47484e, VI: #d0167c, Ti5: #d0167c, AN: #84156f, FB: #f8971d, PD: #00a0af, QZ: #00abeb, FC: #00abeb)
+
+@mixin media-mob
+    @media screen and (max-width: 1024px)
+        @content
+
+
+body, html
+    min-height: 100%
+
+body
+    overflow-x: hidden
+
+*
+    padding: 0
+    margin: 0
+    box-sizing: border-box
+    font-family: 'Open Sans', Arial, Helvetica, sans-serif
+
+
+[data-id]
+    cursor: pointer
+
+#z
+    transform-origin: 0 0
+
+header
+    position: relative
+
+    @include media-mob()
+        text-align: center
+        height: auto
+        min-height: 200px
+        margin-bottom: 30px
+
+    #logo
+        position: absolute
+        top: 20px
+        right: 0
+        color: #f0f0f0
+
+        @include media-mob()
+            right: auto
+            top: auto
+            position: static
+            margin: 20px auto
+
+        svg
+            height: 50px
+
+    #tile
+        position: absolute
+        top: -5px
+        left: -100px
+
+        @include media-mob()
+            position: absolute
+            left: 50%
+            top: 0
+            z-index: -1
+
+        svg
+            @include media-mob()
+                position: relative
+                top: -40px
+                left: -300px
+            height: 200px
+            color: #f0f0f0
+
+    #contents
+        padding-top: 110px
+        padding-left: 40px
+        position: relative
+        z-index: 1
+
+        @include media-mob()
+            padding: 0
+
+        h1
+            @include media-mob()
+                text-align: center
+
+        p
+            margin: 30px 0
+            padding: 0 20px 0 0
+            @include media-mob()
+                text-align: left
+                padding: 0
+
+
+#scowin
+    position: fixed
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    z-index: 100
+    display: none
+    opacity: 0
+    transition: 500ms opacity
+    background-color: #fff
+
+    @each $type, $color in $colors
+        &[data-type=#{$type}]
+            #scobar
+                background-color: $color
+
+    &.show
+        opacity: 1
+        display: block
+        transition: 500ms opacity
+
+
+    #scobar
+        position: absolute
+        top: 0
+        left: 0
+        width: 100%
+        height: 30px
+        color: #fff
+
+        @include media-mob()
+            height: 60px
+
+        a.close
+            position: absolute
+            top: 5px
+            right: 5px
+
+            svg
+                width: 20px
+                height: 20px
+                color: #fff
+
+                @include media-mob()
+                    width: 30px
+                    height: 30px
+
+        #scoicon
+            position: absolute
+            top: 4px
+            left: 2px
+            height: 26px
+            width: 26px
+
+            @include media-mob()
+                top: 6px
+                width: 36px
+                height: 36px
+
+
+        h2
+            margin-left: 40px
+            font-size: 18px
+            margin-top: 3px
+            font-weight: 400
+            @include media-mob()
+                margin-left: 50px
+                font-size: 26px
+                margin-top: 2px
+
+    #sco
+        position: absolute
+        width: 100%
+        height: calc(100% - 30px)
+        top: 30px
+        left: 0
+        background-color: #000
+
+        @include media-mob()
+            height: calc(100% - 40px)
+            top: 40px
+
+#wrapper
+    width: 1024px
+    margin: 0 auto
+    @include media-mob()
+        padding: 0 30px
+        min-width: 480px
+        width: 100%
+
+    main
+        table
+            border-collapse: collapse
+            width: 100%
+
+
+            thead
+                @include media-mob()
+                    display: none
+
+            th, td
+                padding: 5px 10px
+                text-align: left
+
+                &.t
+                    border-bottom: 1px solid #f0f0f0
+
+                &.y
+                    padding-left: 30px
+
+                &.c
+                    text-align: center
+
+            tbody
+                tr
+                    &.m
+                        display: none
+
+                        @include media-mob()
+                            display: table-row
+
+                            td
+                                height: 40px
+                                vertical-align: middle
+
+                            strong
+                                display: inline-block
+                                width: 50%
+
+                            svg
+                                height: 20px
+
+
+                    &[data-lock="locked"]
+                        &:hover
+                            td.t
+                                background-color: #fff
+
+                        td
+                            opacity: 0.25
+                            cursor: not-allowed
+
+                    @each $type, $color in $colors
+                        &[data-type=#{$type}]
+                            td.t
+                                border-left-color: $color
+
+                            td.i
+                                svg
+                                    color: $color
+
+                    &:hover
+                        td.t
+                            background-color: #e6e6e6
+
+                td
+                    &.sp
+                        height: 30px
+
+                    &.t, &.l
+                        @include media-mob()
+                            border-bottom: 1px solid #f0f0f0
+                            border-top: 1px solid #f0f0f0
+                            &:hover
+                                background-color: #fff
+
+                    &.d
+                        @include media-mob()
+                            display: none
+
+                    &.l
+                        width: 0
+
+                    &.i
+                        width: 60px
+
+                        svg
+                            position: relative
+                            left: 10px
+                            top: 4px
+
+                    &.t
+                        text-align: center
+                        font-weight: 600
+                        font-size: 125%
+                        padding-left: 50px
+                        padding-right: 50px
+                        border-bottom: 1px solid #f0f0f0
+                        border-left: 10px solid #000000
+
+                    .scoreCont
+                        display: inline-block
+                        white-space: nowrap
+                        width: 70px
+                        padding: 5px
+                        margin: 0 auto
+                        background-color: #e4ff19
+                        font-weight: 600
+                        text-align: center
+
+
+                    svg
+                        height: 30px
+
+/* open-sans-300 - latin */
+@font-face
+    font-family: 'Open Sans'
+    font-style: normal
+    font-weight: 300
+    src: url('open-sans-v27-latin-300.woff2') format('woff2')
+
+
+/* open-sans-regular - latin */
+@font-face
+    font-family: 'Open Sans'
+    font-style: normal
+    font-weight: 400
+    src: url('open-sans-v27-latin-regular.woff2') format('woff2')
+
+
+/* open-sans-500 - latin */
+@font-face
+    font-family: 'Open Sans'
+    font-style: normal
+    font-weight: 500
+    src: url('open-sans-v27-latin-500.woff2') format('woff2')
+
+
+/* open-sans-600 - latin */
+@font-face
+    font-family: 'Open Sans'
+    font-style: normal
+    font-weight: 600
+    src: url('open-sans-v27-latin-600.woff2') format('woff2')
+
+
+/* open-sans-700 - latin */
+@font-face
+    font-family: 'Open Sans'
+    font-style: normal
+    font-weight: 700
+    src: url('open-sans-v27-latin-700.woff2') format('woff2')
+
+
+/* open-sans-800 - latin */
+@font-face
+    font-family: 'Open Sans'
+    font-style: normal
+    font-weight: 800
+    src: url('open-sans-v27-latin-800.woff2') format('woff2')
+
diff --git a/resources/elearningpackage/sass/open-sans-v27-latin-300.woff2 b/resources/elearningpackage/sass/open-sans-v27-latin-300.woff2
new file mode 100644
index 000000000..b7c278af5
Binary files /dev/null and b/resources/elearningpackage/sass/open-sans-v27-latin-300.woff2 differ
diff --git a/resources/elearningpackage/sass/open-sans-v27-latin-500.woff2 b/resources/elearningpackage/sass/open-sans-v27-latin-500.woff2
new file mode 100644
index 000000000..3cd29e1f6
Binary files /dev/null and b/resources/elearningpackage/sass/open-sans-v27-latin-500.woff2 differ
diff --git a/resources/elearningpackage/sass/open-sans-v27-latin-600.woff2 b/resources/elearningpackage/sass/open-sans-v27-latin-600.woff2
new file mode 100644
index 000000000..d3eaed36d
Binary files /dev/null and b/resources/elearningpackage/sass/open-sans-v27-latin-600.woff2 differ
diff --git a/resources/elearningpackage/sass/open-sans-v27-latin-700.woff2 b/resources/elearningpackage/sass/open-sans-v27-latin-700.woff2
new file mode 100644
index 000000000..e86607039
Binary files /dev/null and b/resources/elearningpackage/sass/open-sans-v27-latin-700.woff2 differ
diff --git a/resources/elearningpackage/sass/open-sans-v27-latin-800.woff2 b/resources/elearningpackage/sass/open-sans-v27-latin-800.woff2
new file mode 100644
index 000000000..18069434e
Binary files /dev/null and b/resources/elearningpackage/sass/open-sans-v27-latin-800.woff2 differ
diff --git a/resources/elearningpackage/sass/open-sans-v27-latin-regular.woff2 b/resources/elearningpackage/sass/open-sans-v27-latin-regular.woff2
new file mode 100644
index 000000000..6354811d5
Binary files /dev/null and b/resources/elearningpackage/sass/open-sans-v27-latin-regular.woff2 differ
diff --git a/webpack.mix.js b/webpack.mix.js
index f5bd7cb8c..0c245c8f5 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -16,3 +16,6 @@ mix.js('resources/js/app.js', 'public/js')
 
 mix.setPublicPath('resources/elearningmedia/dist').js('resources/elearningmedia/js/app.js','js')
     .sass('resources/elearningmedia/sass/app.sass','css');
+
+mix.setPublicPath('resources/elearningpackage/dist').js('resources/elearningpackage/js/app.js','js')
+    .sass('resources/elearningpackage/sass/app.sass','css');