fcad-core-dragon 2.0.0-beta.9 → 2.0.0

package/CHANGELOG

@@ -1,3 +1,14 @@
+2.0.0(31 mars 2025)
+	Menu : ponctuation des titres selon la langue (fr/en)
+
+	Fenêtre latérale : Le minimum de "branches" est maintenant 1 (était 2)
+
+	Fenêtre latérale : Bogue quand on la referme avec espace
+
+	Nouvelle fonctionnalité : Idle detector
+
+	Fenêtre progression : Bogue avec le path "activité 99", maintenant "conclusion"
+
 2.0.0-beta.9(03 mars 2025)
 	Correction de bogues (conflit toc/notes avec popup, ouverture simultanée de toc et notes)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fcad-core-dragon",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "private": false,
   "type": "module",
   "main": "./src/main.js",

package/src/components/AppBase.vue

@@ -62,10 +62,18 @@ import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore.js'
 import { timerMixin } from '../mixins/timerMixin'
 import { validateAppContent } from '../shared/validators'
-
+import { computed } from 'vue'
 import mobileDetect from 'mobile-detect'
 export default {
   mixins: [timerMixin],
+  provide() {
+    return {
+      elapsedIdleTime: computed(() => this.elapsedIdleTime),
+      timerCurrentState: computed(() => this.timerCurrentState),
+      lessonDuration: computed(() => this.lessonDuration),
+      activityDuration: computed(() => this.activityDuration)
+    }
+  },
   props: {
     appConfig: {
       type: Object,
@@ -221,6 +229,20 @@ export default {
         }
       }
     }
+    //===========FOR TESTING TIMER TIMEOUT====//
+    // elapsedIdleTime: {
+    //   handler() {
+    //     console.log(
+    //       '⌛:',
+    //       this.elapsedIdleTime,
+    //       this.timerCurrentState,
+    //       this.activityDuration
+    //     )
+
+    //     //max idle time allowed 300s (5 min)
+    //   },
+    //   immediate: true
+    // }
   },
 
   created() {
@@ -254,6 +276,9 @@ export default {
     this.$bus.$on('fire-exit-event', this.endLesson)
     this.$bus.$on('reset-focus-on', this.resetFocus)
     this.$bus.$on('move-to-target', this.moveTo)
+    this.$bus.$on('start-timer', this.startAppTimer)
+    this.$bus.$on('start-idle-detector', this.setIdleDetector)
+    this.$bus.$on('stop-idle-detector', this.unsetIdleDetector)
   },
   beforeMount() {
     window.addEventListener(
@@ -278,7 +303,9 @@ export default {
     this.$bus.$off('reset-focus-on', this.resetFocus)
     this.$bus.$off('send-xapi-statement', this.sendXapiStatements)
     this.$bus.$off('move-to-target', this.moveTo)
-
+    this.$bus.$off('start-idle-detector', this.setIdleDetector)
+    this.$bus.$off('stop-idle-detector', this.unsetIdleDetector)
+    this.$bus.$off('start-timer', this.startAppTimer)
     if (this.getAppConfigs.remote) this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
   },
   methods: {
@@ -294,6 +321,31 @@ export default {
       'setMobileState',
       'setCurrentBrowser'
     ]),
+    startAppTimer() {
+      if (this.timerCurrentState == 'started') this.stopTimer('activity')
+      this.startTimer('activity')
+    },
+
+    setIdleDetector() {
+      setTimeout(() => {
+        this.startIdleTimer() //start the iddle dectection
+        document.addEventListener('mousedown', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('mousemove', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('keypress', this.resetIdleTimer, false) //set eventlisteners
+        document.addEventListener('touchmove', this.resetIdleTimer, false) //set eventlisteners
+      }, 1000)
+    },
+    /*
+     * stop the idle timer and remove hidle-dector listeners
+     */
+    unsetIdleDetector() {
+      this.stopIdleTimer()
+      document.removeEventListener('mousedown', this.resetIdleTimer, false)
+      document.removeEventListener('mousemove', this.resetIdleTimer, false)
+      document.removeEventListener('keypress', this.resetIdleTimer, false)
+      document.removeEventListener('touchmove', this.resetIdleTimer, false)
+    },
+
     setInitialLoadingDone() {
       this.initialLoading = false
     },
@@ -422,6 +474,80 @@ export default {
 
       const { routeHistory = [], ...userProgress } = userData
 
+      const completedState = lessonStatus || {}
+      const lessonPosition = savedPoint || ''
+      const applicationSettings = preferredSettings || {}
+      //====FOR TESTING====//
+      // console.log('💾  RECORDS ', {
+      //   userProgress,
+      //   routeHistory,
+      //   lessonPosition,
+      //   completedState,
+      //   playbarValues,
+      //   applicationSettings
+      // })
+      //Update the App Store data
+      this.updateDataFetchFromServer({
+        userProgress,
+        routeHistory,
+        lessonPosition,
+        completedState,
+        playbarValues,
+        applicationSettings
+      }).then(() => {
+        this.updateTracker('appBase_fetch', 'ready')
+      })
+    },
+
+    async fetchDataFromServerOptimized() {
+      this.updateTracker('appBase_fetch', 'loading')
+      if (this.getModuleInfo.packageType !== 'xapi') return
+      if (!this.getConnectionInfo || !this.getConnectionInfo.remote) return
+
+      const actorMbox = this.getConnectionInfo.actor.mbox.replace('mailto:', '')
+      const activityId = this.getConnectionInfo.activity_id
+      const _url = new URL(activityId)
+      const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
+
+      const lessonProgressParam = { email: actorMbox, activityId }
+      const lessonStateParam = {
+        email: actorMbox,
+        activityId,
+        verb: 'completed'
+      }
+      const lessonPosionParam = {
+        email: actorMbox,
+        activityId
+      }
+      const playbarParam = {
+        email: actorMbox,
+        activityId,
+        verb: 'played'
+      }
+      const preferencesParam = {
+        email: actorMbox,
+        activityId: parentID,
+        verb: 'preferred'
+      }
+
+      const fetchParams = [
+        lessonProgressParam,
+        lessonStateParam,
+        lessonPosionParam,
+        playbarParam,
+        preferencesParam
+      ]
+
+      const {
+        userData,
+        savedPoint,
+        preferredSettings,
+        playbarValues,
+        lessonStatus
+      } = await this.$xapi._getBulkData(fetchParams)
+
+      const { routeHistory = [], ...userProgress } = userData
+
       const completedState = lessonStatus || {}
       const lessonPosition = savedPoint || ''
       const applicationSettings = preferredSettings || {}
@@ -929,7 +1055,8 @@ export default {
       this.setApplicationSettings({}) // resetting store record for settings
       this.setRouteHistory([]) // resetting  store record for all last visited pages
 
-      this.$bus.$emit('stop-timer')
+      // this.$bus.$emit('stop-timer')
+      this.stopTimer()
       if (this.getModuleInfo.packageType !== 'xapi') return
 
       if (!this.getConnectionInfo || this.getConnectionInfo.remote == false)

package/src/components/AppBaseModule.vue

@@ -104,7 +104,6 @@ import { fileAssets } from '../shared/generalfuncs.js'
 import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore'
 import BaseModule from './BaseModule.vue'
-import { timerMixin } from '../mixins/timerMixin'
 import AppCompContainer from './AppCompContainer.vue'
 import { defineAsyncComponent } from 'vue'
 //import
@@ -113,7 +112,7 @@ export default {
     BaseModule,
     AppCompContainer
   },
-  mixins: [timerMixin],
+  inject: ['elapsedIdleTime', 'timerCurrentState', 'lessonDuration'],
   props: {
     moduleConfig: {
       type: Object,
@@ -135,8 +134,6 @@ export default {
       popupIsOpen: false,
       hidePlayBar: false, // Controle visibility of the play bar. set to true to hide play bar
       stmt: null, // holder for xapi statememt,
-      moduleTimer: 0, //tracker for overall time spent the lesson
-      activityTimer: 0, // tracker for the time spent on activity,
       routeChangeCounter: 0,
       toolTipTarget: '', //for the tool tip,
       onboardingMessages: {}, //for the onboarding @todo replace with default file
@@ -262,7 +259,6 @@ export default {
 
       return mainEl
     },
-
     dynamicSidebarContent() {
       if (
         !this.transcriptVisible &&
@@ -367,13 +363,12 @@ export default {
          */
 
         const trackedRouteType = ['introduction', 'conclusion', 'normal']
+
         if (trackedRouteType.includes(this.$route.meta.type)) {
           if (this.$route.name.includes('.')) return
 
           //Start the timer every time that there is a new activity
-          if (this.timerState === 'started') this.stopTimer('activity') // reset the activity timer
-          this.startTimer('activity')
-
+          this.$bus.$emit('start-timer')
           //Send statement when activity as changed
           if (this.activityHasChanged)
             this.sendStartStatement({ id: this.$route.meta.activity_ref })
@@ -408,13 +403,12 @@ export default {
     /**
      * @description Defined in timerMixin Watch The epalsed time for autosaving the user reached position
      */
-    elapsedTime: {
+    elapsedIdleTime: {
       handler() {
-        if (this.timerState !== 'started') return
+        if (this.timerCurrentState !== 'started') return
         //send a statement every x time (second)
         if (
-          this.timerState === 'started' &&
-          this.elapsedTime % 500 === 0 &&
+          this.elapsedIdleTime % 500 === 0 &&
           this.getModuleInfo.packageType === 'xapi' &&
           this.getConnectionInfo &&
           this.getConnectionInfo.actor &&
@@ -486,6 +480,7 @@ export default {
     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) {
@@ -549,7 +544,9 @@ export default {
     this.$bus.$on('send-completion-event', this.sendCompletionStatus)
     this.$bus.$on('send-starting-event', this.sendStartStatement)
 
-    this.initLesson()
+    this.initLesson().then(() => {
+      this.$bus.$emit('start-idle-detector')
+    })
 
     if (this.navigationHistory.length != 0) {
       this.routeData = this.navigationHistory
@@ -664,11 +661,11 @@ export default {
     closeSidebar(ctx, wrapper = null) {
       //delay animation
       this.rightSidebarVisible = false //
-      // setTimeout(() => {
-      const rSidebar = document.querySelector('#right-sidebar') // the sidebar
-      rSidebar.setAttribute('style', 'display:none')
-      rSidebar.dispatchEvent(this.rightSidebarEvent) //this will allow to run the animation of sidebar closing 1rst
-      // }, 100)
+      setTimeout(() => {
+        const rSidebar = document.querySelector('#right-sidebar') // the sidebar
+        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':

package/src/components/AppCompBranchButtons.vue

@@ -122,9 +122,9 @@ export default {
           let errMsg = false
 
           //card must have at least 2 elements
-          if (dataArray.length < 2) {
+          if (dataArray.length < 1) {
             isValid = false
-            errMsg = `\n card require at least 2 element`
+            errMsg = `\n card require at least 1 element`
           } else {
             for (let el of dataArray) {
               //Each element in card must be of type Object and can not be empty
@@ -148,10 +148,10 @@ export default {
         let isValid = true
         if (import.meta.env.DEV) {
           let errMsg = false
-          //card must have at least 2 elements
-          if (dataArray.length < 2) {
+          //card must have at least 1 elements
+          if (dataArray.length < 1) {
             isValid = false
-            errMsg = `\n customButton require at least 2 element`
+            errMsg = `\n customButton require at least 1 element`
           } else {
             for (let el of dataArray) {
               //Each element in card must be of type Object and can not be empty

package/src/components/AppCompMenuItem.vue

@@ -1,228 +1,238 @@
-<!--
- @ Description: This component is used to display and create the link's to all the activity creation in module.
- @ What it does: Goes trougth all the activity in the router and create a card that open the Table of content (appCompTableOfContent) that display the anchor.Display the title and subtitle enter in menu.json. Must be used with AppCompTableOfContent and AppCompMenu.
--->
-<template>
-  <v-row v-if="activities.length" class="box-msa">
-    <v-col
-      v-for="activity of activities"
-      :key="activity.id"
-      cols="6"
-      class="menu-section-activity"
-      :aria-describedby="activity.id + '-subMenu'"
-    >
-      <router-link
-        :id="activity.id + '-subMenu'"
-        :title="activity.title"
-        :data-test="`item-menu-${activity.id}`"
-        class="btn-menu"
-        :to="{
-          name: createRoutes(activity.id)
-        }"
-        @click="startActivity(activity)"
-      >
-        <div class="menu-card" tag="article">
-          <v-row>
-            <div v-if="activity.subtitle === undefined" class="title">
-              <h4 v-html="activity.title"></h4>
-            </div>
-            <div v-else class="title">
-              <h4 v-html="`${activity.title} : ${activity.subtitle}`"></h4>
-            </div>
-
-            <div class="cnt-time">
-              <svg :aria-label="$t('label.timer')">
-                <use href="#clock-icon" />
-              </svg>
-              <p class="time">
-                {{ activity.time || '00:00' }}
-              </p>
-            </div>
-            <div class="box-gauge">
-              <app-comp-jauge
-                :max-value="getActivitySize(activity.id)"
-                :value="getPageComplete(activity.id)"
-              />
-            </div>
-          </v-row>
-        </div>
-      </router-link>
-    </v-col>
-  </v-row>
-</template>
-<script>
-// ...
-import { mapState } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import AppCompJauge from './AppCompJauge.vue'
-export default {
-  components: {
-    AppCompJauge
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getAllActivities',
-      'getAllActivitiesState',
-      'getAllCompleted',
-      'getAppConfigs',
-      'getMenuSettings',
-      'getModuleInfo'
-    ]),
-    activities() {
-      // get the data for list of the page for this module from the store and
-      // get the route of the page from the router to build the menu with its routes
-      let count = 0
-      const collection = []
-
-      this.getAllActivities().list.forEach((value, key) => {
-        let theActivity,
-          activityTitle,
-          activitySubTitle,
-          activityTime = null,
-          activityPath = ''
-
-        if (this.menuInfo[key]) {
-          const { title, subTitle, time } = this.menuInfo[key] //get time subTitle time from menu info
-          //set the title
-          if (title && title != ' ') activityTitle = title
-          //set the subtitle
-          if (subTitle && subTitle != ' ') activitySubTitle = subTitle
-          //set the time
-          if (time && time != ' ') activityTime = time
-        }
-        // This is the Introduction
-        if (key === 'A00') {
-          activityTitle = activityTitle || this.$t('text.introduction')
-          activityPath = 'introduction'
-        } else if (key === 'A99') {
-          activityTitle = activityTitle || this.$t('text.conclusion')
-          activityPath = 'conclusion'
-        } else {
-          count++
-          activityTitle =
-            activityTitle || `${this.$t('text.activity')} ${count}`
-          activityPath = `activite_${count}`
-        }
-
-        theActivity = {
-          id: key,
-          title: activityTitle,
-          subtitle: activitySubTitle,
-          time: activityTime,
-          path: activityPath,
-          data: value
-        }
-
-        collection.push(theActivity) // push the activity in the collection
-      })
-
-      return collection
-    },
-    menuInfo() {
-      let menuInfo = this.getMenuSettings
-      return menuInfo
-    }
-  },
-  mounted() {},
-  methods: {
-    /**
-     * @description Gives gives length of completed page for an activity
-     * @param {String} idActivity
-     * @returns {Number}
-     */
-    getPageComplete(idActivity) {
-      /// give all the page that are complete to the gauge
-      if (idActivity) {
-        let completed = []
-        if (this.getAllCompleted[idActivity]) {
-          completed = this.getAllCompleted[idActivity] //get all completed page for the activity
-        }
-
-        return completed.length
-      }
-    },
-    /**
-     * @description give the size of the state of the activity
-     * @param {String} activityID
-     * @returns {Number} size
-     */
-    getActivitySize(activityID) {
-      /*
-       * Note:
-       * Assaging by reference would change the property of the getters when the valued are changed in the new object in. * To prevent this behaviour we will make a deep copy of the getter
-       * cf: https://reactgo.com/javascript-clone-object/
-       */
-
-      const allActivitiesState = JSON.parse(
-        JSON.stringify(this.getAllActivitiesState)
-      )
-      let size = allActivitiesState[activityID]
-        ? allActivitiesState[activityID].size
-        : 0
-
-      return size
-    },
-    createRoutes(data) {
-      let activity
-
-      if (data.charAt(1) == '0' || data.charAt(1) == 0) {
-        activity = data.substr(2)
-      } else {
-        activity = data.substr(1)
-      }
-
-      if (activity == 0 && activity == '0') return `introduction`
-      if (activity == '99') return `conclusion`
-      else return `activite_${activity}`
-    },
-    startActivity(a) {
-      //this.$bus.$emit('send-starting-event', a)
-    }
-  }
-}
-</script>
-<style lang="scss">
-.menu-card {
-  width: 100%;
-  padding: 24px;
-
-  .v-row {
-    margin: 0;
-    flex-direction: column;
-
-    .title {
-      flex-grow: 4;
-      width: 80%;
-      margin-bottom: 30px;
-
-      h3 {
-        text-align: left;
-      }
-    }
-
-    .cnt-time {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-bottom: 20px;
-
-      svg {
-        width: 18px;
-        height: 18px;
-        margin-right: 10px;
-      }
-    }
-
-    .box-gauge {
-      display: block;
-      width: 100%;
-
-      .box-g {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-    }
-  }
-}
-</style>
+<!--
+ @ Description: This component is used to display and create the link's to all the activity creation in module.
+ @ What it does: Goes trougth all the activity in the router and create a card that open the Table of content (appCompTableOfContent) that display the anchor.Display the title and subtitle enter in menu.json. Must be used with AppCompTableOfContent and AppCompMenu.
+-->
+<template>
+  <v-row v-if="activities.length" class="box-msa">
+    <v-col
+      v-for="activity of activities"
+      :key="activity.id"
+      cols="6"
+      class="menu-section-activity"
+      :aria-describedby="activity.id + '-subMenu'"
+    >
+      <router-link
+        :id="activity.id + '-subMenu'"
+        :title="activity.title"
+        :data-test="`item-menu-${activity.id}`"
+        class="btn-menu"
+        :to="{
+          name: createRoutes(activity.id)
+        }"
+        @click="startActivity(activity)"
+      >
+        <div class="menu-card" tag="article">
+          <v-row>
+            <div v-if="activity.subtitle === undefined" class="title">
+              <h4 v-html="activity.title"></h4>
+            </div>
+            <div v-else class="title">
+              <h4
+                v-html="
+                  `${activity.title}${cardTitleSeparator}${activity.subtitle}`
+                "
+              ></h4>
+            </div>
+
+            <div class="cnt-time">
+              <svg :aria-label="$t('label.timer')">
+                <use href="#clock-icon" />
+              </svg>
+              <p class="time">
+                {{ activity.time || '00:00' }}
+              </p>
+            </div>
+            <div class="box-gauge">
+              <app-comp-jauge
+                :max-value="getActivitySize(activity.id)"
+                :value="getPageComplete(activity.id)"
+              />
+            </div>
+          </v-row>
+        </div>
+      </router-link>
+    </v-col>
+  </v-row>
+</template>
+<script>
+// ...
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import AppCompJauge from './AppCompJauge.vue'
+export default {
+  components: {
+    AppCompJauge
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getAllActivities',
+      'getAllActivitiesState',
+      'getAllCompleted',
+      'getAppConfigs',
+      'getMenuSettings',
+      'getModuleInfo'
+    ]),
+    /*
+     * Apply different punctuation for colons. No space before a colon in english, one space before a colon in french
+     */
+    cardTitleSeparator() {
+      return this.getAppConfigs.lang === 'en' ? ': ' : ' : '
+    },
+    activities() {
+      // get the data for list of the page for this module from the store and
+      // get the route of the page from the router to build the menu with its routes
+      let count = 0
+      const collection = []
+
+      this.getAllActivities().list.forEach((value, key) => {
+        let theActivity,
+          activityTitle,
+          activitySubTitle,
+          activityTime = null,
+          activityPath = ''
+
+        if (this.menuInfo[key]) {
+          const { title, subTitle, time } = this.menuInfo[key] //get time subTitle time from menu info
+          //set the title
+          if (title && title != ' ') activityTitle = title
+          //set the subtitle
+          if (subTitle && subTitle != ' ') activitySubTitle = subTitle
+          //set the time
+          if (time && time != ' ') activityTime = time
+        }
+        // This is the Introduction
+        if (key === 'A00') {
+          activityTitle = activityTitle || this.$t('text.introduction')
+          activityPath = 'introduction'
+        } else if (key === 'A99') {
+          activityTitle = activityTitle || this.$t('text.conclusion')
+          activityPath = 'conclusion'
+        } else {
+          count++
+          activityTitle =
+            activityTitle || `${this.$t('text.activity')} ${count}`
+          activityPath = `activite_${count}`
+        }
+
+        theActivity = {
+          id: key,
+          title: activityTitle,
+          subtitle: activitySubTitle,
+          time: activityTime,
+          path: activityPath,
+          data: value
+        }
+
+        collection.push(theActivity) // push the activity in the collection
+      })
+
+      return collection
+    },
+    menuInfo() {
+      let menuInfo = this.getMenuSettings
+      return menuInfo
+    }
+  },
+  mounted() {},
+  methods: {
+    /**
+     * @description Gives gives length of completed page for an activity
+     * @param {String} idActivity
+     * @returns {Number}
+     */
+    getPageComplete(idActivity) {
+      /// give all the page that are complete to the gauge
+      if (idActivity) {
+        let completed = []
+        if (this.getAllCompleted[idActivity]) {
+          completed = this.getAllCompleted[idActivity] //get all completed page for the activity
+        }
+
+        return completed.length
+      }
+    },
+    /**
+     * @description give the size of the state of the activity
+     * @param {String} activityID
+     * @returns {Number} size
+     */
+    getActivitySize(activityID) {
+      /*
+       * Note:
+       * Assaging by reference would change the property of the getters when the valued are changed in the new object in. * To prevent this behaviour we will make a deep copy of the getter
+       * cf: https://reactgo.com/javascript-clone-object/
+       */
+
+      const allActivitiesState = JSON.parse(
+        JSON.stringify(this.getAllActivitiesState)
+      )
+      let size = allActivitiesState[activityID]
+        ? allActivitiesState[activityID].size
+        : 0
+
+      return size
+    },
+    createRoutes(data) {
+      let activity
+
+      if (data.charAt(1) == '0' || data.charAt(1) == 0) {
+        activity = data.substr(2)
+      } else {
+        activity = data.substr(1)
+      }
+
+      if (activity == 0 && activity == '0') return `introduction`
+      if (activity == '99') return `conclusion`
+      else return `activite_${activity}`
+    },
+    startActivity(a) {
+      //this.$bus.$emit('send-starting-event', a)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.menu-card {
+  width: 100%;
+  padding: 24px;
+
+  .v-row {
+    margin: 0;
+    flex-direction: column;
+
+    .title {
+      flex-grow: 4;
+      width: 80%;
+      margin-bottom: 30px;
+
+      h3 {
+        text-align: left;
+      }
+    }
+
+    .cnt-time {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-bottom: 20px;
+
+      svg {
+        width: 18px;
+        height: 18px;
+        margin-right: 10px;
+      }
+    }
+
+    .box-gauge {
+      display: block;
+      width: 100%;
+
+      .box-g {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

package/src/components/AppCompTableOfContent.vue

@@ -156,6 +156,8 @@ export default {
           let b = null
           if (nb == 0 || nb == '0') {
             b = `introduction`
+          } else if (nb == 99 || nb == '99') {
+            b = `conclusion`
           } else {
             b = `activite_${nb}`
           }

package/src/mixins/timerMixin.js

@@ -1,155 +1,195 @@
-/*
-@ Description: Mixins to extends general fonctionnalities in a page of an activity. Add time tracker in activities
-@ Note: .
-*/
-export const timerMixin = {
-  data() {
-    return {
-      lessonTimeCounter: 0,
-      activityTimeCounter: 0,
-      elapsedCounter: 0, // count the elapse time since lesson started
-      activityInterval: null,
-      lessonInterval: null,
-      fullInterval: null,
-      timerState: 'stopped',
-      elapsedInterval: null // interval of passed time since the lesson is started. used only for saving purposed
-    }
-  },
-  methods: {
-    /* Start the timer */
-    startTimer(op) {
-      if (op && !['activity', 'lesson'].includes(op))
-        throw new Error('this is not a valid option for the timer')
-      if (this.timerState === 'stopped') {
-        switch (op) {
-          case 'activity':
-            this.activityInterval = setInterval(() => {
-              this.activityTimeCounter += 1
-            }, 1000)
-            this.timerState = 'started'
-
-            break
-
-          case 'lesson':
-            this.lessonInterval = setInterval(() => {
-              this.lessonTimeCounter += 1
-            }, 1000)
-            break
-
-          default:
-            this.fullInterval = setInterval(() => {
-              this.activityTimeCounter += 1
-              this.lessonTimeCounter += 1
-            }, 1000)
-        }
-      }
-    },
-    /* Stop the timer and reset  thimer to zero */
-    stopTimer(op) {
-      if (op && !['activity', 'lesson'].includes(op))
-        throw new Error('this is not a valid parameter')
-
-      if (this.timerState === 'started') {
-        if (op === 'activity' && this.activityTimeCounter > 0) {
-          this.lessonTimeCounter =
-            this.lessonTimeCounter + this.activityTimeCounter //add to the lesson counter
-          clearInterval(this.activityInterval) //clear the interval
-          this.activityTimeCounter = 0 // reset the counter
-          this.timerState = 'stopped'
-        } else if (op === 'lesson' && this.lessonTimeCounter > 0) {
-          clearInterval(this.lessonInterval)
-          this.lessonTimeCounter = 0
-        } else {
-          clearInterval(this.fullInterval)
-          clearInterval(this.elapsedCounter)
-          clearInterval(this.elapsedInterval)
-
-          this.activityTimeCounter = 0
-          this.lessonTimeCounter = 0
-          this.elapsedCounter = 0
-        }
-      }
-    },
-    /* Pause the timer but does not reset to zero*/
-    pauseTimer(op) {
-      if (op && !['activity', 'lesson'].includes(op))
-        throw new Error('this is not a valid parameter')
-
-      if (op === 'activity' && this.activityTimeCounter > 0) {
-        clearInterval(this.activityInterval)
-      } else if (op === 'lesson') {
-        clearInterval(this.lessonInterval)
-      } else {
-        clearInterval(this.fullInterval)
-        clearInterval(this.elapsedInterval)
-      }
-    },
-
-    /* Format seconds to ISO 8601 format */
-    formatToISOString(seconds) {
-      let d = new Date(null) //create a default date ref
-      d.setSeconds(seconds) //set the time with passed numbers of seconds
-      //Example of ISO 8601 time format of 24 chars: "1970-01-04T14:50:00.000Z"
-      let ISOTime = d.toISOString()
-
-      return ISOTime // YYYY-MM-DDTHH:mm:ss.sssZ
-    },
-
-    /* Parse a ISO string time period to the format of HH:mm:ss */
-    ISOTimeParser(seconds) {
-      let ISOTimePeriod = this.formatToISOString(seconds).substring(8, 19) // only the time portion of it
-      ISOTimePeriod = ISOTimePeriod.split('T')
-      const DDToHrs = (parseInt(ISOTimePeriod[0]) - 1) * 24 // convert xxT to hrs
-      const periodOfTime = ISOTimePeriod[1] ? ISOTimePeriod[1].split(':') : null
-
-      if (!periodOfTime) return '00:00:00'
-
-      let timeString = ''
-      let HH = (DDToHrs + parseInt(periodOfTime[0])).toString()
-      let mm = periodOfTime[1]
-      let ss = periodOfTime[2]
-
-      if (HH.length === 1) HH = `0${HH}`
-
-      timeString = `${HH}:${mm}:${ss}`
-
-      return timeString
-    }
-  },
-  beforeUnmount() {
-    this.$bus.$off('start-timer', this.startTimer)
-    this.$bus.$off('stop-timer', this.stopTimer)
-    this.$bus.$off('pause-timer', this.pauseTimer)
-  },
-  mounted() {
-    this.$bus.$on('start-timer', this.startTimer)
-
-    this.$bus.$on('stop-timer', this.stopTimer)
-
-    this.$bus.$on('pause-timer', this.pauseTimer)
-
-    this.elapsedInterval = setInterval(() => {
-      this.elapsedCounter += 1
-    }, 1000)
-  },
-  computed: {
-    activityDuration() {
-      let duration
-      if (this.activityTimeCounter > 0)
-        duration = this.ISOTimeParser(this.activityTimeCounter)
-      else duration = '00:00:00'
-
-      return duration
-    },
-    lessonDuration() {
-      this.lessonTimeCounter = this.lessonTimeCounter + this.activityTimeCounter
-
-      let duration = this.ISOTimeParser(this.lessonTimeCounter)
-      return duration
-    },
-    elapsedTime() {
-      const eTime = this.elapsedCounter
-      return eTime
-    }
-  }
-}
+/*
+@ Description: Mixins to extends general fonctionnalities in a page of an activity. Add time tracker in activities
+@ Note: .
+*/
+export const timerMixin = {
+  data() {
+    return {
+      lessonTimeCounter: 0,
+      activityTimeCounter: 0,
+      activityInterval: null,
+      lessonInterval: null,
+      fullInterval: null,
+      timerState: 'stopped',
+      idleCounter: 0,
+      idleTimeoutID: null,
+      idleTimeout: 5 * 60000, //5 mins
+      idleTimer: null
+    }
+  },
+  methods: {
+    /* Start the timer */
+    startTimer(op) {
+      if (op && !['activity', 'lesson'].includes(op))
+        throw new Error('this is not a valid option for the timer')
+      if (this.timerState == 'stopped') {
+        switch (op) {
+          case 'activity':
+            this.activityInterval = setInterval(() => {
+              this.activityTimeCounter += 1
+            }, 1000)
+            break
+
+          case 'lesson':
+            this.lessonInterval = setInterval(() => {
+              this.lessonTimeCounter += 1
+            }, 1000)
+            break
+
+          default:
+            this.fullInterval = setInterval(() => {
+              this.activityTimeCounter += 1
+              this.lessonTimeCounter += 1
+            }, 1000)
+        }
+        this.timerState = 'started'
+      }
+    },
+    /* Stop the timer and reset  thimer to zero */
+    stopTimer(op) {
+      if (op && !['activity', 'lesson'].includes(op))
+        throw new Error('this is not a valid parameter')
+
+      if (this.timerState == 'started') {
+        if (op === 'activity' && this.activityTimeCounter > 0) {
+          this.lessonTimeCounter =
+            this.lessonTimeCounter + this.activityTimeCounter //add to the lesson counter
+          clearInterval(this.activityInterval) //clear the interval
+          this.activityTimeCounter = 0 // reset the counter
+        } else if (op == 'lesson' && this.lessonTimeCounter > 0) {
+          clearInterval(this.lessonInterval)
+          this.lessonTimeCounter = 0
+        } else {
+          clearInterval(this.activityInterval) //clear the interval
+          clearInterval(this.fullInterval)
+          clearInterval(this.lessonInterval)
+          clearInterval(this.elapsedCounter)
+
+          this.activityTimeCounter = 0
+          this.lessonTimeCounter = 0
+          this.elapsedCounter = 0
+        }
+        this.timerState = 'stopped'
+      }
+    },
+    /* Pause the timer but does not reset to zero*/
+    pauseTimer(op) {
+      if (op && !['activity', 'lesson'].includes(op))
+        throw new Error('this is not a valid parameter')
+
+      if (op === 'activity' && this.activityTimeCounter > 0) {
+        clearInterval(this.activityInterval)
+      } else if (op === 'lesson') {
+        clearInterval(this.lessonInterval)
+      } else {
+        clearInterval(this.fullInterval)
+        clearInterval(this.elapsedCounter)
+      }
+      this.timerState = 'stopped'
+    },
+    /*
+     * Inialize the idle Timer,
+     * create a  timer to trick time passed since idle is start
+     * create a countdown to pause activity timer
+     */
+    startIdleTimer() {
+      this.idleTimer = setInterval(() => {
+        this.idleCounter += 1
+      }, 1000)
+      this.idleTimeoutID = setTimeout(
+        () => this.pauseTimer('activity'),
+        this.idleTimeout
+      )
+    },
+    /*
+     * reset idle timer .
+     * retart the activity counter
+     */
+    resetIdleTimer() {
+      this.stopIdleTimer()
+      if (this.timerState == 'stopped') this.startTimer('activity')
+      this.startIdleTimer()
+    },
+    /**
+     * clear  idle timer
+     * clear idle countdown
+     * reset idle counter
+     */
+    stopIdleTimer() {
+      this.idleCounter = 0
+      clearInterval(this.idleTimer)
+      clearTimeout(this.idleTimeoutID)
+    },
+
+    /* Format seconds to ISO 8601 format */
+    formatToISOString(seconds) {
+      let d = new Date(null) //create a default date ref
+      d.setSeconds(seconds) //set the time with passed numbers of seconds
+      //Example of ISO 8601 time format of 24 chars: "1970-01-04T14:50:00.000Z"
+      let ISOTime = d.toISOString()
+
+      return ISOTime // YYYY-MM-DDTHH:mm:ss.sssZ
+    },
+
+    /* Parse a ISO string time period to the format of HH:mm:ss */
+    ISOTimeParser(seconds) {
+      let ISOTimePeriod = this.formatToISOString(seconds).substring(8, 19) // only the time portion of it
+      ISOTimePeriod = ISOTimePeriod.split('T')
+      const DDToHrs = (parseInt(ISOTimePeriod[0]) - 1) * 24 // convert xxT to hrs
+      const periodOfTime = ISOTimePeriod[1] ? ISOTimePeriod[1].split(':') : null
+
+      if (!periodOfTime) return '00:00:00'
+
+      let timeString = ''
+      let HH = (DDToHrs + parseInt(periodOfTime[0])).toString()
+      let mm = periodOfTime[1]
+      let ss = periodOfTime[2]
+
+      if (HH.length === 1) HH = `0${HH}`
+
+      timeString = `${HH}:${mm}:${ss}`
+
+      return timeString
+    }
+  },
+  beforeUnmount() {
+    this.$bus.$off('timer-start', this.startTimer)
+    this.$bus.$off('timer-tart', this.stopTimer)
+    this.$bus.$off('timer-pause', this.pauseTimer)
+    this.$bus.$off('stop-idle-timer', this.stopIdleTimer)
+    this.$bus.$off('start-idle-timer', this.startIdleTimer)
+  },
+  mounted() {
+    this.$bus.$on('timer-start', this.startTimer)
+    this.$bus.$on('timer-stop', this.stopTimer)
+    this.$bus.$on('timer-pause', this.pauseTimer)
+    this.$bus.$on('start-idle-timer', this.startIdleTimer)
+    this.$bus.$on('stop-idle-timer', this.stopIdleTimer)
+  },
+  computed: {
+    activityDuration() {
+      let duration
+      if (this.activityTimeCounter > 0)
+        duration = this.ISOTimeParser(this.activityTimeCounter)
+      else duration = '00:00:00'
+
+      return duration
+    },
+    lessonDuration() {
+      this.lessonTimeCounter = this.lessonTimeCounter + this.activityTimeCounter
+
+      let duration = this.ISOTimeParser(this.lessonTimeCounter)
+      return duration
+    },
+    elapsedTime() {
+      const eTime = this.elapsedCounter
+      return eTime
+    },
+    elapsedIdleTime() {
+      return this.idleCounter
+    },
+    timerCurrentState() {
+      return this.timerState
+    }
+  }
+}

package/src/module/stores/appStore.js

@@ -628,7 +628,7 @@ export const useAppStore = defineStore('$appStore', {
       this.introAcitve = status
     },
 
-    setAppDebugMode(state, bool) {
+    setAppDebugMode(bool) {
       this.appDebugMode = bool
     },
 
@@ -641,7 +641,7 @@ export const useAppStore = defineStore('$appStore', {
     setDeviceType(device) {
       this.deviceType = device
     },
-    setErrorMenu(state, error) {
+    setErrorMenu(error) {
       this.errMenuSetting = error
     },
     setApplicationSettings(settings) {
@@ -652,7 +652,7 @@ export const useAppStore = defineStore('$appStore', {
       this.mediaVolume = volume
     },
 
-    setMediaMuted(state, bool) {
+    setMediaMuted(bool) {
       this.mediaMuted = bool
     },
 

package/src/module/xapi/ADL.js

@@ -191,7 +191,6 @@ export default class ADL {
       } else {
         userData = {}
       }
-
       return userData
     } catch (err) {
       console.log(err)

package/src/module/xapi/wrapper.js

@@ -1726,7 +1726,6 @@ export function xapiwrapper(ADL) {
    * @param {boolean} strictCallbacks Callback must be executed and first param is error or null if no error
    * @return {Objec} containing the status of last promise request and Array of the responses;
    */
-
   ADL.XHR_request = function (
     lrs,
     urls,

package/src/router/index.js

@@ -33,6 +33,11 @@ router.beforeResolve((to, from, next) => {
   if (from.name !== 'module')
     app.config.globalProperties.$bus.$emit('update-route-history', from)
   app.config.globalProperties.$bus.$emit('update-content', to, from, next)
+  //hidle detector should be stopped in menu
+  if (to.name == 'menu') {
+    app.config.globalProperties.$bus.$emit('timer-stop')
+    app.config.globalProperties.$bus.$emit('stop-idle-detector')
+  }
 
   if (noNavigationToMenu && to.name == 'menu') {
     const r = app.config.globalProperties.$helper.getRoutesFromVueRouter() //This return all the routes defined for the module