fcad-core-dragon 2.1.0-beta.1 → 2.1.0-beta.3

package/CHANGELOG

@@ -1,10 +1,50 @@
+2.1.0-beta.3(24 septembre 2025)
+	RUPTURE DE COMPATIBILITÉ : Ajout de Google Analytics (analytics_id dans app.vue) nouvelle dépendance : npm install vue-gtag@2.0.1
+
+	Tracking Analytics des événements play/end pour les lecteurs audio/vidéo
+
+	RUPTURE DE COMPATIBILITÉ : Nouvelle structure de données utilisées pour les lecteurs audio/vidéo
+
+	Correction du bogue de scroll au changement de page
+
+	Optimisation de la mise à jour de la valeur de currentPage dans le Store
+
+	Nouvelle fonctionnalité : Il est maintenant possible de redéfinir certains libellés spécifiques du FCAD (FIAG)
+
+	Tracking learninglocker pour les lecteurs audio/vidéo
+
+	Refactoring de la fonctionnalité "idle detector" et du calcul du temps passé sur une activité
+
+	Ajout d’informations supplémentaires affichées quand on active le debug mode
+
+
 2.1.0-beta.1(27 août 2025)
 	RUPTURE DE COMPATIBILITÉ : (structure de données des rétroactions). Seules les propriétés "title" et "hypertext" sont acceptées (anciennement "title", "hypertext_1" et "hypertext_2")
 
+	Ajout de Style pour le responsive de la carte audio 
+
 	Retrait du border sur les balises fieldset
 
 	Correction des styles texte à trous
 
+	Liste des changement de classe : 
+
+	container-quiz-radio => container_quiz_choix_unique
+  container-quiz-checkbox => container_quiz_choix_mul
+	container-quiz-texte-tableau => container_quiz_texte_tableau
+	container-quiz-text-area => container_quiz_reponse_ouverte
+	container-quiz-dropdown => container_quiz_dropdown
+	container-quiz-texte-troue-select => container_quiz_texte_troue_select
+	container-quiz-texte-troue => container_quiz_texte_troue
+
+	Pour les rétros la classe dynamic est sur le container
+	retro_inline_positive => retro_inline_retro_positive
+	retro_inline_negative => retro_inline_retro_negative
+	retro_inline_neutre => retro_inline_retro_neutre
+	reponseSelectionner => answerSlct
+	wrong_answer => badAnswer
+	correct_answer => goodAnswer
+
 2.0.3(27 août 2025)
 	HOTFIX Renommer app-comp-quiz en app-comp-quiz-next pour assurer la compatibilité avec les projets existants
 

package/package.json

