fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.2

package/src/components/AppBaseModule.vue

@@ -1,12 +1,17 @@
 <!--
  *@ Description: This component is used as main container to display application and containt to display
  *@ What it does: The component fetch the data for the page to display on navigation.
- *                controle and scorm & xAPI logic and communication
+ *
  *@Note :Must be used
 -->
 
 <template>
   <div fluid class="module">
+    <div
+      id="page_info_section"
+      aria-labelledby="page_info"
+      aria-live="true"
+    ></div>
     <a class="skip-link" href="" @click.prevent="skipToMain">
       {{ $t('message.skip_content') }}
     </a>
@@ -23,17 +28,10 @@
       <!------------------------ Nav for FullMode ---------------->
 
       <app-comp-navigation
-        :app-status="isReady"
+        :app-status="appReady"
         :auto-navigate="theNavigationBetweenActivity"
       />
     </b-navbar>
-
-    <portal-target
-      v-show="$store.state.$appStore.isDr"
-      id="DR_anchors_progress_wrapper"
-      name="DR_anchors_progress"
-    ></portal-target>
-
     <base-module :m-data="$data">
       <b-container
         id="wrapper-content"
@@ -41,21 +39,11 @@
         :class="{ active: moduleConfig.videoFull }"
         class="scroll-bar"
       >
-        <div
-          v-show="!appReady"
-          id="Loading"
-          key="Loading"
-          :class="{ fadeIn: !appReady && changePage }"
-        >
-          <!-- App ready: {{ appReady }} -->
-          <div class="overlay" />
-          <div class="box-loading-anime disableBlur">
-            <img src="../assets/img/BeanEater-1s-200px.svg" alt="loading" />
-          </div>
-        </div>
         <div class="box">
-          <router-view v-show="appReady" ref="main" :key="$route.fullPath" />
+          <router-view ref="main" :key="$route.fullPath" />
+          <!-- <router-view v-show="appReady" ref="main" :key="$route.fullPath" /> -->
         </div>
+
         <portal-target
           id="primary_nav_wrapper"
           name="primary_nav"
@@ -64,43 +52,9 @@
     </base-module>
 
     <!------------------POPUP QUICK -------------------------->
-    <app-comp-pop-up v-slot:content />
+    <app-comp-pop-up #content />
     <!------------------END USE POP UP-------------------------->
-    <!------------------Settings Splash-screeen----------------------------->
-    <!-- <b-modal
-      id="splashscreen"
-      ref="splashscreen"
-      :title="$t('label.splashscreen')"
-      size="lg"
-      ok-only
-      no-stacking
-      :ok-title="$t('user_settings.close')"
-      :header-close-label="$t('button.closePopUp')"
-    >
-      <span>
-        {{ $t('message.splash_welcome') }}
-      </span>
-      <b-form-group
-        id="splash-form"
-        v-slot="{ ariaDescribedby }"
-        :label="$t('user_settings.title')"
-      >
-        <b-form-checkbox
-          v-for="(setting, index) in Object.entries(settingsSelected)"
-          :key="index"
-          v-model="settingsSelected[setting[0]]"
-          :aria-describedby="ariaDescribedby"
-          switch
-          stacked
-          size="lg"
-          :name="`parameter-${setting[0]}`"
-          :text-field="$t(`user_settings.${setting[0]}`)"
-        >
-          <span>{{ $t(`user_settings.${setting[0]}`) }}</span>
-        </b-form-checkbox>
-      </b-form-group>
-    </b-modal> -->
-    <!------------------END Settings splash-screen-------------------------->
+
     <!--------------RIGHT SIDEBAR (for display of extra contents)------------>
 
     <b-sidebar
@@ -108,12 +62,22 @@
       id="right-sidebar"
       ref="right-sidebar"
       :key="dynamicSidebarContent._id"
+      :sidebar-class="{
+        'v-media': dynamicSidebarContent._context === 'ctxTranscript'
+      }"
       v-bind="dynamicSidebarContent._props"
       :visible="rightSidebarVisible"
       :aria-label="dynamicSidebarContent._label"
-      @hidden="closeSidebar(dynamicSidebarContent._context)"
+      @hidden="
+        closeSidebar(
+          dynamicSidebarContent._context,
+          dynamicSidebarContent._container
+            ? dynamicSidebarContent._container
+            : null
+        )
+      "
     >
-      <template #header="{hide}">
+      <template #header="{ hide }">
         <button @click="hide">
           <svg width="32" height="32">
             <use href="#close-square-icon" fill="red" />
@@ -129,6 +93,7 @@
         >
           <component
             :is="dynamicSidebarContent._component"
+            class="v-media"
             v-bind="{ ...dynamicSidebarContent._comProps }"
           />
         </transition>
