fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppBaseModule.vue

@@ -1,1634 +1,1639 @@
-<!--
- *@ 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.
- *
- *@Note :Must be used
--->
-
-<template>
-  <div fluid class="module">
-    <span
-      id="page_info_section"
-      class="sr-only"
-      aria-labelledby="page_info"
-    ></span>
-    <a class="skip-link" href="" @click.prevent="skipToMain">
-      {{ $t('message.skip_content') }}
-    </a>
-
-    <nav
-      v-show="!isMenu"
-      id="navTool"
-      :key="$route.fullpath"
-      class="app-nav"
-      :class="{ show: closeDelay }"
-    >
-      <app-comp-navigation
-        :app-status="appReady ? true : null"
-        :auto-navigate="theNavigationBetweenActivity"
-      />
-    </nav>
-    <base-module :m-data="$data">
-          
-
-      <v-container
-        id="wrapper-content"
-        fluid
-        :class="{ active: moduleConfig.videoFull }"
-        class="scroll-bar"
-      >
-        <div class="box">
-          <router-view ref="main" :key="$route.fullPath" />
-          <!-- <router-view v-show="appReady" ref="main" :key="$route.fullPath" /> -->
-        </div>
-
-        <div id="primary_nav_wrapper"></div>
-      </v-container>
-    </base-module>
-
-    <!------------------POPUP QUICK -------------------------->
-    <app-comp-pop-up-next v-show="popupIsOpen">
-      <!-- <template #content></template> -->
-    </app-comp-pop-up-next>
-    <!------------------END USE POP UP-------------------------->
-
-    <!--------------RIGHT SIDEBAR (for display of extra contents)------------>
-    <Transition name="right-sidebar-transition" mode="out-in">
-      <section
-        v-if="rightSidebarVisible"
-        id="right-sidebar"
-        ref="right-sidebar"
-        :key="dynamicSidebarContent._id"
-        :aria-label="$t('label.side_panel')"
-        :class="{
-          'v-media': dynamicSidebarContent._context === 'ctxTranscript'
-        }"
-      >
-        <div id="right-sidebar-header">
-          <app-base-button
-            :title="$t('button.closePopUp')"
-            :aria-label="$t('button.closePopUp')"
-            class="btn-reserve-ico embranchement-close"
-            @click="
-              closeSidebar(
-                dynamicSidebarContent._context,
-                dynamicSidebarContent._container
-                  ? dynamicSidebarContent._container
-                  : null
-              )
-            "
-          >
-            <svg aria-hidden="true" focusable="false">
-              <use href="#close-square-icon" />
-            </svg>
-          </app-base-button>
-        </div>
-        <div id="right-sidebar-body">
-          <component
-            :is="dynamicSidebarContent._component"
-            class="v-media"
-            v-bind="{ ...dynamicSidebarContent._comProps }"
-          />
-          <!-- </Transition> -->
-        </div>
-        <div id="right-sidebar-footer"></div>
-      </section>
-    </Transition>
-    <footer></footer>
-    <!-------------------------END RIGHT SIDEBAR------------------------------->
-  </div>
-</template>
-<script>
-// const modules = import.meta.glob('@/module/**/*.vue')
-import { fileAssets } from '../shared/generalfuncs.js'
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import BaseModule from './BaseModule.vue'
-import AppCompContainer from './AppCompContainer.vue'
-import { defineAsyncComponent } from 'vue'
-//import
-export default {
-  components: {
-    BaseModule,
-    AppCompContainer
-  },
-  inject: ['elapsedIdleTime', 'lessonDuration', 'appTimer'],
-  props: {
-    moduleConfig: {
-      type: Object,
-      default: () => {
-        return {
-          allowNavigationToActivity: false, // set Previous/Next can allow navigation between activities. Set to  false if do not want navigation between activities with Previous/Next
-          main: ''
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      meta: {},
-      videoFull: null,
-      routeData: [],
-      changePage: false,
-      randKey: Math.floor(Math.random() * 10001),
-      popupIsOpen: false,
-      hidePlayBar: false, // Controle visibility of the play bar. set to true to hide play bar
-      stmt: null, // holder for xapi statememt,
-      routeChangeCounter: 0,
-      toolTipTarget: '', //for the tool tip,
-      onboardingMessages: {}, //for the onboarding @todo replace with default file
-      settingsSelected: {},
-      compID: null,
-      rightSidebarVisible: false,
-      lastInFocus: null,
-      closeDelay: false,
-      timeOut: null,
-      infocusTabIndex: null,
-      transcriptVisible: false,
-      transcriptContent: null,
-      transcriptContainer: null,
-      branchingVisible: false,
-      customContentVisible: false,
-      customContent: null,
-      lessonCompletionStatus: false,
-      rightSidebarEvent: new CustomEvent('sidebarEvent', {
-        bubbles: true,
-        detail: {
-          text: () => 'this is a test',
-          name: 'sidebarEvent'
-        }
-      }),
-      lessonStarted: false
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getCurrentPage',
-      'getCurrentBranchPage',
-      'getAppStatus',
-      'getUserInteraction',
-      'getModuleInfo',
-      'getAllActivities',
-      'getAllCompleted',
-      'getConnectionInfo',
-      'hasMediaElOrTimeline',
-      'getMenuSettings',
-      'getRouteHistory',
-      'getOnboardingEnabled',
-      'getApplicationSettings',
-      'getCompStatusTracker',
-      'getLessonPosition',
-      'getCompletionState'
-    ]),
-    isMenu() {
-      return this.$route.name === 'menu'
-    },
-    appReady() {
-      return this.getAppStatus === 'ready' ? true : false
-    },
-    hasMedia() {
-      return typeof this.hasMediaElOrTimeline === 'object'
-    },
-    activityHasChanged() {
-      const rd = this.routeData.toReversed()
-
-      const routeWasMenu =
-        this.$router.options.history.state.back &&
-        this.$router.options.history.state.back.includes('menu')
-
-      if (
-        rd.length <= 1 ||
-        rd[0].activity_ref !== this.$route.meta.activity_ref ||
-        routeWasMenu
-      )
-        return true
-      else return false
-    },
-    /**
-     * @description Set the id the module
-     */
-    theId() {
-      let id = 'mod_001'
-      if (this.moduleConfig.id) id = this.moduleConfig.id
-      return id
-    },
-    /**
-     * @description Set the title of the lesson
-     */
-    theTitle() {
-      let title = this.$t(`text.place_holder.for_lesson_title`)
-
-      if (this.getMenuSettings.lessonTitle)
-        title = this.getMenuSettings.lessonTitle
-      return title
-    },
-    /**
-     * @description Set desciption for the module
-     *
-     */
-    theDescription() {
-      let description = null
-
-      if (this.moduleConfig.description)
-        description = this.moduleConfig.description
-      return description
-    },
-    /**
-     * @description set Previous/Next can allow navigation between activities.
-     *
-     */
-    theNavigationBetweenActivity() {
-      let navBwteenActivity = false
-      if (this.moduleConfig.allowNavigationToActivity)
-        navBwteenActivity = this.moduleConfig.allowNavigationToActivity
-      return navBwteenActivity
-    },
-    /**
-     * @description Control use INTRODUCTION page in the Lesson.
-     *              set to false if there is no introduction
-     */
-    theIntroIsActivated() {
-      let introActive = false
-      if (this.moduleConfig.introActive)
-        introActive = this.moduleConfig.introActive
-      return introActive
-    },
-    isMain() {
-      const { main } = this.moduleConfig
-      if (!main || main === ' ') return this.$route.meta.id
-
-      let mainEl = document.querySelector(`#${main}`)
-
-      if (!mainEl) return this.$route.meta.id
-
-      return mainEl
-    },
-    dynamicSidebarContent() {
-      if (
-        !this.transcriptVisible &&
-        !this.branchingVisible &&
-        !this.customContentVisible
-      )
-        return null
-      let sidebarSettings = {}
-      let _label = null
-      //=========================================
-      switch (true) {
-        case this.transcriptVisible:
-          _label =
-            this.$i18n.locale === 'fr'
-              ? 'Contenu de la transcription'
-              : 'Content of the transcript'
-
-          sidebarSettings = {
-            _component: AppCompContainer,
-            _comProps: {
-              content: this.transcriptContent,
-              id: 'transcript-content'
-            },
-            _context: 'ctxTranscript',
-            _container: this.transcriptContainer,
-            _label,
-            _id: 'transcript'
-          }
-          break
-
-        case this.branchingVisible: {
-          const allActivities = fileAssets.getActivities()
-          if (this.$route.meta.type !== 'branching' || !this.compID) return null
-
-          const componentName = this.compID
-          const { activityRef } = this.getCurrentPage //get activity id from current page
-
-          _label =
-            this.$i18n.locale === 'fr'
-              ? "contenu de l'embranchement"
-              : 'content of the branching'
-
-          sidebarSettings = {
-            _component: defineAsyncComponent(async () => {
-              const compFile = allActivities.filter((f) => {
-                return f.name.includes(`/${activityRef}/${componentName}`)
-              })[0]
-
-              return compFile.content
-            }),
-
-            _comProps: false,
-            _context: 'ctxBranching',
-            _label,
-            _id: componentName
-          }
-          break
-        }
-
-        case this.customContentVisible:
-          sidebarSettings = {
-            _component: AppCompContainer,
-            _comProps: {
-              content: this.customContent
-            },
-            _context: 'ctxCustomContent',
-            _label,
-            _id: 'custom-content'
-          }
-          break
-      }
-
-      return sidebarSettings
-    },
-    navigationHistory() {
-      return this.getRouteHistory
-    }
-  },
-  watch: {
-    navigationHistory: {
-      handler() {
-        this.routeData = this.navigationHistory
-      },
-      deep: true,
-      immediate: true
-    },
-    $route: {
-      handler(newValue) {
-        this.getFocusables().then((r) => {
-          //Pressing Tab or Shit + tab should make it possible to cycle focus through them
-          if (!r) return
-          r[0].focus()
-          this.infocusTabIndex = r[0]
-        })
-
-        //update the routeChangeCounter when navigation
-        if (this.routeChangeCounter < 3) this.routeChangeCounter += 1
-
-        /*
-         *Start Timer on New activities
-         */
-
-        const trackedRouteType = [
-          'introduction',
-          'conclusion',
-          'normal',
-          'branching'
-        ]
-        if (trackedRouteType.includes(this.$route.meta.type)) {
-          //Navigation should only trigger timer and xapi statement when app is ready and activity has changed
-          if (!this.activityHasChanged || !this.appReady) return
-
-          //Start the timer every time route is a new activity
-          this.$bus.$emit('start-timer')
-          //Send statement when activity as changed
-          this.sendStartStatement({ id: this.$route.meta.activity_ref })
-        }
-        this.transcriptVisible = false
-      },
-      deep: true,
-      immediate: true
-    },
-
-    appReady: {
-      async handler(newValue) {
-        //Should only start timer when the app has fully loaded
-
-        if (!this.lessonStarted) this.initLesson()
-
-        if (this.activityHasChanged && newValue) {
-          this.$bus.$emit('start-timer')
-        }
-      },
-      immediate: true
-    },
-
-    /**
-     * @description Defined in Store Watch all completed activities to send a lesson completion statement
-     */
-    getAllCompleted: {
-      handler() {
-        // Check once the server to set the completion status of the lesson
-        if (this.getCompletionState) {
-          const completedState = this.getCompletionState
-
-          this.lessonCompletionStatus =
-            !completedState || !completedState.completion
-              ? false
-              : completedState.completion
-        }
-
-        if (!this.lessonCompletionStatus) this.sendCompletionStatus('LESSON')
-      },
-      deep: true,
-      immediate: true
-    },
-    /**
-     * @description Defined in timerMixin Watch The epalsed time for autosaving the user reached position
-     */
-    elapsedIdleTime: {
-      handler() {
-        if (this.appTimer.getTimerState() !== 'started') return
-
-        //send a statement every x time (second)
-        if (
-          this.elapsedIdleTime % 500 === 0 &&
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote
-        ) {
-          const lessonPosition = this.getLessonPosition
-
-          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
-          ) {
-            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
-            }
-
-            //Creating custom statment
-            const stmt = {
-              verb: 'progressed',
-              definition: text,
-              description: text,
-              extensions: [
-                {
-                  id: 'ending-point',
-                  content: (() =>
-                    this.$route.name == 'menu'
-                      ? this.$helper.getRoutesFromVueRouter().meta.children[0]
-                          ._namedRoute
-                      : this.$route.name)()
-                }
-              ],
-              duration: this.appTimer.ISOTimeParser(this.lessonDuration)
-            }
-
-            this.$bus.$emit('send-xapi-statement', stmt)
-            this.routeChangeCounter = 0 //reset counter after saving
-          }
-        }
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  beforeUnmount() {
-    //Communication events
-    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() {
-    let lessonLabel, lessonNumber, lessonTitle, titleString
-    lessonLabel = this.$t('text.lesson')
-    lessonNumber = this.moduleConfig.id.replace('module_', '')
-    lessonTitle = this.theTitle
-    titleString = lessonLabel + ' ' + lessonNumber + ' – ' + lessonTitle
-
-    //Remove prefix for introduction or conclusion, according to isIntroConclu setting in Module.vue
-    if (typeof this.moduleConfig.isIntroConclu !== 'undefined') {
-      if (this.moduleConfig.isIntroConclu) {
-        titleString = lessonTitle
-      }
-    }
-    document.title = titleString
-    document.addEventListener('sidebarEvent', (e) => {
-      // e. e.checkVisibility()
-      this.$bus.$emit(
-        'side-bar-open',
-        e.target.checkVisibility({
-          opacityProperty: true,
-          visibilityProperty: true,
-          contentVisibilityAuto: true
-        })
-      )
-    })
-    // Tell the store the state of intro and conclusion
-    this.updateIntroStatus(this.theIntroIsActivated)
-    //Communication events
-    this.$bus.$on('open-popup', this.openPopup)
-
-    this.$bus.$on('close-popup', this.closePopup)
-
-    this.$bus.$on('start-onboarding', this.startOnboarding)
-
-    this.$bus.$on('open-sidebar', this.openSidebar)
-
-    this.$bus.$on('close-sidebar', this.closeSidebar)
-
-    this.$bus.$on('videoFullScreen', this.onVideoFullScreen)
-
-    this.$bus.$on('save-to-scorm', this.saveToScorm)
-
-    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)
-
-    if (this.navigationHistory.length != 0) {
-      this.routeData = this.navigationHistory
-    }
-    setTimeout(() => {
-      this.settingsSelected = { ...this.getApplicationSettings }
-    }, 800)
-  },
-  mounted() {
-    let nav = document.getElementById('navTool')
-
-    if (nav) nav.addEventListener('mouseleave', this.onNavMouseleave)
-
-    document.addEventListener('keydown', this.handleKeyboardControls)
-  },
-  methods: {
-    ...mapActions(useAppStore, [
-      'updateIntroStatus',
-      'updateCurrentTimeline',
-      'updateCurrentMediaElements',
-      'updateCurrentPage',
-      'updatesideBIsOpen',
-      'setCompletionState',
-      'updatepopIsOpen'
-    ]),
-    onNavMouseleave() {
-      let widgetOpen = document.getElementsByClassName('open')
-
-      if (widgetOpen.length == 0) {
-        this.cancelTimeout()
-        this.closeDelay = true
-        this.startTimeout()
-      } else {
-        this.closeDelay = true
-      }
-    },
-    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 () {
-          const getAllFocusables = () => {
-            const listItems = document.querySelectorAll('.v-media')
-            if (!listItems || !listItems.length) return null
-            return Array.from(listItems)
-          }
-          resolve(getAllFocusables())
-        }, 200)
-      })
-    },
-    /**
-     * @description Handle Keyboard controls
-     * @summary
-     * @param {Object} evt  - event that fired the action
-     *
-     */
-    async handleKeyboardControls(evt) {
-      let { code } = evt
-
-      if (code === 'Escape' && this.rightSidebarVisible) {
-        this.closeSidebar(this.dynamicSidebarContent._context)
-      }
-    },
-
-    /**
-     * @description open the right sidebar component and show and set it content
-     * @summary opens sidebar according to context
-     * @param {Object} obj {ctx , e} - context and content to display in the sidebar
-     *
-     */
-    openSidebar(obj) {
-      if (!obj || !obj.ctx || !obj.e) return
-      const wrapper = obj.w ? obj.w : null
-      this.lastInFocus = document.activeElement
-      const { ctx, e: content, persist = false } = obj
-
-      switch (ctx) {
-        case 'ctxTranscript':
-          this.openTranscript(content, wrapper)
-          break
-
-        case 'ctxBranching':
-          if (this.compID === content && !persist)
-            return this.closeSidebar('ctxBranching')
-
-          this.openBranchContent(content)
-          break
-        case 'ctxCustomContent':
-          this.displayCustomContent(content, wrapper)
-          break
-      }
-      //delay animation
-      this.rightSidebarVisible = true
-      this.updatesideBIsOpen(this.rightSidebarVisible)
-      // setTimeout(() => {
-      const rightSidebarContent = this.getRightSidebar() // Emelent displayed in the sidebar-body
-      if (!rightSidebarContent) return
-      rightSidebarContent.scrollTop = 0
-      const rSidebar = document.querySelector('#right-sidebar') // the sidebar
-      rSidebar.dispatchEvent(this.rightSidebarEvent)
-      rSidebar.setAttribute('tabindex', -1)
-      this.resetFocus(rSidebar) //set focus on the sidebar
-      // }, 100)
-    },
-    /**
-     * @description close the right sidebar component
-     * @summary close sidebar according to context
-     * @param {String}  ctx - context in which side bar was opened and will now be closed
-     *
-     */
-    closeSidebar(ctx, wrapper = null) {
-      //delay animation
-      this.rightSidebarVisible = false //
-      setTimeout(() => {
-        const rSidebar = document.querySelector('#right-sidebar') // the sidebar
-        if (!rSidebar) return
-        rSidebar.setAttribute('style', 'display:none')
-        rSidebar.dispatchEvent(this.rightSidebarEvent) //this will allow to run the animation of sidebar closing 1rst
-      }, 100)
-      this.resetFocus(this.lastInFocus)
-      switch (ctx) {
-        case 'ctxTranscript':
-          this.closeTranscript(wrapper)
-          break
-
-        case 'ctxBranching':
-          this.closeBranchContent()
-          break
-
-        case 'ctxCustomContent':
-          this.closeCostumContent()
-          break
-
-        default:
-          this.branchingVisible = false
-          this.transcriptVisible = false
-          this.customContentVisible = false
-          this.transcriptContent = null
-          this.customContent = null
-          this.compID = null
-      }
-      this.updatesideBIsOpen(this.rightSidebarVisible)
-    },
-    /**
-     * @description to close a pop up (not currently used)
-     * @param {Function} [cb]
-     * @fires popup-close to AppBasePopup.vue
-     */
-    closePopup(cb) {
-      this.popupIsOpen = false
-      this.$bus.$emit('popup-close', cb)
-      this.updatepopIsOpen(this.popupIsOpen) //update information in  store
-    },
-    /**
-     * @description to open a pop up
-     * @param {Object} data the content op the popup
-     * @fires popup-open to AppBasePopup.vue
-     */
-    openPopup(data) {
-      this.popupIsOpen = true
-      this.$bus.$emit('popup-open', data) // Use to send message to popUp component
-      this.updatepopIsOpen(this.popupIsOpen) //update information in  store
-    },
-
-    /**
-     * @description to close a popover
-     * @fires tooltip-close to AppCompToolTip.vue
-     */
-    closeToolTip() {
-      this.$bus.$emit('tooltip-close')
-    },
-
-    /**
-     * @description to open a popover
-     * @param {Object} data the options of the popover
-     * @fires tooltip-open to AppCompToolTip.vue
-     */
-    openToolTip(data) {
-      this.$bus.$emit('tooltip-open', data) // Use to send message to tooltip component
-    },
-
-    /**
-     * @description Manage opening of sidebar in transcript context
-     * @summary set the value of the transcriptContent and transcripVisibility
-     * @param {Object} c content to display in the sidebar
-     */
-
-    openTranscript(c, container) {
-      if (!c) return (this.transcriptVisible = false)
-      //Change transcript content
-      if (this.transcriptContent !== c) this.transcriptContent = c
-
-      this.transcriptContainer = container
-      this.transcriptVisible = true
-    },
-    /**
-     * @description Manage closing of sidebar in transcript context
-     * @summary reset the value of the transcriptContent and transcripVisibility
-     * @fires 'transcript-hidden'  to AppCompPlaybar
-     */
-    closeTranscript(container = this.transcriptContainer) {
-      let t = this.customContentVisible ? 10 : 200
-      setTimeout(() => {
-        this.transcriptContent = null
-        this.transcriptVisible = false
-      }, t)
-      this.$bus.$emit('transcript-hidden')
-      this.$bus.$emit('resize-media', 'lg', container)
-    },
-
-    /**
-     * @description Handle the content of the branch page to display in the right sidebar.
-     * @summary When call set the value of compID and the branching visibility Attach lister for scroll event in the sidebar
-     * @param {Object} branchID - ID OF the Component That to retrieve
-     * @fires 'branch-page-viewed' to $PageMixins when scroll in branch page reaches the bottom
-     */
-    openBranchContent(branchID) {
-      this.branchingVisible = true
-      this.compID = branchID //set compenent ID
-      setTimeout(() => {
-        const rightSidebar = this.getRightSidebar()
-        //Should indicate that page is completed when the Rightsidebar content heigh is less then window height
-        if (rightSidebar.scrollHeight <= window.innerHeight) {
-          if (!this.getCurrentBranchPage) return
-          let { userInteraction } = this.getCurrentBranchPage // Get the current branch page opened in the sidebar
-          this.getCurrentBranchPage.state = 'completed' // update the state of this branch
-          userInteraction.state = this.getCurrentBranchPage.state //update userInteraction state
-          this.$bus.$emit('branch-page-viewed')
-        }
-
-        rightSidebar.addEventListener('scroll', this.handleRightSidebarScroll)
-      }, 300)
-    },
-
-    /**
-     * @description Close the branch page in the right sidebar
-     * and update the current page data with the parent of the branch page
-     *
-     * @summary When call remove listner for scroll event in the sidebar , reset compID and branch visibility
-     * @fires 'branching-hidden' to AppCompButtonProgress
-     */
-    closeBranchContent() {
-      const rightSidebar = this.getRightSidebar()
-
-      if (!rightSidebar) return
-
-      rightSidebar.removeEventListener('scroll', this.handleRightSidebarScroll)
-
-      setTimeout(() => {
-        this.compID = null //reset the comp
-        this.branchingVisible = false
-      }, 300)
-      this.$bus.$emit('branching-hidden')
-      this.updateContent(this.$route) // update the content of the current page
-    },
-
-    displayCustomContent(c, container) {
-      if (!c) return (this.customContentVisible = false)
-      //Change transcript content
-      if (this.transcriptVisible) this.closeTranscript()
-      //Change transcript content
-      this.customContent = c
-      this.customContentContainer = container
-      this.customContentVisible = true
-    },
-
-    closeCostumContent() {
-      this.customContentContainer = null
-      this.customContentVisible = false
-    },
-
-    /**
-     * @description reset the values of state (currentTimeline,currentMedialement, currentPage, media duration, appStatus')in the store
-     */
-    async unload() {
-      if (!this.getCurrentPage || Object.keys(this.getCurrentPage).length == 0)
-        return
-
-      return new Promise((res) => {
-        this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
-        this.updateCurrentTimeline(null)
-        this.updateCurrentMediaElements([])
-        // this.updateCurrentPage({})
-        this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
-        res(this.getCompStatusTracker)
-      })
-    },
-
-    /**
-     * @description get User data
-     */
-    async fetchUserData() {
-      const fetched = await new Promise((resolve) => {
-        // get user saved data after 200 milliseconds
-        setTimeout(() => {
-          resolve(this.getUserInteraction)
-        }, 200)
-      })
-      return fetched
-    },
-
-    /**
-     * @description format data from a page
-     * @param {Object} page
-     */
-    formateData(page) {
-      if (page && page.type === 'pg_media') {
-        const {
-          id,
-          animation,
-          type,
-          mediaData: { mSources, mType, mSubtitle, mPoster, mTranscript },
-          timeline,
-          mElement
-        } = page
-        return {
-          id,
-          animation,
-          type,
-          mSources,
-          mType,
-          mSubtitle,
-          timeline,
-          mElement,
-          mPoster,
-          mTranscript
-        }
-      } else if (page && page.type === 'pg_animation') {
-        const { id, animation, type, timeline } = page
-        return {
-          id,
-          animation,
-          type,
-          timeline
-        }
-      } else return false
-    },
-    /**
-     * @description Initialize the lesson
-     * - check the package type and launch the lesson accordingly
-     * - update the content of the current page in the store with data of the page requested
-     */
-    async initLesson() {
-      if (this.lessonStarted) return
-
-      const packageType = this.getModuleInfo.packageType
-      switch (packageType) {
-        case 'scorm': {
-          // launching the lesson (if the lesson is not already completed)
-          const lessonStatus = this.$scorm.GetValue(
-            'cmi.core.lesson_status',
-            true
-          )
-          if (lessonStatus === 'unknown') {
-            this.$scorm.setValue('cmi.core.lesson_status', 'incomplete') // set the lesson status to in complete
-            this.$scorm.Commit() // persist data
-          }
-          //Redirect to current page or to menu if route is module
-          this.$route.name && this.$route.name !== 'module'
-            ? this.$router.push({ name: this.$route.name })
-            : this.$router.push({ name: 'menu' })
-          break
-        }
-        case 'xapi':
-          {
-            this.$route.name && this.$route.name !== 'module'
-              ? this.$router.push({ name: this.$route.name })
-              : this.$router.push({ name: 'menu' })
-          }
-          break
-      }
-      this.lessonStarted = true
-      await this.updateContent(this.$route)
-    },
-    //=============================================================================
-
-    /**
-     * @description save interaction or Module state to scrom suspend_data
-     * @param {String} arg [module|userInteraction| null]
-     */
-    saveToScorm(arg) {
-      arg = arg || null
-      let existingRecord // hold record record
-      let toBeSaved // hold data to send to scorm
-
-      if (this.$scorm.initialized) {
-        if (this.$scorm.GetValue('cmi.suspend_data') !== '')
-          existingRecord = JSON.parse(this.$scorm.GetValue('cmi.suspend_data')) // try convert the scorm record to JSON Obiect
-        // create entry for user data if there is no record in Scorm
-        if (!existingRecord) existingRecord = {}
-
-        // create new entry for user data if does not existe
-        existingRecord.userData = this.getUserInteraction || {}
-        existingRecord.userSettings = this.getApplicationSettings || {}
-        existingRecord.routeHistory = (() => {
-          const history = this.getRouteHistory.toReversed() //get the route history from the last
-          history[0] = this.$route.meta // change the last recored route to the current route
-          return history.toReversed()
-        })()
-        // update value of user data
-        toBeSaved = JSON.stringify(existingRecord) // convert to JSON string format
-
-        this.$scorm.SetValue('cmi.suspend_data', toBeSaved) // converte to serialized string and save to scorm
-        this.$scorm.Commit() // persist data in LMS
-        if (arg === 'disconnect') this.$scorm.Finish()
-      }
-    },
-    /**
-     * @description update content when route change or a page change is requested
-     * - update the information of the current page in the store with data of the page requested
-     *
-     * @param {Object} to destination route
-     */
-    async updateContent(to, caller = null) {
-      this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
-      if (this.getModuleInfo.packageType === 'scorm')
-        this.saveToScorm('userInteraction') //save to scorm
-
-      await this.unload()
-      const { activity_ref: activity_Id, id: page_Id } = to.meta ? to.meta : to
-
-      await this.updateCurrentPage({ activity_Id, page_Id }, caller)
-      this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
-    },
-
-    /**
-     * @description update the route history when navigation happen
-     * @param {Object} from - origin route
-     *
-     */
-    updateRouteHistory(from) {
-      //The route is not in the history: should be push at the end of the history
-      const targetIndex = this.routeData.findIndex((r) => {
-        if (r.type === 'pg_menu' && r.id === from.meta.id) return r
-        else if (
-          `${r.activity_ref}_${r.id}` ===
-          `${from.meta.activity_ref}_${from.meta.id}`
-        )
-          return r
-      })
-
-      //Remove route from history if already in
-      if (targetIndex !== -1) this.routeData.splice(targetIndex, 1)
-
-      // Add route route in history
-      this.routeData.push(from.meta)
-
-      if (this.routeData.length >= 4) this.routeData.shift()
-    },
-
-    /**
-     * @description Helper fonction to launch extra ressource from this activity. Extra ressource is another lesson.
-     * @param {Object} res - Data of the ressource to launch
-     * @param {String} res.url
-     * @param {String} res.id
-     */
-    launchResource(res) {
-      const wrapper = this.$xapi.XAPIWrapper
-      const baseDomain = window.location.origin
-
-      let { endpoint, auth, registration } = wrapper.lrs
-      let { actor, remote } = this.getConnectionInfo
-
-      if (!actor || !remote) return
-
-      actor = encodeURIComponent(JSON.stringify(actor))
-      endpoint = encodeURIComponent(endpoint)
-      registration = encodeURIComponent(registration)
-      auth = encodeURIComponent(auth)
-
-      const activity_id = encodeURIComponent(res.id)
-
-      if (!res.url.includes(baseDomain) && remote)
-        res.url = `${baseDomain}/${res.url}`
-
-      const newUrlToLaunch = `${res.url}?endpoint=${endpoint}&auth=${auth}&actor=${actor}&registration=${registration}&activity_id=${activity_id}`
-      this.routeChangeCounter = 0 //reset counter after saving
-      this.$bus.$emit('fire-exit-event', () => {
-        window.location.replace(newUrlToLaunch)
-      })
-    },
-
-    /**
-     * @description start the tutorial for first time users
-     * @requires '../assets/data/onboardingMessages.json'
-     * @param {Object} [onboardingMessages] the object for the messages of the tutorial
-     */
-    startOnboarding(onboardingMessages) {
-      if (onboardingMessages) {
-        if (this.getOnboardingEnabled) {
-          //flags error for OnboardingMessages
-          this.validateOnboardingMessages(onboardingMessages)
-          try {
-            this.onboardingMessages = onboardingMessages
-            this.nextOnboarding('message_1')
-          } catch (e) {
-            //fetch default values for popups
-            this.onboardingMessages = import(
-              '../assets/data/onboardingMessages.json'
-            )
-            this.nextOnboarding('message_1')
-          }
-        }
-      } else {
-        if (this.getOnboardingEnabled) {
-          this.onboardingMessages = import(
-            '../assets/data/onboardingMessages.json'
-          )
-          this.nextOnboarding('message_1')
-        }
-      }
-    },
-
-    /**
-     * @description start the tutorial for first time users
-     * @param {String} nextMessage name of the following messsage
-     */
-    nextOnboarding(nextMessage) {
-      let messages = this.onboardingMessages
-      //create message_X variable to put in cb_$confirm
-      let postNextMessage = 'message_' + (parseInt(nextMessage.slice(8)) + 1)
-
-      if (messages[postNextMessage]) {
-        //add something to the cb_$confirm to nextOnboarding
-        messages[nextMessage].value.cb_$confirm = () => {
-          this.nextOnboarding(postNextMessage)
-        }
-        //to apply the target to tooltip before the mounted happens
-        if (messages[postNextMessage].type == 'tooltip') {
-          this.toolTipTarget = messages[postNextMessage].value.target
-        }
-      }
-      //check if the next message is a popup or other componant
-      if (messages[nextMessage].type == 'popup-avert') {
-        this.openPopup(messages[nextMessage])
-      } else if (messages[nextMessage].type == 'tooltip') {
-        this.openToolTip(messages[nextMessage].value)
-      }
-    },
-    /**
-     * @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 = main ? main : 'wrapper-content' // search for node element specified as main
-
-      //fires event
-      this.$bus.$emit('move-to-target', skipTo, {
-        top: 100, // offset target top to 100 pixel
-        left: 0,
-        behavior: 'auto'
-      })
-
-      this.$analytics.sendEvent('skip_to_main_content')
-    },
-
-    /**
-     * @description validate the OnboardingMessages
-     * @param {Object} onboardingMessages
-     * @returns {Boolean} false if valid onboardingMessages || true if invalid onboardingMessages
-     */
-    validateOnboardingMessages(onboardingMessages) {
-      let err = false
-      let errorList = [] //array for errors dectected
-      if (onboardingMessages && typeof onboardingMessages == 'object') {
-        //check the list of attributes is message_X
-        let listMessage = Object.keys(onboardingMessages)
-        for (let index = 1; index <= listMessage.length; index++) {
-          const element = listMessage[index - 1]
-          if (element == 'message_' + index) {
-            if (
-              onboardingMessages[element] &&
-              typeof onboardingMessages[element] == 'object'
-            ) {
-              if (
-                onboardingMessages[element].type &&
-                typeof onboardingMessages[element].type == 'string'
-              ) {
-                //checks if is tooltip
-                if (onboardingMessages[element].type == 'tooltip') {
-                  let tooltip = onboardingMessages[element]
-                  if (tooltip.value && typeof tooltip.value == 'object') {
-                    //check title
-                    if (
-                      !tooltip.value.title ||
-                      typeof tooltip.value.title !== 'string'
-                    ) {
-                      //flags error
-                      errorList.push('message_' + index + ' type value title')
-                      console.warn(
-                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
-                          index +
-                          ' type value title is incorrect',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-                    //check content
-                    if (
-                      !tooltip.value.content ||
-                      typeof tooltip.value.content !== 'string'
-                    ) {
-                      //flags error
-                      errorList.push('message_' + index + ' type value content')
-                      console.warn(
-                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
-                          index +
-                          ' type value content is incorrect',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-                    //check target
-                    if (
-                      tooltip.value.target &&
-                      typeof tooltip.value.target == 'string'
-                    ) {
-                      //check if target is exist
-                      let target = tooltip.value.target
-                      //@todo
-                      if (!document.getElementById(target)) {
-                        //flags error
-                        errorList.push(
-                          'message_' + index + ' type value target'
-                        )
-                        console.warn(
-                          '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
-                            index +
-                            ' type value target is not found in page',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      }
-                    } else {
-                      //flags error
-                      errorList.push('message_' + index + ' type value target')
-                      console.warn(
-                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
-                          index +
-                          ' type value target is incorrect',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-                  } else {
-                    //flags error
-                    errorList.push('message_' + index + ' type value')
-                    console.warn(
-                      '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
-                        index +
-                        ' type value is incorrect',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                }
-              } else {
-                //flags error
-                errorList.push('message_' + index + ' type')
-                console.warn(
-                  '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
-                    index +
-                    ' type is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              }
-            } else {
-              //flags error
-              errorList.push('message_' + index + ' typeof')
-              console.warn(
-                '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
-                  index +
-                  ' is not an object',
-                'background: orange; color: white; display: block; margin:5px;'
-              )
-            }
-          } else {
-            //flags error
-            errorList.push('onboardingMessages keys')
-            console.warn(
-              '%c WARNING!>>> appBaseModule: Your onboardingMessages keys does not follow "message_[number]" naming',
-              'background: orange; color: white; display: block; margin:5px;'
-            )
-          }
-        }
-      } else {
-        //flags error
-        errorList.push('onboardingMessages')
-        console.warn(
-          '%c WARNING!>>> appBaseModule: Your onboardingMessages is not an Object',
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-      }
-      // all item have required field. There is no error
-      if (!errorList.length) err = false
-      //return list of error
-      else err = errorList
-
-      return err
-    },
-
-    /**
-     * @description Reset the focus the element
-     * @param {HTMLElement} e - element that will get focus
-     */
-    resetFocus(e) {
-      if (e) e.focus()
-    },
-
-    handleRightSidebarScroll(event) {
-      let scrollHeight = null
-      let clientHeight = null
-      let scrollTop = null
-
-      scrollHeight = event.target.scrollHeight
-      clientHeight = event.target.clientHeight
-      scrollTop = event.target.scrollTop
-
-      // //Set scroll limit reached at 150px above the document height.
-      let scrollLimit = scrollHeight - 150
-      let fullyScrolled = Math.round(clientHeight + scrollTop)
-
-      //consider page completed when scrolled value has reached or passed set limit
-      if (fullyScrolled >= scrollLimit) {
-        event.target.removeEventListener(
-          'scroll',
-          this.handleRightSidebarScroll
-        )
-        let { userInteraction } = this.getCurrentBranchPage // Get the current branch page opened in the sidebar
-
-        this.getCurrentBranchPage.state = 'completed' // update the state of this branch
-        userInteraction.state = this.getCurrentBranchPage.state //update userInteraction state
-
-        setTimeout(() => this.$bus.$emit('branch-page-viewed'), 20)
-      }
-    },
-    getRightSidebar() {
-      let rSidebar = null
-      rSidebar = document.getElementById('right-sidebar')
-      if (!rSidebar) return
-      const rSidebarContent = rSidebar.querySelector(`#right-sidebar-body`)
-      return rSidebarContent
-    },
-
-    startTimeout() {
-      this.timeOut = setTimeout(() => {
-        this.cancelTimeout()
-      }, 3000)
-    },
-    cancelTimeout() {
-      if (this.timeOut) {
-        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 ||
-        !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 thisActivityServerState =
-            this.getUserInteraction[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
-          const activityDuration = this.appTimer.getTime()
-          stmt = {
-            id: this.getCurrentPage.activityRef,
-            verb: 'completed',
-            definition: text,
-            description: text,
-            extensions: [
-              {
-                id: 'user-data',
-                content: {
-                  routeHistory: this.getRouteHistory,
-                  ...lessonsData
-                }
-              }
-            ],
-            duration: this.appTimer.ISOTimeParser(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.appTimer.ISOTimeParser(this.lessonDuration),
-              completion: true
-            }
-            this.lessonCompletionStatus = true // set the status of this lesson as completed
-            let completedState = {
-              duration: this.appTimer.ISOTimeParser(this.lessonDuration),
-              completion: this.lessonCompletionStatus
-            }
-            this.setCompletionState(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) 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 thisActivityServerState = this.getUserInteraction[id]
-        ? this.getUserInteraction[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">
-.module {
-  width: 100%;
-  height: 100%;
-  min-height: 100vh;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-}
-
-.skip-link {
-  position: absolute;
-  left: -999px;
-  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;
-}
-
-#right-sidebar {
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  max-width: 780px;
-  width: 30%;
-  height: 100%;
-  overflow: hidden;
-  position: fixed;
-  right: 0;
-  top: 0;
-  background-color: #ffffff;
-  -webkit-box-shadow: -2px 1px 6px -1px rgb(0 0 0 / 40%);
-  box-shadow: -2px 1px 6px -1px rgb(0 0 0 / 40%);
-
-  #right-sidebar-header {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    padding: 32px 20px 0 32px;
-
-    .embranchement-close {
-      padding: 11px 13px;
-    }
-  }
-
-  #right-sidebar-body {
-    max-height: 90%;
-    overflow-y: auto;
-  }
-}
-
-.right-sidebar-transition-enter-active {
-  transition: transform 0.33s ease-out;
-}
-
-.right-sidebar-transition-leave-active {
-  transition: transform 0.16s;
-}
-
-.right-sidebar-transition-enter-from,
-.right-sidebar-transition-leave-to {
-  transform: translateX(100%);
-}
-</style>
+<!--
+ *@ 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.
+ *
+ *@Note :Must be used
+-->
+
+<template>
+  <div fluid class="module">
+    <span
+      id="page_info_section"
+      class="sr-only"
+      aria-labelledby="page_info"
+    ></span>
+    <a class="skip-link" href="" @click.prevent="skipToMain">
+      {{ $t('message.skip_content') }}
+    </a>
+
+    <nav
+      v-show="!isMenu"
+      id="navTool"
+      :key="$route.fullpath"
+      class="app-nav"
+      :class="{ show: closeDelay }"
+    >
+      <app-comp-navigation
+        :app-status="appReady ? true : null"
+        :auto-navigate="theNavigationBetweenActivity"
+      />
+    </nav>
+    <base-module :m-data="$data">
+          
+
+      <v-container
+        id="wrapper-content"
+        fluid
+        :class="{ active: moduleConfig.videoFull }"
+        class="scroll-bar"
+      >
+        <div class="box">
+          <router-view ref="main" :key="$route.fullPath" />
+          <!-- <router-view v-show="appReady" ref="main" :key="$route.fullPath" /> -->
+        </div>
+
+        <div id="primary_nav_wrapper"></div>
+      </v-container>
+    </base-module>
+
+    <!------------------POPUP QUICK -------------------------->
+    <app-comp-pop-up-next v-show="popupIsOpen">
+      <!-- <template #content></template> -->
+    </app-comp-pop-up-next>
+    <!------------------END USE POP UP-------------------------->
+
+    <!--------------RIGHT SIDEBAR (for display of extra contents)------------>
+    <Transition name="right-sidebar-transition" mode="out-in">
+      <section
+        v-if="rightSidebarVisible"
+        id="right-sidebar"
+        ref="right-sidebar"
+        :key="dynamicSidebarContent._id"
+        :aria-label="$t('label.side_panel')"
+        :class="{
+          'v-media': dynamicSidebarContent._context === 'ctxTranscript'
+        }"
+      >
+        <div id="right-sidebar-header">
+          <app-base-button
+            :title="$t('button.closePopUp')"
+            :aria-label="$t('button.closePopUp')"
+            class="btn-reserve-ico embranchement-close"
+            @click="
+              closeSidebar(
+                dynamicSidebarContent._context,
+                dynamicSidebarContent._container
+                  ? dynamicSidebarContent._container
+                  : null
+              )
+            "
+          >
+            <svg aria-hidden="true" focusable="false">
+              <use href="#close-square-icon" />
+            </svg>
+          </app-base-button>
+        </div>
+        <div id="right-sidebar-body">
+          <component
+            :is="dynamicSidebarContent._component"
+            class="v-media"
+            v-bind="{ ...dynamicSidebarContent._comProps }"
+          />
+          <!-- </Transition> -->
+        </div>
+        <div id="right-sidebar-footer"></div>
+      </section>
+    </Transition>
+    <footer></footer>
+    <!-------------------------END RIGHT SIDEBAR------------------------------->
+  </div>
+</template>
+<script>
+// const modules = import.meta.glob('@/module/**/*.vue')
+import { fileAssets } from '../shared/generalfuncs.js'
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import BaseModule from './BaseModule.vue'
+import AppCompContainer from './AppCompContainer.vue'
+import { defineAsyncComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+//import
+export default {
+  components: {
+    BaseModule,
+    AppCompContainer
+  },
+  inject: ['elapsedIdleTime', 'lessonDuration', 'appTimer'],
+  props: {
+    moduleConfig: {
+      type: Object,
+      default: () => {
+        return {
+          allowNavigationToActivity: false, // set Previous/Next can allow navigation between activities. Set to  false if do not want navigation between activities with Previous/Next
+          main: ''
+        }
+      }
+    }
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  data() {
+    return {
+      meta: {},
+      videoFull: null,
+      routeData: [],
+      changePage: false,
+      randKey: Math.floor(Math.random() * 10001),
+      popupIsOpen: false,
+      hidePlayBar: false, // Controle visibility of the play bar. set to true to hide play bar
+      stmt: null, // holder for xapi statememt,
+      routeChangeCounter: 0,
+      toolTipTarget: '', //for the tool tip,
+      onboardingMessages: {}, //for the onboarding @todo replace with default file
+      settingsSelected: {},
+      compID: null,
+      rightSidebarVisible: false,
+      lastInFocus: null,
+      closeDelay: false,
+      timeOut: null,
+      infocusTabIndex: null,
+      transcriptVisible: false,
+      transcriptContent: null,
+      transcriptContainer: null,
+      branchingVisible: false,
+      customContentVisible: false,
+      customContent: null,
+      lessonCompletionStatus: false,
+      rightSidebarEvent: new CustomEvent('sidebarEvent', {
+        bubbles: true,
+        detail: {
+          text: () => 'this is a test',
+          name: 'sidebarEvent'
+        }
+      }),
+      lessonStarted: false
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getCurrentPage',
+      'getCurrentBranchPage',
+      'getAppStatus',
+      'getUserInteraction',
+      'getModuleInfo',
+      'getAllActivities',
+      'getAllCompleted',
+      'getConnectionInfo',
+      'hasMediaElOrTimeline',
+      'getMenuSettings',
+      'getRouteHistory',
+      'getOnboardingEnabled',
+      'getApplicationSettings',
+      'getCompStatusTracker',
+      'getLessonPosition',
+      'getCompletionState'
+    ]),
+    isMenu() {
+      return this.$route.name === 'menu'
+    },
+    appReady() {
+      return this.getAppStatus === 'ready' ? true : false
+    },
+    hasMedia() {
+      return typeof this.hasMediaElOrTimeline === 'object'
+    },
+    activityHasChanged() {
+      const rd = this.routeData.toReversed()
+
+      const routeWasMenu =
+        this.$router.options.history.state.back &&
+        this.$router.options.history.state.back.includes('menu')
+
+      if (
+        rd.length <= 1 ||
+        rd[0].activity_ref !== this.$route.meta.activity_ref ||
+        routeWasMenu
+      )
+        return true
+      else return false
+    },
+    /**
+     * @description Set the id the module
+     */
+    theId() {
+      let id = 'mod_001'
+      if (this.moduleConfig.id) id = this.moduleConfig.id
+      return id
+    },
+    /**
+     * @description Set the title of the lesson
+     */
+    theTitle() {
+      let title = this.$t(`text.place_holder.for_lesson_title`)
+
+      if (this.getMenuSettings.lessonTitle)
+        title = this.getMenuSettings.lessonTitle
+      return title
+    },
+    /**
+     * @description Set desciption for the module
+     *
+     */
+    theDescription() {
+      let description = null
+
+      if (this.moduleConfig.description)
+        description = this.moduleConfig.description
+      return description
+    },
+    /**
+     * @description set Previous/Next can allow navigation between activities.
+     *
+     */
+    theNavigationBetweenActivity() {
+      let navBwteenActivity = false
+      if (this.moduleConfig.allowNavigationToActivity)
+        navBwteenActivity = this.moduleConfig.allowNavigationToActivity
+      return navBwteenActivity
+    },
+    /**
+     * @description Control use INTRODUCTION page in the Lesson.
+     *              set to false if there is no introduction
+     */
+    theIntroIsActivated() {
+      let introActive = false
+      if (this.moduleConfig.introActive)
+        introActive = this.moduleConfig.introActive
+      return introActive
+    },
+    isMain() {
+      const { main } = this.moduleConfig
+      if (!main || main === ' ') return this.$route.meta.id
+
+      let mainEl = document.querySelector(`#${main}`)
+
+      if (!mainEl) return this.$route.meta.id
+
+      return mainEl
+    },
+    dynamicSidebarContent() {
+      if (
+        !this.transcriptVisible &&
+        !this.branchingVisible &&
+        !this.customContentVisible
+      )
+        return null
+      let sidebarSettings = {}
+      let _label = null
+      //=========================================
+      switch (true) {
+        case this.transcriptVisible:
+          _label =
+            this.$i18n.locale === 'fr'
+              ? 'Contenu de la transcription'
+              : 'Content of the transcript'
+
+          sidebarSettings = {
+            _component: AppCompContainer,
+            _comProps: {
+              content: this.transcriptContent,
+              id: 'transcript-content'
+            },
+            _context: 'ctxTranscript',
+            _container: this.transcriptContainer,
+            _label,
+            _id: 'transcript'
+          }
+          break
+
+        case this.branchingVisible: {
+          const allActivities = fileAssets.getActivities()
+          if (this.$route.meta.type !== 'branching' || !this.compID) return null
+
+          const componentName = this.compID
+          const { activityRef } = this.getCurrentPage //get activity id from current page
+
+          _label =
+            this.$i18n.locale === 'fr'
+              ? "contenu de l'embranchement"
+              : 'content of the branching'
+
+          sidebarSettings = {
+            _component: defineAsyncComponent(async () => {
+              const compFile = allActivities.filter((f) => {
+                return f.name.includes(`/${activityRef}/${componentName}`)
+              })[0]
+
+              return compFile.content
+            }),
+
+            _comProps: false,
+            _context: 'ctxBranching',
+            _label,
+            _id: componentName
+          }
+          break
+        }
+
+        case this.customContentVisible:
+          sidebarSettings = {
+            _component: AppCompContainer,
+            _comProps: {
+              content: this.customContent
+            },
+            _context: 'ctxCustomContent',
+            _label,
+            _id: 'custom-content'
+          }
+          break
+      }
+
+      return sidebarSettings
+    },
+    navigationHistory() {
+      return this.getRouteHistory
+    }
+  },
+  watch: {
+    navigationHistory: {
+      handler() {
+        this.routeData = this.navigationHistory
+      },
+      deep: true,
+      immediate: true
+    },
+    $route: {
+      handler(newValue) {
+        this.getFocusables().then((r) => {
+          //Pressing Tab or Shit + tab should make it possible to cycle focus through them
+          if (!r) return
+          r[0].focus()
+          this.infocusTabIndex = r[0]
+        })
+
+        //update the routeChangeCounter when navigation
+        if (this.routeChangeCounter < 3) this.routeChangeCounter += 1
+
+        /*
+         *Start Timer on New activities
+         */
+
+        const trackedRouteType = [
+          'introduction',
+          'conclusion',
+          'normal',
+          'branching'
+        ]
+        if (trackedRouteType.includes(this.$route.meta.type)) {
+          //Navigation should only trigger timer and xapi statement when app is ready and activity has changed
+          if (!this.activityHasChanged || !this.appReady) return
+
+          //Start the timer every time route is a new activity
+          this.$bus.$emit('start-timer')
+          //Send statement when activity as changed
+          this.sendStartStatement({ id: this.$route.meta.activity_ref })
+        }
+        this.transcriptVisible = false
+      },
+      deep: true,
+      immediate: true
+    },
+
+    appReady: {
+      async handler(newValue) {
+        //Should only start timer when the app has fully loaded
+
+        if (!this.lessonStarted) this.initLesson()
+
+        if (this.activityHasChanged && newValue) {
+          this.$bus.$emit('start-timer')
+        }
+      },
+      immediate: true
+    },
+
+    /**
+     * @description Defined in Store Watch all completed activities to send a lesson completion statement
+     */
+    getAllCompleted: {
+      handler() {
+        // Check once the server to set the completion status of the lesson
+        if (this.getCompletionState) {
+          const completedState = this.getCompletionState
+
+          this.lessonCompletionStatus =
+            !completedState || !completedState.completion
+              ? false
+              : completedState.completion
+        }
+
+        if (!this.lessonCompletionStatus) this.sendCompletionStatus('LESSON')
+      },
+      deep: true,
+      immediate: true
+    },
+    /**
+     * @description Defined in timerMixin Watch The epalsed time for autosaving the user reached position
+     */
+    elapsedIdleTime: {
+      handler() {
+        if (this.appTimer.getTimerState() !== 'started') return
+
+        //send a statement every x time (second)
+        if (
+          this.elapsedIdleTime % 500 === 0 &&
+          this.getModuleInfo.packageType === 'xapi' &&
+          this.getConnectionInfo &&
+          this.getConnectionInfo.actor &&
+          this.getConnectionInfo.remote
+        ) {
+          const lessonPosition = this.getLessonPosition
+
+          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
+          ) {
+            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
+            }
+
+            //Creating custom statment
+            const stmt = {
+              verb: 'progressed',
+              definition: text,
+              description: text,
+              extensions: [
+                {
+                  id: 'ending-point',
+                  content: (() =>
+                    this.$route.name == 'menu'
+                      ? this.$helper.getRoutesFromVueRouter().meta.children[0]
+                          ._namedRoute
+                      : this.$route.name)()
+                }
+              ],
+              duration: this.appTimer.ISOTimeParser(this.lessonDuration)
+            }
+
+            this.$bus.$emit('send-xapi-statement', stmt)
+            this.routeChangeCounter = 0 //reset counter after saving
+          }
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  beforeUnmount() {
+    //Communication events
+    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() {
+    let lessonLabel, lessonNumber, lessonTitle, titleString
+    lessonLabel = this.$t('text.lesson')
+    lessonNumber = this.moduleConfig.id.replace('module_', '')
+    lessonTitle = this.theTitle
+    titleString = lessonLabel + ' ' + lessonNumber + ' – ' + lessonTitle
+
+    //Remove prefix for introduction or conclusion, according to isIntroConclu setting in Module.vue
+    if (typeof this.moduleConfig.isIntroConclu !== 'undefined') {
+      if (this.moduleConfig.isIntroConclu) {
+        titleString = lessonTitle
+      }
+    }
+    document.title = titleString
+    document.addEventListener('sidebarEvent', (e) => {
+      // e. e.checkVisibility()
+      this.$bus.$emit(
+        'side-bar-open',
+        e.target.checkVisibility({
+          opacityProperty: true,
+          visibilityProperty: true,
+          contentVisibilityAuto: true
+        })
+      )
+    })
+    // Tell the store the state of intro and conclusion
+    this.updateIntroStatus(this.theIntroIsActivated)
+    //Communication events
+    this.$bus.$on('open-popup', this.openPopup)
+
+    this.$bus.$on('close-popup', this.closePopup)
+
+    this.$bus.$on('start-onboarding', this.startOnboarding)
+
+    this.$bus.$on('open-sidebar', this.openSidebar)
+
+    this.$bus.$on('close-sidebar', this.closeSidebar)
+
+    this.$bus.$on('videoFullScreen', this.onVideoFullScreen)
+
+    this.$bus.$on('save-to-scorm', this.saveToScorm)
+
+    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)
+
+    if (this.navigationHistory.length != 0) {
+      this.routeData = this.navigationHistory
+    }
+    setTimeout(() => {
+      this.settingsSelected = { ...this.getApplicationSettings }
+    }, 800)
+  },
+  mounted() {
+    let nav = document.getElementById('navTool')
+
+    if (nav) nav.addEventListener('mouseleave', this.onNavMouseleave)
+
+    document.addEventListener('keydown', this.handleKeyboardControls)
+  },
+  methods: {
+    ...mapActions(useAppStore, [
+      'updateIntroStatus',
+      'updateCurrentTimeline',
+      'updateCurrentMediaElements',
+      'updateCurrentPage',
+      'updatesideBIsOpen',
+      'setCompletionState',
+      'updatepopIsOpen'
+    ]),
+    onNavMouseleave() {
+      let widgetOpen = document.getElementsByClassName('open')
+
+      if (widgetOpen.length == 0) {
+        this.cancelTimeout()
+        this.closeDelay = true
+        this.startTimeout()
+      } else {
+        this.closeDelay = true
+      }
+    },
+    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 () {
+          const getAllFocusables = () => {
+            const listItems = document.querySelectorAll('.v-media')
+            if (!listItems || !listItems.length) return null
+            return Array.from(listItems)
+          }
+          resolve(getAllFocusables())
+        }, 200)
+      })
+    },
+    /**
+     * @description Handle Keyboard controls
+     * @summary
+     * @param {Object} evt  - event that fired the action
+     *
+     */
+    async handleKeyboardControls(evt) {
+      let { code } = evt
+
+      if (code === 'Escape' && this.rightSidebarVisible) {
+        this.closeSidebar(this.dynamicSidebarContent._context)
+      }
+    },
+
+    /**
+     * @description open the right sidebar component and show and set it content
+     * @summary opens sidebar according to context
+     * @param {Object} obj {ctx , e} - context and content to display in the sidebar
+     *
+     */
+    openSidebar(obj) {
+      if (!obj || !obj.ctx || !obj.e) return
+      const wrapper = obj.w ? obj.w : null
+      this.lastInFocus = document.activeElement
+      const { ctx, e: content, persist = false } = obj
+
+      switch (ctx) {
+        case 'ctxTranscript':
+          this.openTranscript(content, wrapper)
+          break
+
+        case 'ctxBranching':
+          if (this.compID === content && !persist)
+            return this.closeSidebar('ctxBranching')
+
+          this.openBranchContent(content)
+          break
+        case 'ctxCustomContent':
+          this.displayCustomContent(content, wrapper)
+          break
+      }
+      //delay animation
+      this.rightSidebarVisible = true
+      this.updatesideBIsOpen(this.rightSidebarVisible)
+      // setTimeout(() => {
+      const rightSidebarContent = this.getRightSidebar() // Emelent displayed in the sidebar-body
+      if (!rightSidebarContent) return
+      rightSidebarContent.scrollTop = 0
+      const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+      rSidebar.dispatchEvent(this.rightSidebarEvent)
+      rSidebar.setAttribute('tabindex', -1)
+      this.resetFocus(rSidebar) //set focus on the sidebar
+      // }, 100)
+    },
+    /**
+     * @description close the right sidebar component
+     * @summary close sidebar according to context
+     * @param {String}  ctx - context in which side bar was opened and will now be closed
+     *
+     */
+    closeSidebar(ctx, wrapper = null) {
+      //delay animation
+      this.rightSidebarVisible = false //
+      setTimeout(() => {
+        const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+        if (!rSidebar) return
+        rSidebar.setAttribute('style', 'display:none')
+        rSidebar.dispatchEvent(this.rightSidebarEvent) //this will allow to run the animation of sidebar closing 1rst
+      }, 100)
+      this.resetFocus(this.lastInFocus)
+      switch (ctx) {
+        case 'ctxTranscript':
+          this.closeTranscript(wrapper)
+          break
+
+        case 'ctxBranching':
+          this.closeBranchContent()
+          break
+
+        case 'ctxCustomContent':
+          this.closeCostumContent()
+          break
+
+        default:
+          this.branchingVisible = false
+          this.transcriptVisible = false
+          this.customContentVisible = false
+          this.transcriptContent = null
+          this.customContent = null
+          this.compID = null
+      }
+      this.updatesideBIsOpen(this.rightSidebarVisible)
+    },
+    /**
+     * @description to close a pop up (not currently used)
+     * @param {Function} [cb]
+     * @fires popup-close to AppBasePopup.vue
+     */
+    closePopup(cb) {
+      this.popupIsOpen = false
+      this.$bus.$emit('popup-close', cb)
+      this.updatepopIsOpen(this.popupIsOpen) //update information in  store
+    },
+    /**
+     * @description to open a pop up
+     * @param {Object} data the content op the popup
+     * @fires popup-open to AppBasePopup.vue
+     */
+    openPopup(data) {
+      this.popupIsOpen = true
+      this.$bus.$emit('popup-open', data) // Use to send message to popUp component
+      this.updatepopIsOpen(this.popupIsOpen) //update information in  store
+    },
+
+    /**
+     * @description to close a popover
+     * @fires tooltip-close to AppCompToolTip.vue
+     */
+    closeToolTip() {
+      this.$bus.$emit('tooltip-close')
+    },
+
+    /**
+     * @description to open a popover
+     * @param {Object} data the options of the popover
+     * @fires tooltip-open to AppCompToolTip.vue
+     */
+    openToolTip(data) {
+      this.$bus.$emit('tooltip-open', data) // Use to send message to tooltip component
+    },
+
+    /**
+     * @description Manage opening of sidebar in transcript context
+     * @summary set the value of the transcriptContent and transcripVisibility
+     * @param {Object} c content to display in the sidebar
+     */
+
+    openTranscript(c, container) {
+      if (!c) return (this.transcriptVisible = false)
+      //Change transcript content
+      if (this.transcriptContent !== c) this.transcriptContent = c
+
+      this.transcriptContainer = container
+      this.transcriptVisible = true
+    },
+    /**
+     * @description Manage closing of sidebar in transcript context
+     * @summary reset the value of the transcriptContent and transcripVisibility
+     * @fires 'transcript-hidden'  to AppCompPlaybar
+     */
+    closeTranscript(container = this.transcriptContainer) {
+      let t = this.customContentVisible ? 10 : 200
+      setTimeout(() => {
+        this.transcriptContent = null
+        this.transcriptVisible = false
+      }, t)
+      this.$bus.$emit('transcript-hidden')
+      this.$bus.$emit('resize-media', 'lg', container)
+    },
+
+    /**
+     * @description Handle the content of the branch page to display in the right sidebar.
+     * @summary When call set the value of compID and the branching visibility Attach lister for scroll event in the sidebar
+     * @param {Object} branchID - ID OF the Component That to retrieve
+     * @fires 'branch-page-viewed' to $PageMixins when scroll in branch page reaches the bottom
+     */
+    openBranchContent(branchID) {
+      this.branchingVisible = true
+      this.compID = branchID //set compenent ID
+      setTimeout(() => {
+        const rightSidebar = this.getRightSidebar()
+        //Should indicate that page is completed when the Rightsidebar content heigh is less then window height
+        if (rightSidebar.scrollHeight <= window.innerHeight) {
+          if (!this.getCurrentBranchPage) return
+          let { userInteraction } = this.getCurrentBranchPage // Get the current branch page opened in the sidebar
+          this.getCurrentBranchPage.state = 'completed' // update the state of this branch
+          userInteraction.state = this.getCurrentBranchPage.state //update userInteraction state
+          this.$bus.$emit('branch-page-viewed')
+        }
+
+        rightSidebar.addEventListener('scroll', this.handleRightSidebarScroll)
+      }, 300)
+    },
+
+    /**
+     * @description Close the branch page in the right sidebar
+     * and update the current page data with the parent of the branch page
+     *
+     * @summary When call remove listner for scroll event in the sidebar , reset compID and branch visibility
+     * @fires 'branching-hidden' to AppCompButtonProgress
+     */
+    closeBranchContent() {
+      const rightSidebar = this.getRightSidebar()
+
+      if (!rightSidebar) return
+
+      rightSidebar.removeEventListener('scroll', this.handleRightSidebarScroll)
+
+      setTimeout(() => {
+        this.compID = null //reset the comp
+        this.branchingVisible = false
+      }, 300)
+      this.$bus.$emit('branching-hidden')
+      this.updateContent(this.$route) // update the content of the current page
+    },
+
+    displayCustomContent(c, container) {
+      if (!c) return (this.customContentVisible = false)
+      //Change transcript content
+      if (this.transcriptVisible) this.closeTranscript()
+      //Change transcript content
+      this.customContent = c
+      this.customContentContainer = container
+      this.customContentVisible = true
+    },
+
+    closeCostumContent() {
+      this.customContentContainer = null
+      this.customContentVisible = false
+    },
+
+    /**
+     * @description reset the values of state (currentTimeline,currentMedialement, currentPage, media duration, appStatus')in the store
+     */
+    async unload() {
+      if (!this.getCurrentPage || Object.keys(this.getCurrentPage).length == 0)
+        return
+
+      return new Promise((res) => {
+        this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
+        this.updateCurrentTimeline(null)
+        this.updateCurrentMediaElements([])
+        // this.updateCurrentPage({})
+        this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
+        res(this.getCompStatusTracker)
+      })
+    },
+
+    /**
+     * @description get User data
+     */
+    async fetchUserData() {
+      const fetched = await new Promise((resolve) => {
+        // get user saved data after 200 milliseconds
+        setTimeout(() => {
+          resolve(this.getUserInteraction)
+        }, 200)
+      })
+      return fetched
+    },
+
+    /**
+     * @description format data from a page
+     * @param {Object} page
+     */
+    formateData(page) {
+      if (page && page.type === 'pg_media') {
+        const {
+          id,
+          animation,
+          type,
+          mediaData: { mSources, mType, mSubtitle, mPoster, mTranscript },
+          timeline,
+          mElement
+        } = page
+        return {
+          id,
+          animation,
+          type,
+          mSources,
+          mType,
+          mSubtitle,
+          timeline,
+          mElement,
+          mPoster,
+          mTranscript
+        }
+      } else if (page && page.type === 'pg_animation') {
+        const { id, animation, type, timeline } = page
+        return {
+          id,
+          animation,
+          type,
+          timeline
+        }
+      } else return false
+    },
+    /**
+     * @description Initialize the lesson
+     * - check the package type and launch the lesson accordingly
+     * - update the content of the current page in the store with data of the page requested
+     */
+    async initLesson() {
+      if (this.lessonStarted) return
+
+      const packageType = this.getModuleInfo.packageType
+      switch (packageType) {
+        case 'scorm': {
+          // launching the lesson (if the lesson is not already completed)
+          const lessonStatus = this.$scorm.GetValue(
+            'cmi.core.lesson_status',
+            true
+          )
+          if (lessonStatus === 'unknown') {
+            this.$scorm.setValue('cmi.core.lesson_status', 'incomplete') // set the lesson status to in complete
+            this.$scorm.Commit() // persist data
+          }
+          //Redirect to current page or to menu if route is module
+          this.$route.name && this.$route.name !== 'module'
+            ? this.$router.push({ name: this.$route.name })
+            : this.$router.push({ name: 'menu' })
+          break
+        }
+        case 'xapi':
+          {
+            this.$route.name && this.$route.name !== 'module'
+              ? this.$router.push({ name: this.$route.name })
+              : this.$router.push({ name: 'menu' })
+          }
+          break
+      }
+      this.lessonStarted = true
+      await this.updateContent(this.$route)
+    },
+    //=============================================================================
+
+    /**
+     * @description save interaction or Module state to scrom suspend_data
+     * @param {String} arg [module|userInteraction| null]
+     */
+    saveToScorm(arg) {
+      arg = arg || null
+      let existingRecord // hold record record
+      let toBeSaved // hold data to send to scorm
+
+      if (this.$scorm.initialized) {
+        if (this.$scorm.GetValue('cmi.suspend_data') !== '')
+          existingRecord = JSON.parse(this.$scorm.GetValue('cmi.suspend_data')) // try convert the scorm record to JSON Obiect
+        // create entry for user data if there is no record in Scorm
+        if (!existingRecord) existingRecord = {}
+
+        // create new entry for user data if does not existe
+        existingRecord.userData = this.getUserInteraction || {}
+        existingRecord.userSettings = this.getApplicationSettings || {}
+        existingRecord.routeHistory = (() => {
+          const history = this.getRouteHistory.toReversed() //get the route history from the last
+          history[0] = this.$route.meta // change the last recored route to the current route
+          return history.toReversed()
+        })()
+        // update value of user data
+        toBeSaved = JSON.stringify(existingRecord) // convert to JSON string format
+
+        this.$scorm.SetValue('cmi.suspend_data', toBeSaved) // converte to serialized string and save to scorm
+        this.$scorm.Commit() // persist data in LMS
+        if (arg === 'disconnect') this.$scorm.Finish()
+      }
+    },
+    /**
+     * @description update content when route change or a page change is requested
+     * - update the information of the current page in the store with data of the page requested
+     *
+     * @param {Object} to destination route
+     */
+    async updateContent(to, caller = null) {
+      this.$bus.$emit('set-comp-status', 'appBaseModule', 'loading')
+      if (this.getModuleInfo.packageType === 'scorm')
+        this.saveToScorm('userInteraction') //save to scorm
+
+      await this.unload()
+      const { activity_ref: activity_Id, id: page_Id } = to.meta ? to.meta : to
+
+      await this.updateCurrentPage({ activity_Id, page_Id }, caller)
+      this.$bus.$emit('set-comp-status', 'appBaseModule', 'ready')
+    },
+
+    /**
+     * @description update the route history when navigation happen
+     * @param {Object} from - origin route
+     *
+     */
+    updateRouteHistory(from) {
+      //The route is not in the history: should be push at the end of the history
+      const targetIndex = this.routeData.findIndex((r) => {
+        if (r.type === 'pg_menu' && r.id === from.meta.id) return r
+        else if (
+          `${r.activity_ref}_${r.id}` ===
+          `${from.meta.activity_ref}_${from.meta.id}`
+        )
+          return r
+      })
+
+      //Remove route from history if already in
+      if (targetIndex !== -1) this.routeData.splice(targetIndex, 1)
+
+      // Add route route in history
+      this.routeData.push(from.meta)
+
+      if (this.routeData.length >= 4) this.routeData.shift()
+    },
+
+    /**
+     * @description Helper fonction to launch extra ressource from this activity. Extra ressource is another lesson.
+     * @param {Object} res - Data of the ressource to launch
+     * @param {String} res.url
+     * @param {String} res.id
+     */
+    launchResource(res) {
+      const wrapper = this.$xapi.XAPIWrapper
+      const baseDomain = window.location.origin
+
+      let { endpoint, auth, registration } = wrapper.lrs
+      let { actor, remote } = this.getConnectionInfo
+
+      if (!actor || !remote) return
+
+      actor = encodeURIComponent(JSON.stringify(actor))
+      endpoint = encodeURIComponent(endpoint)
+      registration = encodeURIComponent(registration)
+      auth = encodeURIComponent(auth)
+
+      const activity_id = encodeURIComponent(res.id)
+
+      if (!res.url.includes(baseDomain) && remote)
+        res.url = `${baseDomain}/${res.url}`
+
+      const newUrlToLaunch = `${res.url}?endpoint=${endpoint}&auth=${auth}&actor=${actor}&registration=${registration}&activity_id=${activity_id}`
+      this.routeChangeCounter = 0 //reset counter after saving
+      this.$bus.$emit('fire-exit-event', () => {
+        window.location.replace(newUrlToLaunch)
+      })
+    },
+
+    /**
+     * @description start the tutorial for first time users
+     * @requires '../assets/data/onboardingMessages.json'
+     * @param {Object} [onboardingMessages] the object for the messages of the tutorial
+     */
+    startOnboarding(onboardingMessages) {
+      if (onboardingMessages) {
+        if (this.getOnboardingEnabled) {
+          //flags error for OnboardingMessages
+          this.validateOnboardingMessages(onboardingMessages)
+          try {
+            this.onboardingMessages = onboardingMessages
+            this.nextOnboarding('message_1')
+          } catch (e) {
+            //fetch default values for popups
+            this.onboardingMessages = import(
+              '../assets/data/onboardingMessages.json'
+            )
+            this.nextOnboarding('message_1')
+          }
+        }
+      } else {
+        if (this.getOnboardingEnabled) {
+          this.onboardingMessages = import(
+            '../assets/data/onboardingMessages.json'
+          )
+          this.nextOnboarding('message_1')
+        }
+      }
+    },
+
+    /**
+     * @description start the tutorial for first time users
+     * @param {String} nextMessage name of the following messsage
+     */
+    nextOnboarding(nextMessage) {
+      let messages = this.onboardingMessages
+      //create message_X variable to put in cb_$confirm
+      let postNextMessage = 'message_' + (parseInt(nextMessage.slice(8)) + 1)
+
+      if (messages[postNextMessage]) {
+        //add something to the cb_$confirm to nextOnboarding
+        messages[nextMessage].value.cb_$confirm = () => {
+          this.nextOnboarding(postNextMessage)
+        }
+        //to apply the target to tooltip before the mounted happens
+        if (messages[postNextMessage].type == 'tooltip') {
+          this.toolTipTarget = messages[postNextMessage].value.target
+        }
+      }
+      //check if the next message is a popup or other componant
+      if (messages[nextMessage].type == 'popup-avert') {
+        this.openPopup(messages[nextMessage])
+      } else if (messages[nextMessage].type == 'tooltip') {
+        this.openToolTip(messages[nextMessage].value)
+      }
+    },
+    /**
+     * @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 = main ? main : 'wrapper-content' // search for node element specified as main
+
+      //fires event
+      this.$bus.$emit('move-to-target', skipTo, {
+        top: 100, // offset target top to 100 pixel
+        left: 0,
+        behavior: 'auto'
+      })
+
+      this.$analytics.sendEvent('skip_to_main_content')
+    },
+
+    /**
+     * @description validate the OnboardingMessages
+     * @param {Object} onboardingMessages
+     * @returns {Boolean} false if valid onboardingMessages || true if invalid onboardingMessages
+     */
+    validateOnboardingMessages(onboardingMessages) {
+      let err = false
+      let errorList = [] //array for errors dectected
+      if (onboardingMessages && typeof onboardingMessages == 'object') {
+        //check the list of attributes is message_X
+        let listMessage = Object.keys(onboardingMessages)
+        for (let index = 1; index <= listMessage.length; index++) {
+          const element = listMessage[index - 1]
+          if (element == 'message_' + index) {
+            if (
+              onboardingMessages[element] &&
+              typeof onboardingMessages[element] == 'object'
+            ) {
+              if (
+                onboardingMessages[element].type &&
+                typeof onboardingMessages[element].type == 'string'
+              ) {
+                //checks if is tooltip
+                if (onboardingMessages[element].type == 'tooltip') {
+                  let tooltip = onboardingMessages[element]
+                  if (tooltip.value && typeof tooltip.value == 'object') {
+                    //check title
+                    if (
+                      !tooltip.value.title ||
+                      typeof tooltip.value.title !== 'string'
+                    ) {
+                      //flags error
+                      errorList.push('message_' + index + ' type value title')
+                      console.warn(
+                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
+                          index +
+                          ' type value title is incorrect',
+                        'background: orange; color: white; display: block; margin:5px;'
+                      )
+                    }
+                    //check content
+                    if (
+                      !tooltip.value.content ||
+                      typeof tooltip.value.content !== 'string'
+                    ) {
+                      //flags error
+                      errorList.push('message_' + index + ' type value content')
+                      console.warn(
+                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
+                          index +
+                          ' type value content is incorrect',
+                        'background: orange; color: white; display: block; margin:5px;'
+                      )
+                    }
+                    //check target
+                    if (
+                      tooltip.value.target &&
+                      typeof tooltip.value.target == 'string'
+                    ) {
+                      //check if target is exist
+                      let target = tooltip.value.target
+                      //@todo
+                      if (!document.getElementById(target)) {
+                        //flags error
+                        errorList.push(
+                          'message_' + index + ' type value target'
+                        )
+                        console.warn(
+                          '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
+                            index +
+                            ' type value target is not found in page',
+                          'background: orange; color: white; display: block; margin:5px;'
+                        )
+                      }
+                    } else {
+                      //flags error
+                      errorList.push('message_' + index + ' type value target')
+                      console.warn(
+                        '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
+                          index +
+                          ' type value target is incorrect',
+                        'background: orange; color: white; display: block; margin:5px;'
+                      )
+                    }
+                  } else {
+                    //flags error
+                    errorList.push('message_' + index + ' type value')
+                    console.warn(
+                      '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
+                        index +
+                        ' type value is incorrect',
+                      'background: orange; color: white; display: block; margin:5px;'
+                    )
+                  }
+                }
+              } else {
+                //flags error
+                errorList.push('message_' + index + ' type')
+                console.warn(
+                  '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
+                    index +
+                    ' type is missing',
+                  'background: orange; color: white; display: block; margin:5px;'
+                )
+              }
+            } else {
+              //flags error
+              errorList.push('message_' + index + ' typeof')
+              console.warn(
+                '%c WARNING!>>> appBaseModule: Your onboardingMessages message_' +
+                  index +
+                  ' is not an object',
+                'background: orange; color: white; display: block; margin:5px;'
+              )
+            }
+          } else {
+            //flags error
+            errorList.push('onboardingMessages keys')
+            console.warn(
+              '%c WARNING!>>> appBaseModule: Your onboardingMessages keys does not follow "message_[number]" naming',
+              'background: orange; color: white; display: block; margin:5px;'
+            )
+          }
+        }
+      } else {
+        //flags error
+        errorList.push('onboardingMessages')
+        console.warn(
+          '%c WARNING!>>> appBaseModule: Your onboardingMessages is not an Object',
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+      }
+      // all item have required field. There is no error
+      if (!errorList.length) err = false
+      //return list of error
+      else err = errorList
+
+      return err
+    },
+
+    /**
+     * @description Reset the focus the element
+     * @param {HTMLElement} e - element that will get focus
+     */
+    resetFocus(e) {
+      if (e) e.focus()
+    },
+
+    handleRightSidebarScroll(event) {
+      let scrollHeight = null
+      let clientHeight = null
+      let scrollTop = null
+
+      scrollHeight = event.target.scrollHeight
+      clientHeight = event.target.clientHeight
+      scrollTop = event.target.scrollTop
+
+      // //Set scroll limit reached at 150px above the document height.
+      let scrollLimit = scrollHeight - 150
+      let fullyScrolled = Math.round(clientHeight + scrollTop)
+
+      //consider page completed when scrolled value has reached or passed set limit
+      if (fullyScrolled >= scrollLimit) {
+        event.target.removeEventListener(
+          'scroll',
+          this.handleRightSidebarScroll
+        )
+        let { userInteraction } = this.getCurrentBranchPage // Get the current branch page opened in the sidebar
+
+        this.getCurrentBranchPage.state = 'completed' // update the state of this branch
+        userInteraction.state = this.getCurrentBranchPage.state //update userInteraction state
+
+        setTimeout(() => this.$bus.$emit('branch-page-viewed'), 20)
+      }
+    },
+    getRightSidebar() {
+      let rSidebar = null
+      rSidebar = document.getElementById('right-sidebar')
+      if (!rSidebar) return
+      const rSidebarContent = rSidebar.querySelector(`#right-sidebar-body`)
+      return rSidebarContent
+    },
+
+    startTimeout() {
+      this.timeOut = setTimeout(() => {
+        this.cancelTimeout()
+      }, 3000)
+    },
+    cancelTimeout() {
+      if (this.timeOut) {
+        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 ||
+        !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 thisActivityServerState =
+            this.getUserInteraction[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
+          const activityDuration = this.appTimer.getTime()
+          stmt = {
+            id: this.getCurrentPage.activityRef,
+            verb: 'completed',
+            definition: text,
+            description: text,
+            extensions: [
+              {
+                id: 'user-data',
+                content: {
+                  routeHistory: this.getRouteHistory,
+                  ...lessonsData
+                }
+              }
+            ],
+            duration: this.appTimer.ISOTimeParser(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.appTimer.ISOTimeParser(this.lessonDuration),
+              completion: true
+            }
+            this.lessonCompletionStatus = true // set the status of this lesson as completed
+            let completedState = {
+              duration: this.appTimer.ISOTimeParser(this.lessonDuration),
+              completion: this.lessonCompletionStatus
+            }
+            this.setCompletionState(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) 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 thisActivityServerState = this.getUserInteraction[id]
+        ? this.getUserInteraction[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">
+.module {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.skip-link {
+  position: absolute;
+  left: -999px;
+  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;
+}
+
+#right-sidebar {
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  max-width: 780px;
+  width: 30%;
+  height: 100%;
+  overflow: hidden;
+  position: fixed;
+  right: 0;
+  top: 0;
+  background-color: #ffffff;
+  -webkit-box-shadow: -2px 1px 6px -1px rgb(0 0 0 / 40%);
+  box-shadow: -2px 1px 6px -1px rgb(0 0 0 / 40%);
+
+  #right-sidebar-header {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    padding: 32px 20px 0 32px;
+
+    .embranchement-close {
+      padding: 11px 13px;
+    }
+  }
+
+  #right-sidebar-body {
+    max-height: 90%;
+    overflow-y: auto;
+  }
+}
+
+.right-sidebar-transition-enter-active {
+  transition: transform 0.33s ease-out;
+}
+
+.right-sidebar-transition-leave-active {
+  transition: transform 0.16s;
+}
+
+.right-sidebar-transition-enter-from,
+.right-sidebar-transition-leave-to {
+  transform: translateX(100%);
+}
+</style>