@@ -1,59 +1,58 @@
 {
   "name": "fcad-core-dragon",
-  "version": "2.1.0-beta.1",
+  "version": "2.1.0-beta.3",
   "private": false,
   "type": "module",
   "main": "./src/main.js",
-  "config": {
-    "projname": ""
-  },
   "scripts": {
-    "watch": "nodemon -e js,vue,html,json -x yalc publish --push",
-    "lintfix": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
-    "lintreport": "eslint src --ext .js,.vue --ignore-path .gitignore",
-    "vue": "vue",
+    "build": "vite build",
     "dev": "vite",
+    "docs:build": "vitepress build documentation",
+    "docs:dev": "vitepress dev documentation",
+    "docs:preview": "vitepress preview documentation",
     "format": "prettier --write src/",
-    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
-    "build": "vite build",
+    "lintfix": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
+    "lintreport": "eslint src --ext .js,.vue --ignore-path .gitignore",
     "preview": "vite preview",
+    "reset": "rm -rf ./node_modules package-lock.json .cache dist && npm i && npm run watch",
     "test:unit": "vitest",
-    "docs:dev": "vitepress dev documentation",
-    "docs:build": "vitepress build documentation",
-    "docs:preview": "vitepress preview documentation"
+    "vue": "vue",
+    "watch": "nodemon -e js,vue,html,json -x yalc publish --push"
+  },
+  "config": {
+    "projname": ""
   },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
   "dependencies": {
     "axios": "^1.6.8",
     "gsap": "^3.12.5",
     "idb": "^8.0.0",
     "mobile-detect": "^1.4.5",
-    "pinia": "^2.1.7",
+    "pinia": "^3.0.3",
     "tiny-emitter": "^2.1.0",
     "vue-safe-teleport": "^0.1.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/test-utils": "^2.4.0-alpha.2",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.26.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.31.0",
+    "eslint-plugin-cypress": "^5.1.0",
+    "eslint-plugin-vue": "~10.3.0",
     "jsdom": "^25.0.1",
     "nodemon": "^3.1.0",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
+    "prettier": "3.6.2",
+    "sass-embedded": "^1.91.0",
+    "vite-plugin-vue-devtools": "^8.0.2",
     "vitepress": "^1.6.3",
-    "vitest": "^2.1.5",
-    "vue": "^3.5.12",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
     "vue-router": "^4.4.5"
   },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
   "engines": {
     "node": ">0.11.9"
   }

package/src/components/AppBase.vue

@@ -36,7 +36,12 @@
       </transition>
 
       <router-view class="box" />
-
+      <div v-if="appDebugMode" class="timer">
+        <!-- <div class="timer"> -->
+        <div>Act: {{ appTimer.ISOTimeParser(activityDuration) }}</div>
+        <span>&nbsp|&nbsp</span>
+        <div>Les: {{ appTimer.ISOTimeParser(lessonDuration) }}</div>
+      </div>
       <app-icons-next :extra-icons="userExtraIcons" />
     </template>
 
@@ -61,18 +66,19 @@
 <script>
 import { mapState, mapActions } from 'pinia'
 import { useAppStore } from '../module/stores/appStore.js'
-import { timerMixin } from '../mixins/timerMixin'
+import { Timer } from '../composables/useTimer.js'
+import { IdleDetector } from '../composables/useIdleDetector.js'
 import { validateAppContent } from '../shared/validators'
-import { computed } from 'vue'
+import { version as fcadVersion } from '../../package.json'
+import { computed, h, reactive } 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)
+      lessonDuration: computed(() => this.lessonDuration), //exposing the lesson Duration variable to all components
+      elapsedIdleTime: computed(() => this.idleDetector.getElapsedTime()), //exposing idle detector elapse time to all components
+      appTimer: this.appTimer //exposing the app timer instance to all components
     }
   },
   props: {
@@ -86,7 +92,9 @@ export default {
   },
   setup() {
     const store = useAppStore()
-    return { store }
+    const appTimer = reactive(new Timer('ativityTimer')) // Making Timer instance reactive to be able to track changes
+    const idleDetector = reactive(new IdleDetector()) // Making detector instance reactive.
+    return { store, appTimer, idleDetector }
   },
 
   data() {
@@ -99,7 +107,10 @@ export default {
       buildInfoClicked: false,
       error: [],
       initialLoading: true,
-      f5KeyPressed: false
+      f5KeyPressed: false,
+      lessonDuration: 0,
+      idleTimeout: 5 * 60000, //5 mins: this is the time of inactivity before considering the user is idle
+      starterTimeout: null
     }
   },
   computed: {
@@ -117,8 +128,16 @@ export default {
       'getErrorMenu',
       'getRouteHistory',
       'getBookmarkEnabled',
+      'getAppDebugMode',
       'getApplicationSettings'
     ]),
+    appDebugMode() {
+      return this.getAppDebugMode
+    },
+    activityDuration() {
+      return this.appTimer.getTime() // return the time duration in seconds
+    },
+
     getwidth() {
       return window.innerWidth
     },
@@ -134,12 +153,9 @@ export default {
     },
     appReady() {
       let readyState = this.getAppStatus === 'ready' ? true : false
-      if (readyState) {
-        this.setInitialLoadingDone()
-      }
-
       return readyState
     },
+
     displayLang() {
       let lang = false
       const displayList = ['en-US', 'fr-FR', 'es-ES'] // list of xapi verbs language display
@@ -162,6 +178,20 @@ export default {
     }
   },
   watch: {
+    initialLoading: {
+      deep: true,
+      handler(newVal) {
+        if (newVal !== false) {
+          return
+        }
+        const eventParams = {
+          fcad_version: fcadVersion,
+          course_id: this.getAppConfigs.crs_id,
+          lesson_id: this.getAppConfigs.id
+        }
+        this.$analytics.sendEvent('user_meta', eventParams)
+      }
+    },
     'store.$state.userDataLoaded': {
       handler() {
         !this.store.$state.userDataLoaded
@@ -169,6 +199,13 @@ export default {
           : this.updateTracker('appBase', 'ready')
       },
       immediate: true
+    },
+    appReady: {
+      handler(newValue) {
+        if (newValue) {
+          this.setInitialLoadingDone()
+        }
+      }
     }
   },
 
@@ -203,24 +240,19 @@ 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.$analytics.init(this.getAppConfigs.analytics_id, this.$router)
     this.$bus.$on('start-timer', this.startAppTimer)
+    this.$bus.$on('stop-app-timer', this.stopAppTimer)
     this.$bus.$on('start-idle-detector', this.setIdleDetector)
     this.$bus.$on('stop-idle-detector', this.unsetIdleDetector)
   },
   beforeMount() {
-    window.addEventListener('keydown', this.handleF5KeyPressed)
     window.addEventListener(
       'beforeunload',
       (e) => {
+        this.executeCloseEventTriggered()
         // e.preventDefault()
         // e.returnValue = true
-
-        //prevent app to send/Save data when F5 is pressed to reload app
-        if (this.f5KeyPressed) return
-
-        this.executeCloseEventTriggered()
-
-        //debugger
       },
       true
     )
@@ -230,6 +262,7 @@ export default {
     // set the language of the app
     this.setLocale(this.getAppConfigs.lang)
     window.addEventListener('keydown', this.handleF5KeyPressed)
+    window.addEventListener('beforeunload', this.handleBeforeUnload)
   },
   beforeUnmount() {
     this.$bus.$off('set-comp-status', this.updateTracker)
@@ -241,7 +274,9 @@ export default {
     this.$bus.$off('start-idle-detector', this.setIdleDetector)
     this.$bus.$off('stop-idle-detector', this.unsetIdleDetector)
     this.$bus.$off('start-timer', this.startAppTimer)
+    this.$bus.$off('stop-app-timer', this.stopAppTimer)
     window.removeEventListener('keydown', this.handleF5KeyPressed)
+    window.removeEventListener('beforeunload', this.handleBeforeUnload)
     if (this.getAppConfigs.remote && this.unsubscribeToSetConfig)
       this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
   },
@@ -258,30 +293,82 @@ export default {
       'setMobileState',
       'setCurrentBrowser'
     ]),
+    /**
+     * @description start the app timer instance
+     * Check if the timer is already started, if yes it add the activity duration
+     * to the lesson duration and restart the timer
+     */
+
     startAppTimer() {
-      if (this.timerCurrentState == 'started') this.stopTimer('activity')
-      this.startTimer('activity')
+      if (this.$route.name === 'module') return // don't start timer when in menu
+      if (this.appTimer.getTimerState() == 'started') {
+        this.lessonDuration += this.activityDuration //
+        this.appTimer.stop() // Start the activity timer
+      }
+
+      //Delay actually one second before starting timers
+      this.starterTimeout = setTimeout(() => {
+        this.appTimer.start() // Start the activity timer
+        this.setIdleDetector() //start the idle time detector
+      }, 500)
     },
 
+    /**
+     * @description stop the app timer instance
+     * The function add the activity duration to the lesson duration and stop the timer
+     */
+    stopAppTimer() {
+      this.lessonDuration += this.activityDuration
+      this.appTimer.stop() // stop timer
+      clearTimeout(this.starterTimeout)
+    },
+
+    /**
+     * @description set the idle detector to start detecting idle time
+     * Attach DOM event listeners to reset the idle timer
+     * The idle detector will start after 1 second after the app is loaded
+     * The idle detector will pause the app timer when idle time is reached
+     */
+
     setIdleDetector() {
       setTimeout(() => {
-        this.startIdleTimer() //start the iddle dectection
+        this.idleDetector.startIdleTimer(
+          () => this.appTimer.pause(),
+          this.idleTimeout
+        )
         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)
+      }, 800)
     },
-    /*
-     * stop the idle timer and remove hidle-dector listeners
+    /**
+     * @description unset the idle detector
+     *  stop the idle timer and remove DOM event to stop listening the idle timer
      */
     unsetIdleDetector() {
-      this.stopIdleTimer()
+      this.idleDetector.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)
     },