@@ -154,12 +119,7 @@ export default {
       type: Object,
       default: () => {
         return {
-          id: 'mod_001',
-          title: null, // edit to set the title of the lesson
-          description: null,
-          introActive: false, // Controle use INTODUCTION page in the Lesson. set to false if there is no introduction
-          concluActive: false, // Controle use CONCLUSION page in the Lesson. set to false if there is no conclusion
-          allowNavigationToActivity: false, // set Previous/Next can allow navigation between activities. Set to  false if do not want navigation between activities with Previous/Next,É
+          allowNavigationToActivity: false, // set Previous/Next can allow navigation between activities. Set to  false if do not want navigation between activities with Previous/Next
           main: ''
         }
       }
@@ -171,7 +131,6 @@ export default {
       videoFull: null,
       routeData: [],
       changePage: false,
-      appReady: false,
       randKey: Math.floor(Math.random() * 10001),
       popupIsOpen: null,
       hidePlayBar: false, // Controle visibility of the play bar. set to true to hide play bar
@@ -190,8 +149,11 @@ export default {
       infocusTabIndex: null,
       transcriptVisible: false,
       transcriptContent: null,
+      transcriptContainer: null,
       branchingVisible: false,
-      mediaToShow: null
+      // mediaToShow: null,
+      lessonCompletionStatus: false,
+      checkedDataFromServer: 0
     }
   },
   computed: {
@@ -208,37 +170,36 @@ export default {
       'getConnectionInfo',
       'hasMediaElOrTimeline',
       'getModuleChildren',
-      'getAllActivities',
       'getPageData',
       'getMenuSettings',
       'getCurrentSection',
       'getRouteHistory',
       'getOnboardingEnabled',
-      'getApplicationSettings'
+      'getApplicationSettings',
+      'getDataFromServer',
+      'getSkipMenu' //Must Check This LINE WITH CYNTHIA
     ]),
     isMenu() {
       return this.$route.name === 'menu'
     },
-    isReady() {
-      let readyState
-      if (this.getAppStatus === 'loading') readyState = false
-      else if (this.getAppStatus === 'ready') readyState = true
-      return readyState
+    appReady() {
+      return this.getAppStatus === 'ready' ? true : false
     },
 
     hasMedia() {
       return typeof this.hasMediaElOrTimeline === 'object'
     },
+    activityHasChanged() {
+      const rd = this.routeData.toReversed()
 
-    displayLang() {
-      let lang = false
-      const displayList = ['en-US', 'fr-FR', 'es-ES'] // list of xapi verbs language display
-
-      if (this.getModuleInfo.packageType === 'xapi') {
-        lang = displayList.find((l) => l.includes(this.$i18n.locale))
-      }
-      return lang
+      if (
+        rd.length <= 1 ||
+        rd[1].activity_ref !== this.$route.meta.activity_ref
+      )
+        return true
+      else return false
     },
+
     /**
      * @description Set the id the module
      */
@@ -285,7 +246,6 @@ export default {
      */
     theNavigationBetweenActivity() {
       let navBwteenActivity = false
-
       if (this.moduleConfig.allowNavigationToActivity)
         navBwteenActivity = this.moduleConfig.allowNavigationToActivity
       return navBwteenActivity
@@ -319,8 +279,8 @@ export default {
       if (this.transcriptVisible) {
         _label =
           this.$i18n.locale === 'fr'
-            ? 'contenu de la transciption'
-            : 'content of the transcript'
+            ? 'Contenu de la transcription'
+            : 'Content of the transcript'
 
         sidebarSettings = {
           _props: {
@@ -332,8 +292,11 @@ export default {
             no_close_on_backdrop: false
           },
           _component: AppCompTranscript,
-          _comProps: { content: this.transcriptContent },
+          _comProps: {
+            content: this.transcriptContent
+          },
           _context: 'ctxTranscript',
+          _container: this.transcriptContainer,
           _label,
           _id: 'transcript'
         }
@@ -380,7 +343,7 @@ export default {
     },
     $route: {
       handler() {
-        this.mediaToShow = this.formateData(this.getCurrentPage)
+        //this.mediaToShow = this.formateData(this.getCurrentPage)
         this.getFocusables().then((r) => {
           //Pressing Tab or Shit + tab should make it possible to cycle focus through them
           if (!r) return
@@ -391,121 +354,44 @@ export default {
         //update the routeChangeCounter when navigation
         if (this.routeChangeCounter < 3) this.routeChangeCounter += 1
 
-        /* send xapi statement only when there is a change of activity:
-           Activity has changed when the type of the route is one of the following or the activity__ref or previous route is different of activity_ref of current route
+        /*
+         *Start Timer on New activities
          */
-        const trackedRouteType = ['menu', 'introduction', 'activity']
-
-        if (
-          trackedRouteType.includes(this.$route.meta.type) &&
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote
-        ) {
-          const stmt = {
-            id: `${this.$route.name.split('.')[0]}`,
-            description: `${this.$route.name.split('.')[0]} de ${
-              this.getModuleInfo.id
-            }`,
-            definition: `${this.$route.name.split('.')[0]} de ${
-              this.getModuleInfo.id
-            }`
-          }
+
+        const trackedRouteType = ['introduction', 'conclusion', 'normal']
+        if (trackedRouteType.includes(this.$route.meta.type)) {
+          if (this.$route.name.includes('.')) return
 
           //Start the timer every time that there is a new activity
-          if (
-            this.$route.meta.type === 'activity' ||
-            this.$route.meta.type === 'introduction'
-          ) {
-            if (this.timerState === 'started') this.stopTimer('activity') // reset the activity timer
-            this.startTimer('activity')
-          }
+          if (this.timerState === 'started') this.stopTimer('activity') // reset the activity timer
+          this.startTimer('activity')
 
-          this.sendXapiStatement(stmt)
+          //Send statement when activity as changed
+          if (this.activityHasChanged)
+            this.sendStartStatement({ id: this.$route.meta.activity_ref })
         }
         this.transcriptVisible = false
       },
       immediate: true
     },
-    /**
-     * @description Defined in Store
-     */
-    getAppStatus(newValue) {
-      if (newValue === 'ready') {
-        this.appReady = true
-      } else {
-        this.appReady = false
-      }
-    },
+
     /**
      * @description Defined in Store Watch all completed activities to send a lesson completion statement
      */
     getAllCompleted: {
       handler() {
-        if (
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote
-        ) {
-          //======================================================
-          let completedSize = 0
-          Object.entries(this.getAllCompleted).forEach((value) => {
-            completedSize = completedSize + value[1].length
-          })
-          const completedState = this.$xapi._getLessonStatus(
-            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-            this.getConnectionInfo.activity_id
-          )
-
-          if (
-            completedSize === this.getAllActivities.pageSize &&
-            !completedState.completion
-          ) {
-            let text
-            //Defining the text to display for stmt description and definition
-            switch (this.$i18n.locale) {
-              case 'fr':
-                if (this.getModuleInfo.courseID)
-                  text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
-                else text = `Le ${this.getModuleInfo.id}`
-                break
-              case 'en':
-                if (this.getModuleInfo.courseID)
-                  text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
-                else text = `The ${this.getModuleInfo.id}`
-                break
-            }
-
-            // Retrive only user data in lessons front its interaction that we want to send to the LRS.
-            // Note: User Settings are sent on a different URI and statement
-            const {
-              isFistTime,
-              userSettings,
-              ...lessonsData
-            } = this.getUserInteraction
-
-            this.sendXapiStatement({
-              verb: 'completed',
-              definition: text,
-              description: text,
-              extension: [
-                {
-                  id: 'user-data',
-                  content: {
-                    routeHistory: this.getRouteHistory,
-                    ...lessonsData
-                  }
-                }
-              ],
-              duration: this.lessonDuration,
-              completion: true
-            })
-          }
+        // Check once the server to set the completion status of the lesson
+        if (this.getDataFromServer && this.checkedDataFromServer < 1) {
+          const { completedState } = this.getDataFromServer
+
+          this.lessonCompletionStatus =
+            !completedState || !completedState.completion
+              ? false
+              : completedState.completion
+          this.checkedDataFromServer += 1
         }
 
-        //================================================================
+        if (!this.lessonCompletionStatus) this.sendCompletionStatus('LESSON')
       },
       immediate: true
     },
@@ -516,17 +402,17 @@ export default {
       if (this.timerState !== 'started') return
       //send a statement every x time (second)
       if (
-        (this.timerState === 'started',
-        this.elapsedTime % 30 === 0 &&
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote)
+        this.timerState === 'started' &&
+        this.elapsedTime % 500 === 0 &&
+        this.getModuleInfo.packageType === 'xapi' &&
+        this.getConnectionInfo &&
+        this.getConnectionInfo.actor &&
+        this.getConnectionInfo.remote &&
+        this.getDataFromServer
       ) {
-        const lastReached = this.$xapi._getLessonPosition(
-          this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-          this.getConnectionInfo.activity_id
-        )[0]
+        const { lessonPosition } = this.getDataFromServer
+
+        const lastReached = lessonPosition.length ? lessonPosition[0] : ''
 
         //only Send savepoint statement when 3 navigation happen and the route is different from last saved
         if (this.routeChangeCounter >= 3 && lastReached !== this.$route.name) {
@@ -550,7 +436,7 @@ export default {
             verb: 'progressed',
             definition: text,
             description: text,
-            extension: [
+            extensions: [
               {
                 id: 'ending-point',
                 content: this.$route.name
@@ -559,48 +445,44 @@ export default {
             duration: this.lessonDuration
           }
 
-          this.sendXapiStatement(stmt)
+          this.$bus.$emit('send-xapi-statement', stmt)
           this.routeChangeCounter = 0 //reset counter after saving
         }
       }
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     //Communication events
-    this.$bus.$off('open-popup')
-
-    this.$bus.$off('close-popup')
-
-    this.$bus.$off('start-onboarding')
-
-    this.$bus.$off('open-branch')
-
-    this.$bus.$off('update-page')
-
-    this.$bus.$off('videoFullScreen')
-
-    this.$bus.$off('save-to-scorm')
-
-    this.$bus.$off('send-xapi-statement')
-
-    this.$bus.$off('launch-xapi-resource')
-
-    this.$bus.$off('fire-exit-event', this.endLesson)
-
+    this.$bus.$off('close-sidebar', this.closeSidebar)
+    this.$bus.$off('open-sidebar', this.openSidebar)
+    this.$bus.$off('open-popup', this.openPopup)
+    this.$bus.$off('close-popup', this.closePopup)
+    this.$bus.$off('start-onboarding', this.startOnboarding)
+    this.$bus.$off('videoFullScreen', this.onVideoFullScreen)
+    this.$bus.$off('save-to-scorm', this.saveToScorm)
+    this.$bus.$off('launch-xapi-resource', this.launchResource)
     this.$bus.$off('update-route-history', this.updateRouteHistory)
-
     this.$bus.$off('update-content', this.updateContent)
-
     this.$bus.$off('show-transcript', this.openTranscript)
-
+    this.$bus.$off('send-completion-event', this.sendCompletionStatus)
+    this.$bus.$off('send-starting-event', this.sendStartStatement)
+    //nav mouseleave event
+    let nav = document.getElementById('navTool')
+    if (nav) {
+      nav.removeEventListener('mouseleave', this.onNavMouseleave)
+    }
+    //sidebar scroll event
+    const rightSidebar = this.getRightSidebar()
+    if (rightSidebar) {
+      rightSidebar.removeEventListener('scroll', this.handleRightSidebarScroll)
+    }
+    //keayboard listener
     document.removeEventListener('keydown', this.handleKeyboardControls)
   },
   created() {
-    //TODO: get course name from app settings
-    // Correct animation slide off when transcript off
-    // correct toggle view hide branching content
     let lessonLabel, lessonNumber, lessonTitle, titleString
-    this.mediaToShow = this.formateData(this.getCurrentPage)
+
+    //this.mediaToShow = this.formateData(this.getCurrentPage)
     lessonLabel = this.$t('text.lesson')
     lessonNumber = this.moduleConfig.id.replace('module_', '')
     lessonTitle = this.theTitle
@@ -618,50 +500,27 @@ export default {
     this.$store.commit('UPDATE_INTRO_STATE', this.theIntroIsActivated)
 
     //Communication events
-    this.$bus.$on('open-popup', (data) => {
-      this.openPopup(data)
-    })
-
-    this.$bus.$on('close-popup', () => {
-      this.closePopup()
-    })
+    this.$bus.$on('open-popup', this.openPopup)
 
-    this.$bus.$on('start-onboarding', (data) => {
-      this.startOnboarding(data)
-    })
+    this.$bus.$on('close-popup', this.closePopup)
 
-    this.$bus.$on('open-sidebar', (data) => {
-      this.openSidebar(data)
-    })
-
-    this.$bus.$on('close-sidebar', (data) => {
-      this.closeSidebar(data)
-    })
+    this.$bus.$on('start-onboarding', this.startOnboarding)
 
-    this.$bus.$on('videoFullScreen', (value) => {
-      this.videoFull = value
-    })
+    this.$bus.$on('open-sidebar', this.openSidebar)
 
-    this.$bus.$on('save-to-scorm', () => {
-      this.saveToScorm()
-    })
+    this.$bus.$on('close-sidebar', this.closeSidebar)
 
-    this.$bus.$on(
-      'send-xapi-statement',
-      (statement, cb = null, option = false) => {
-        this.sendXapiStatement(statement, cb, option)
-      }
-    )
+    this.$bus.$on('videoFullScreen', this.onVideoFullScreen)
 
-    this.$bus.$on('launch-xapi-resource', (res) => {
-      this.launchResource(res)
-    })
+    this.$bus.$on('save-to-scorm', this.saveToScorm)
 
-    this.$bus.$on('fire-exit-event', this.endLesson)
+    this.$bus.$on('launch-xapi-resource', this.launchResource)
 
     this.$bus.$on('update-route-history', this.updateRouteHistory)
     this.$bus.$on('update-content', this.updateContent)
     this.$bus.$on('show-transcript', this.openTranscript)
+    this.$bus.$on('send-completion-event', this.sendCompletionStatus)
+    this.$bus.$on('send-starting-event', this.sendStartStatement)
 
     this.initLesson()
 
@@ -681,7 +540,12 @@ export default {
 
     let nav = document.getElementById('navTool')
 
-    nav.addEventListener('mouseleave', () => {
+    nav.addEventListener('mouseleave', this.onNavMouseleave)
+
+    document.addEventListener('keydown', this.handleKeyboardControls)
+  },
+  methods: {
+    onNavMouseleave() {
       let widgetOpen = document.getElementsByClassName('open')
 
       if (widgetOpen.length == 0) {
@@ -691,15 +555,14 @@ export default {
       } else {
         this.closeDelay = true
       }
-    })
-
-    document.addEventListener('keydown', this.handleKeyboardControls)
-  },
-  methods: {
+    },
+    onVideoFullScreen(value) {
+      this.videoFull = value
+    },
     /* Get All Element related to the media  return a list of all DOM element*/
     async getFocusables() {
-      return new Promise(function(resolve, reject) {
-        setTimeout(function() {
+      return new Promise(function (resolve, reject) {
+        setTimeout(function () {
           const getAllFocusables = () => {
             const listItems = document.querySelectorAll('.v-media')
             if (!listItems || !listItems.length) return null
@@ -716,17 +579,16 @@ export default {
      *
      */
     async handleKeyboardControls(evt) {
-      let { key } = evt
+      let { code } = evt
 
-      if (key === 'Escape' && this.rightSidebarVisible)
+      if (code === 'Escape' && this.rightSidebarVisible)
         return (this.rightSidebarVisible = false)
 
       //==========================================
-      const videoRange = await this.getFocusables()
+      /*const videoRange = await this.getFocusables()
       if (videoRange && videoRange.indexOf(document.activeElement) === -1)
         return
-
-      this.$bus.$emit('play-media', key)
+      this.$bus.$emit('play-media', code)*/
     },
 
     /**
@@ -737,13 +599,13 @@ export default {
      */
     openSidebar(obj) {
       if (!obj || !obj.ctx || !obj.e) return
-
+      const wrapper = obj.w ? obj.w : null
       this.lastInFocus = document.activeElement
       const { ctx, e: content } = obj
 
       switch (ctx) {
         case 'ctxTranscript':
-          this.openTranscript(content)
+          this.openTranscript(content, wrapper)
           break
 
         case 'ctxBranching':
@@ -771,14 +633,14 @@ export default {
      * @param {String}  ctx - context in which side bar was opened and will now be closed
      *
      */
-    closeSidebar(ctx) {
+    closeSidebar(ctx, wrapper = null) {
       //delay animation
       this.rightSidebarVisible = false // this will allow to run the animation of sidebar closing 1rst
 
       this.resetFocus(this.lastInFocus)
       switch (ctx) {
         case 'ctxTranscript':
-          this.closeTranscript()
+          this.closeTranscript(wrapper)
           break
 
         case 'ctxBranching':
@@ -835,9 +697,17 @@ export default {
      * @param {Object} c content to display in the sidebar
      */
 
-    openTranscript(c) {
+    openTranscript(c, container) {
       if (!c) return (this.transcriptVisible = false)
-      if (this.transcriptContent == null) this.transcriptContent = c
+      //Changer le contenu du transcript
+      if (this.transcriptContent !== c) this.transcriptContent = c
+      //Changer le format du Container du media
+      if (this.transcriptContainer && this.transcriptContainer !== container) {
+        /*console.log('transcriptContainer est différent de container')
+        console.log({ ancien: this.transcriptContainer, nouveau: container })
+        console.log('agrandir ancien container et réduire nouveau container')*/
+      }
+      this.transcriptContainer = container
       this.transcriptVisible = true
     },
     /**
@@ -845,13 +715,13 @@ export default {
      * @summary reset the value of the transcriptContent and transcripVisibility
      * @fires 'transcript-hidden'  to AppCompPlaybar
      */
-    closeTranscript() {
+    closeTranscript(container = this.transcriptContainer) {
       setTimeout(() => {
         this.transcriptContent = null
         this.transcriptVisible = false
       }, 300)
       this.$bus.$emit('transcript-hidden')
-      this.$bus.$emit('resize-media', 'lg')
+      this.$bus.$emit('resize-media', 'lg', container)
     },
 
     /**
@@ -904,8 +774,9 @@ export default {
       return new Promise((res) => {
         this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
         this.$store.dispatch('updateCurrentTimeline', '')
-        this.$store.dispatch('updateCurrentMediaElement', '')
+        this.$store.dispatch('updateCurrentMediaElements', [])
         this.$store.dispatch('updateCurrentPage', {})
+        this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
         res(this.$store.state.$appStore.compStatusTracker)
       })
     },
@@ -1014,16 +885,15 @@ export default {
           case 'xapi':
             {
               //Check if there is a user connection
+
               if (
                 this.getConnectionInfo &&
                 this.getConnectionInfo.actor &&
-                this.getConnectionInfo.remote
+                this.getConnectionInfo.remote &&
+                this.getDataFromServer
               ) {
-                // check for the bookmark existance in LMS
-                const bookmark = this.$xapi._getLessonPosition(
-                  this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-                  this.getConnectionInfo.activity_id
-                )[0]
+                const { lessonPosition } = this.getDataFromServer
+                const bookmark = lessonPosition.length ? lessonPosition[0] : ''
                 // if none stored in the LMS redirect to the 1st page
                 if (
                   !this.bookmarkActive ||
@@ -1045,10 +915,6 @@ export default {
                   ? this.$router.push({ name: this.$route.name })
                   : this.$router.push({ name: 'menu' })
               }
-              // set the current page
-              this.fetchPage().then((res) => {
-                //this.mediaToShw = this.formateData(res)
-              })
             }
             break
         }
@@ -1144,15 +1010,10 @@ export default {
               !this.theIntroIsActivated
             )
               toName = 'menu'
-            // next({ name: toName }) //navigate to correct path
           }
           //When User inter path to module
           else if (to.name === 'module') {
-            //Intro is not active set navigation path to menu
-            //if (!this.theIntroIsActivated) toName = 'menu'
-            //Intro active set navigation path to introduction
             toName = 'menu'
-            // next({ name: toName }) //navigate to correct path
           }
           //Default redirection
           else {
@@ -1162,10 +1023,6 @@ export default {
           //===================== Handeling a page request from Store=========================== ====//
           //get the page from store
           this.fetchPage().then((res) => {
-            this.$bus.$emit('set-comp-status', 'AppbaseModule', 'ready')
-
-            // this.mediaToShw = this.formateData(res)
-
             //Save current page has bookmark in scorm
             if (
               this.getModuleInfo.packageType === 'scorm' &&
@@ -1198,193 +1055,6 @@ export default {
       if (this.routeData.length >= 4) this.routeData.shift()
     },
 
-    /**
-     * @description Send a custom statement to the lrs. Receive some custom params and build a statement to send
-     * @param {Object} stmtObj
-     * @param {Function} cb
-     */
-    sendXapiStatement(stmtObj, cb = null, withFetch = false) {
-      cb = cb || null
-      const crsParams = this.getModuleInfo
-
-      if (
-        this.getConnectionInfo &&
-        this.getConnectionInfo.actor &&
-        this.getConnectionInfo.remote
-      ) {
-        const {
-          id,
-          result = null,
-          definition,
-          objectType,
-          type,
-          description,
-          verb,
-          extension,
-          duration,
-          completion
-        } = stmtObj
-        //unload
-        //define the activity id
-        let activityId
-        //=========================== activity ID of Object ==========================================
-        /*
-         * Define the acitivity id of the stmt according to following:
-         * The statement is sent at component/ element level : there is Id and Id is not null (id of the element)
-         * The statement is sent at module level. there is no id
-         *  the Statement must be sent at the course level: There course_id exist and id is the course_id
-         */
-
-        if (id && id !== crsParams.courseID)
-          activityId = `${this.getConnectionInfo.activity_id}/${id}`
-        else if (crsParams.courseID && id === crsParams.courseID)
-          activityId = this.getConnectionInfo.activity_id.replace(
-            `/${crsParams.id}`,
-            ''
-          )
-        else activityId = `${this.getConnectionInfo.activity_id}`
-
-        //define the statement object
-        let stmt = {
-          actor: this.getConnectionInfo.actor,
-          verb: (() => {
-            if (verb && this.$xapi.verbs[verb.trim()])
-              return this.$xapi.verbs[verb.trim()]
-            else {
-              //check if the agent exist in the learning record for this activity
-              // to determine wether he is lunching the activity or resuming the activity
-              if (
-                this.$xapi._getAgent(
-                  this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-                  activityId
-                )
-              )
-                return this.$xapi.verbs.resumed
-              else return this.$xapi.verbs.started
-            }
-          })(),
-          object: {
-            id: activityId,
-            definition: {
-              name: {
-                [this.displayLang]: `${definition}`
-              },
-              description: {
-                [this.displayLang]: `${description}`,
-                type: type || 'http://activitystrea.ms/schema/1.0/page'
-              }
-            },
-            objectType: objectType || 'Activity'
-          },
-          context: {
-            contextActivities: {}
-          }
-        }
-        //===================== contextActivity parent =====================//
-        /*
-         Define parent in the contextActivity
-         When:
-        1- when we have the id (parent === module)
-        2- when with have no id but we have a course_id (parent is cours_id)
-        */
-        const activityParent = (() => {
-          if (crsParams.courseID && !id)
-            return {
-              id: this.getConnectionInfo.activity_id.replace(
-                `/${crsParams.id}`,
-                ''
-              ),
-              objectType: objectType || 'Activity'
-            }
-          else if (id && id !== crsParams.courseID)
-            return {
-              id: `${this.getConnectionInfo.activity_id}`,
-              objectType: objectType || 'Activity'
-            }
-          else return null
-        })()
-
-        // Add the parent key of the context activity
-        if (activityParent)
-          stmt.context.contextActivities['parent'] = [activityParent]
-
-        //===================== contextActivity grouping =====================//
-
-        //Defining the Grouping of the context activity
-        const activityGrouping = (() => {
-          if (
-            activityParent &&
-            crsParams.courseID &&
-            activityParent.id.includes(crsParams.id)
-          )
-            return {
-              id: this.getConnectionInfo.activity_id.replace(
-                `/${crsParams.id}`,
-                ''
-              )
-            }
-          else return null
-        })()
-        //Adding the grouping of the context activity
-        if (activityGrouping)
-          stmt.context.contextActivities['grouping'] = [activityGrouping]
-
-        //add result data to statement
-        if (result) stmt['result'] = result
-
-        // Add duration info to statment when activity is complete
-        if (verb === 'completed' || verb === 'suspended' || verb === 'exited') {
-          if (!stmt.result) stmt.result = {} // check if exist
-
-          let d
-
-          duration
-            ? (d = `PT${duration.split(':')[0]}H${duration.split(':')[1]}M${
-                duration.split(':')[2]
-              }S`)
-            : (d = `PT${this.activityDuration.split(':')[0]}H${
-                this.activityDuration.split(':')[1]
-              }M${this.activityDuration.split(':')[2]}S`)
-
-          stmt.result['duration'] = d
-          //Set the completion status of the result
-          if (completion) stmt.result['completion'] = completion
-        }
-
-        // ===================== Extension of the Object definition =====================//
-        if (
-          extension &&
-          extension.constructor === Array &&
-          extension.length > 0
-        ) {
-          //Validate each entry given in the extension Array
-          extension.forEach((e) => {
-            //entry must be of type Object
-            if (e.constructor !== Object)
-              throw new Error(`'${e}' is not a valid value. Must be Object`)
-
-            //Entry Must have id and content keys
-            const validKey = ['id', 'content']
-            Object.keys(e).forEach((key) => {
-              if (!validKey.includes(key))
-                throw new Error(`Not valid key '${key}' for entry ${e}`)
-
-              //id must be a String
-              if (key === 'id' && e[key] && e[key].constructor !== String)
-                throw new Error(`'${key}' must be of type String`)
-            })
-
-            stmt.object.definition['extensions'] = {
-              ...stmt.object.definition['extensions'],
-              [`${this.getConnectionInfo.activity_id}/${e.id}`]: e.content
-            }
-          })
-        }
-
-        this.$xapi._sendStatement(stmt, cb, withFetch)
-      }
-    },
-
     /**
      * @description Helper fonction to launch extra ressource from this activity. Extra ressource is another lesson.
      * @param {Object} res - Data of the ressource to launch
@@ -1411,67 +1081,12 @@ export default {
         res.url = `${baseDomain}/${res.url}`
 
       const newUrlToLaunch = `${res.url}?endpoint=${endpoint}&auth=${auth}&actor=${actor}&registration=${registration}&activity_id=${activity_id}`
-
-      this.endLesson((evt) => {
+      this.routeChangeCounter = 0 //reset counter after saving
+      this.$bus.$emit('fire-exit-event', () => {
         window.location.replace(newUrlToLaunch)
       })
     },
 
-    /**
-     * @param {Function} cb
-     * @param {Bool} option - set if must use Fetch API or not.  default = false
-     */
-    endLesson(cb, option = false) {
-      let text
-      //Defining the text to display for stmt description and definition
-      switch (this.$i18n.locale) {
-        case 'fr':
-          if (this.getModuleInfo.courseID)
-            text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
-          else text = `Le ${this.getModuleInfo.id}`
-          break
-        case 'en':
-          if (this.getModuleInfo.courseID)
-            text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
-          else text = `The ${this.getModuleInfo.id}`
-          break
-      }
-
-      // Retrieve only user data in lessons front its interaction that we want to send to the LRS.
-      // Note: User Settings are sent on a different URI and statement
-      const {
-        isFistTime,
-        userSettings,
-        ...lessonsData
-      } = this.getUserInteraction
-
-      const stmt = {
-        verb: 'exited',
-        definition: text,
-        description: text,
-        extension: [
-          {
-            id: 'ending-point',
-            content: this.$route.name
-          },
-          {
-            id: 'user-data',
-            content: {
-              routeHistory: this.getRouteHistory,
-              ...lessonsData
-            }
-          }
-        ],
-        duration: this.lessonDuration
-      }
-
-      this.sendXapiStatement(stmt, null, option)
-
-      if (this.timerState === 'started') setTimeout(() => this.stopTimer(), 0) //clear the timer
-
-      if (cb) cb()
-    },
-
     /**
      * @description start the tutorial for first time users
      * @requires '../assets/data/onboardingMessages.json'
@@ -1487,13 +1102,17 @@ export default {
             this.nextOnboarding('message_1')
           } catch (e) {
             //fetch default values for popups
-            this.onboardingMessages = require('../assets/data/onboardingMessages.json')
+            this.onboardingMessages = import(
+              '../assets/data/onboardingMessages.json'
+            )
             this.nextOnboarding('message_1')
           }
         }
       } else {
         if (this.getOnboardingEnabled) {
-          this.onboardingMessages = require('../assets/data/onboardingMessages.json')
+          this.onboardingMessages = import(
+            '../assets/data/onboardingMessages.json'
+          )
           this.nextOnboarding('message_1')
         }
       }
@@ -1518,8 +1137,6 @@ export default {
           this.toolTipTarget = messages[postNextMessage].value.target
         }
       }
-
-      //check if next message exist
       //check if the next message is a popup or other componant
       if (messages[nextMessage].type == 'popup-avert') {
         this.openPopup(messages[nextMessage])
@@ -1531,29 +1148,20 @@ export default {
      * @description- Skip directly to the main containt*
      * main content is Node with page ID by default
      * Main Content can be defined by front-end using prop "main" in Module.vue of project
+     * @fire {event} 'move-to-target' to AppBase
      */
 
     skipToMain() {
       const { main } = this.moduleConfig // check for main input
-      let skipTo = document.querySelector(`#wrapper-content`) //default definition of main element
-
-      if (main) {
-        let targetEl = document.querySelector(`#${main}`) // search for node element specified as main
 
-        if (targetEl) skipTo = targetEl
-      }
-      let targetTop = skipTo.offsetTop
+      let skipTo = main ? main : 'wrapper-content' // search for node element specified as main
 
-      let scrollOpt = {
-        top: targetTop - 100,
+      //fires event
+      this.$bus.$emit('move-to-target', skipTo, {
+        top: 100, // offset target top to 100 pixel
         left: 0,
-        behavior: 'auto' //auto
-      }
-
-      //Allowing accessibility control with keyboard
-      skipTo.setAttribute('tabIndex', -1)
-      window.scrollTo(scrollOpt)
-      this.resetFocus(skipTo)
+        behavior: 'auto'
+      })
     },
 
     /**
@@ -1703,7 +1311,6 @@ export default {
      * @param {HTMLElement} e - element that will get focus
      */
     resetFocus(e) {
-      //console.log('set focus IN ', { from: document.activeElement, to: e })
       if (e) e.focus()
     },
 
@@ -1752,76 +1359,293 @@ export default {
         this.closeDelay = false
         clearTimeout(this.timeOut)
       }
+    },
+
+    /**
+     * @description Method to handle to sanding of completion status to LRS
+     * determine wether to send a completion for an activity or the Lesson
+     * Completion is sent once
+     * @param {String} context - 'ACTIVITY | LESSON'
+     */
+
+    sendCompletionStatus(context = null) {
+      if (
+        !this.getModuleInfo.packageType === 'xapi' ||
+        !this.getConnectionInfo ||
+        !this.getConnectionInfo.actor ||
+        !this.getConnectionInfo.remote ||
+        !this.getDataFromServer ||
+        !context
+      )
+        return
+
+      let stmt = null
+
+      switch (context) {
+        case 'ACTIVITY': {
+          let text
+          let completedSize = 0
+          Object.entries(this.getAllCompleted).forEach((value) => {
+            completedSize = completedSize + value[1].length
+          })
+          let recordInServerLength,
+            thisActivityProgressLength,
+            thisActivityLength
+
+          const { userProgress } = this.getDataFromServer
+          const thisActivityServerState =
+            userProgress[this.$route.meta.activity_ref]
+
+          if (thisActivityServerState)
+            recordInServerLength = Object.keys(thisActivityServerState).length
+
+          thisActivityProgressLength = this.getAllCompleted[
+            this.$route.meta.activity_ref
+          ]
+            ? this.getAllCompleted[this.$route.meta.activity_ref].length
+            : 0
+
+          //get The total length of the current activity
+          thisActivityLength = this.getAllActivities(
+            this.getCurrentPage.activityRef
+          ).pageSize
+
+          if (thisActivityProgressLength !== thisActivityLength) return
+          if (thisActivityProgressLength == recordInServerLength) return
+
+          //Defining the text to display for stmt description and definition
+          const id = this.getCurrentPage.activityRef
+          let aName = ''
+          switch (true) {
+            case id == 'A00':
+              aName = 'Introduction'
+              break
+            case id == 'A99':
+              aName = 'Conclusion'
+              break
+
+            default: {
+              let d = id.replace('A', '').trim()
+              d = parseInt(d)
+              aName = `${this.$t('text.activity')} ${d}`
+            }
+          }
+
+          switch (this.$i18n.locale) {
+            case 'fr':
+              if (this.getModuleInfo.courseID)
+                text = `${aName} de ${this.getModuleInfo.id} `
+              else text = `Le ${this.getModuleInfo.id}`
+              break
+            case 'en':
+              if (this.getModuleInfo.courseID)
+                text = `${aName} of ${this.getModuleInfo.id}`
+              else text = `The ${this.getModuleInfo.id}`
+              break
+          }
+
+          // Retrive only user data in lessons front its interaction that we want to send to the LRS.
+          // Note: User Settings are sent on a different URI and statement
+          const { isFistTime, userSettings, ...lessonsData } =
+            this.getUserInteraction
+
+          stmt = {
+            id: this.getCurrentPage.activityRef,
+            verb: 'completed',
+            definition: text,
+            description: text,
+            extensions: [
+              {
+                id: 'user-data',
+                content: {
+                  routeHistory: this.getRouteHistory,
+                  ...lessonsData
+                }
+              }
+            ],
+            duration: this.activityDuration,
+            completion: true
+          }
+
+          break
+        }
+
+        case 'LESSON': {
+          //======================================================
+          let completedSize = 0
+          Object.entries(this.getAllCompleted).forEach((value) => {
+            completedSize = completedSize + value[1].length
+          })
+
+          if (completedSize === this.getAllActivities().pageSize) {
+            let text
+            //Defining the text to display for stmt description and definition
+            switch (this.$i18n.locale) {
+              case 'fr':
+                if (this.getModuleInfo.courseID)
+                  text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
+                else text = `Le ${this.getModuleInfo.id}`
+                break
+              case 'en':
+                if (this.getModuleInfo.courseID)
+                  text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
+                else text = `The ${this.getModuleInfo.id}`
+                break
+            }
+
+            // Retrive only user data in lessons front its interaction that we want to send to the LRS.
+            // Note: User Settings are sent on a different URI and statement
+            const { isFistTime, userSettings, ...lessonsData } =
+              this.getUserInteraction
+
+            stmt = {
+              verb: 'completed',
+              definition: text,
+              description: text,
+              extensions: [
+                {
+                  id: 'user-data',
+                  content: {
+                    routeHistory: this.getRouteHistory,
+                    ...lessonsData
+                  }
+                }
+              ],
+              duration: this.lessonDuration,
+              completion: true
+            }
+            this.lessonCompletionStatus = true // set the status of this lesson as completed
+            let completedState = {
+              duration: this.lessonDuration,
+              completion: this.lessonCompletionStatus
+            }
+            this.$store.dispatch('updateDataFetchFromServer', {
+              completedState
+            })
+          }
+
+          break
+        }
+      }
+      if (!stmt) return
+
+      this.$bus.$emit('send-xapi-statement', stmt)
+    },
+    /**
+     * @description Method handle start event of activity to LRS
+     * Check if the activity is already initiated in The LRS record to determine wether it a start or a resume
+     * @param {Object} a - Data of the activity
+     * @fires 'send-xapi-statement' to APPBASE
+     */
+
+    sendStartStatement(a) {
+      if (!a || !this.getDataFromServer) return
+      const { id } = a
+      let aName = null
+
+      switch (true) {
+        case id == 'A00':
+          aName = 'Introduction'
+          break
+        case id == 'A99':
+          aName = 'Conclusion'
+          break
+
+        default: {
+          let d = id.replace('A', '').trim()
+          d = parseInt(d)
+          aName = `${this.$t('text.activity')} ${d}`
+        }
+      }
+
+      let text =
+        this.$i18n.locale == 'fr'
+          ? `${aName} de ${this.getModuleInfo.id}`
+          : `${aName} of ${this.getModuleInfo.id}`
+
+      /*
+       *Determine if activity as been initialized. Activity is initialized when it is in the serverRecords
+       */
+      const { userProgress } = this.getDataFromServer
+      const thisActivityServerState = userProgress[id] ? userProgress[id] : {}
+      const recordInServerLength = Object.keys(thisActivityServerState).length
+
+      const stmt = {
+        id,
+        verb: recordInServerLength ? 'resumed' : 'initialized', //determine verb of the statement to send
+        definition: text,
+        description: text
+      }
+      setTimeout(() => this.$bus.$emit('send-xapi-statement', stmt), 500)
     }
   }
 }
 </script>
 <style lang="scss">
-$heigthNavbar: 55px;
+.module {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
 
-#App-base {
-  .skip-link {
-    left: -999px;
-    position: absolute;
+.skip-link {
+  position: absolute;
+  left: -999px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  z-index: -999;
+
+  &:focus,
+  &:active {
+    left: auto;
     top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    z-index: -999;
-
-    &:focus,
-    &:active {
-      left: auto;
-      top: auto;
-      width: 30%;
-      height: auto;
-      overflow: auto;
-      margin: 10px 35%;
-      padding: 5px;
-      text-align: center;
-      font-size: 1.2em;
-      z-index: 999;
-    }
-  }
-  /********** FM **********/
-  #Loading {
-    width: 100%;
-    position: fixed;
-    z-index: 99999;
-    left: 0;
-    opacity: 0;
-    display: none;
-    transition: opacity 0.5s;
-    pointer-events: none;
+    width: 30%;
+    height: auto;
+    overflow: auto;
+    margin: 10px 35%;
+    padding: 5px;
+    text-align: center;
+    font-size: 1.2em;
+    z-index: 999;
   }
 }
-
-#btn_mobile_hide {
-  width: 48px;
-  height: 40px;
-  border: none;
+/********** FM **********/
+#Loading {
+  width: 100%;
+  position: fixed;
+  z-index: 99999;
+  left: 0;
+  opacity: 0;
   display: none;
+  transition: opacity 0.5s;
   pointer-events: none;
-
-  @media screen and (max-width: 1100px) {
-    display: block;
-    pointer-events: all;
-    position: absolute;
-    top: 6px;
-    right: 10px;
-    z-index: 10;
-  }
-
-  svg {
-    transition: transform 0.5s ease-out;
-    transform: rotate(180deg);
-
-    &[data-hide='true'] {
-      transform: rotate(0deg);
-    }
-  }
 }
+
+// #Loading {
+//   position: absolute;
+//   width: 100%;
+//   display: flex;
+//   flex-direction: column;
+//   //width: 33%;
+//   height: 40%;
+//   top: 50%;
+//   align-items: center;
+//   justify-content: center;
+//   background-color: rgba($color: #000000, $alpha: 0.7);
+//   border-radius: 10px;
+//   box-shadow: 2px 2px 4px 0px rgba($color: #000000, $alpha: 0.2);
+//   z-index: 99999;
+//   pointer-events: none;
+// }
 #right-sidebar {
+  -webkit-box-shadow: -2px 1px 6px -1px rgb(0 0 0 / 40%);
+  box-shadow: -2px 1px 6px -1px rgb(0 0 0 / 40%);
   .b-sidebar-header button .app-icon {
     width: 20px;
     height: 20px;