+    /**
+     * @description reset the idle timer
+     * The function stop the idle timer and restart it
+     * start also the app timer if it was paused
+     *
+     */
+    resetIdleTimer() {
+      if (this.$route.name == 'menu' || this.$route.name == 'module') return // don't reset idle timer when in menu
+      this.idleDetector.stopIdleTimer()
+
+      if (this.appTimer.getTimerState() == 'stopped') this.appTimer.start()
+      this.idleDetector.startIdleTimer(
+        () => this.appTimer.pause(),
+        this.idleTimeout
+      )
+    },
 
     setInitialLoadingDone() {
       this.initialLoading = false
@@ -580,21 +667,31 @@ export default {
               ? (d = `PT${duration.split(':')[0]}H${duration.split(':')[1]}M${
                   duration.split(':')[2]
                 }S`)
-              : (d = `PT${this.activityDuration.split(':')[0]}H${
-                  this.activityDuration.split(':')[1]
-                }M${this.activityDuration.split(':')[2]}S`)
+              : (d = `PT${
+                  this.appTimer
+                    .ISOTimeParser(this.activityDuration)
+                    .split(':')[0]
+                }H${
+                  this.appTimer
+                    .ISOTimeParser(this.activityDuration)
+                    .split(':')[1]
+                }M${
+                  this.appTimer
+                    .ISOTimeParser(this.activityDuration)
+                    .split(':')[2]
+                }S`)
 
             stmt.result['duration'] = d
             //Set the completion status of the result
             if (completion) stmt.result['completion'] = completion
           }
 
-          // ===================== Extension of the Object definition =====================//
           if (
             extensions &&
             extensions.constructor === Array &&
             extensions.length > 0
           ) {
+            // ===================== Extension of the Object definition =====================//
             //Validate each entry given in the extension Array
             extensions.forEach((e) => {
               //entry must be of type Object
@@ -622,7 +719,6 @@ export default {
           //============================================================
           stmtsQueue.push(stmt)
         })
-
         this.$xapi._sendStatements(stmtsQueue, cb, withFetch)
       }
     },
@@ -681,7 +777,7 @@ export default {
             }
           }
         ],
-        duration: this.lessonDuration
+        duration: this.appTimer.ISOTimeParser(this.lessonDuration)
       }
 
       const endStmt = { ...stmt }
@@ -732,7 +828,8 @@ export default {
         option
       ) //send xapi statement
 
-      if (this.timerState === 'started') setTimeout(() => this.stopTimer(), 0) //clear the timer
+      if (this.appTimer.getTimerState() === 'started')
+        setTimeout(() => this.stopAppTimer(), 0) //clear the timer
 
       if (cb) cb()
     },
@@ -750,7 +847,7 @@ export default {
       this.setRouteHistory([]) // resetting  store record for all last visited pages
 
       // this.$bus.$emit('stop-timer')
-      this.stopTimer()
+      this.stopAppTimer()
       if (this.getModuleInfo.packageType !== 'xapi') return
 
       if (!this.getConnectionInfo || this.getConnectionInfo.remote == false)
@@ -929,7 +1026,7 @@ export default {
       if (e) e.focus()
     },
     /**
-     * @description Mothods to validate that application settings are correctly
+     * @description Method to validate that application settings are correctly
      * Opens error component when configurations are not correct
      *
      */
@@ -981,9 +1078,24 @@ export default {
           'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
         )
     },
-
+    /**
+     * @description Handle the keydown event to detect if F5 key was pressed
+     * The function set the f5KeyPressed to true if F5 key was pressed
+     * @param {Event} e - keydown event
+     */
     handleF5KeyPressed(e) {
       this.f5KeyPressed = e.code == 'F5'
+    },
+
+    /**
+     * @description Handle the beforeunload event to save data when the user close the app or reload the app
+     * The function check if the F5 key was pressed to avoid sending data when the user reload the app
+     */
+    handleBeforeUnload() {
+      //prevent app to send/Save data when F5 is pressed to reload app
+      if (this.f5KeyPressed) return
+
+      this.executeCloseEventTriggered()
     }
   }
 }
@@ -1039,4 +1151,20 @@ export default {
     transform: rotate(360deg);
   }
 }
+
+.timer {
+  position: sticky; /* Sticks inside the parent container */
+  bottom: 90%; /* Sticks to the top edge of the parent */
+  left: 100%; /* Sticks to the left edge of the parent */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 1em;
+  width: fit-content;
+  color: #333;
+  opacity: 0.9;
+  background-color: #eaabb6b3; /* Optional: ensures readability when content scrolls */
+  padding: 5px 12px; /* Some breathing space */
+  z-index: 1000; /* Keeps it above other elements */
+}
 </style>

package/src/components/AppBaseButton.test.js

@@ -11,7 +11,6 @@ describe('AppBaseButton Tests', () => {
     })
     expect(wrapper.find('button').exists()).toBeTruthy()
   })
-
   it('should fire click event', async () => {
     const wrapper = mount(AppBaseButton, {
       props: defaultProps