fcad-core-dragon 2.0.1 → 2.0.2-beta.1

package/CHANGELOG

@@ -1,8 +1,23 @@
-2.0.1(12 juillet 2025)
+2.0.2-beta.1(19 août 2025)
+	Exercices : Réécriture complète de la logique derrière les exercices
+
+	Rappel de réponse : Mise à jour automatique du contenu quand la réponse change.
+
+	Accessibilité : Balise fieldset qui annonce la marche \ suivre quand on arrive sur un exercice
+
+	Lecteur audio : meilleur responsive
+
+	Ajout de composants Skeleton Loader (Vuetify) au moment du chargement du contenu des exercices
+
+	Nouveau nom de classe dans les exercices texte tableau
+
+2.0.1(12 août 2025)
 	carroussel : Changement du titre h3 pour une balise p avec une classe
 
 	TOC : Alignement vertical du libellé "terminé"
 
+	Nouveau fichier (vuetify.scss) pour overrider les variables SASS vuetify, La liste complète des variables SASS globales pouvant être modifiées se trouve ici : https://vuetifyjs.com/en/api/globals/#sass
+
 2.0.1-beta.1(12 mai 2025)
 	Vitepress : La documentation du FCAD 2 est maintenant dans le dossier "documentation"
 

package/package.json

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

package/src/$locales/en.json

@@ -75,7 +75,9 @@
   },
   "label": {
     "side_panel": "side panel",
-    "timer": "estimated time"
+    "timer": "estimated time",
+    "info_long": "Display notes and references",
+    "note_reference": "???"
   },
   "message": {
     "err_download_file": "The file download has failed.",
@@ -83,7 +85,7 @@
     "first_option_dropdown": "Choose an option",
     "no_attempts": "You have no more attempts.",
     "loading_state_msg": "Loading. Please wait...",
-    "progress_card": "État d’avancement:",
+    "progress_card": "Progress status:",
     "recall_done": "You have answered the question :",
     "recall_undone": "You have not answered the question.",
     "skip_content": "Skip to the main content."
@@ -129,7 +131,19 @@
     "goodAnswer": "Good answer",
     "badAnswer": "Wrong answer",
     "neutralAnswer": "Neutral answer",
-    "answers": "Answer choices"
+    "answers": "Answer choices",
+    "radioFieldset": "Select one answer from the following",
+    "checkboxFieldset": "Select one or more answers from the following",
+    "options": "options",
+    "textTableFieldset1": "Fill the",
+    "textTableFieldset2": "following text fields",
+    "dropdownFieldsetSingle": "Select an answer in the following dropdown list",
+    "dropdownFieldsetMulti1": "Select an answer in the",
+    "dropdownFieldsetMulti2": "following dropdown lists",
+    "textToFillFieldset1": "In the following text, fill the",
+    "textToFillFieldset2": "text fields",
+    "textToFillDropdownFieldset1": "In the following text, Select an answer in the",
+    "textToFillDropdownFieldset2": "text fields"
   },
   "a11y_sr": {
     "time": {
@@ -140,4 +154,4 @@
     "seek_slider": "Seek slider",
     "range_expression": "at %x of %y."
   }
-}
+}

package/src/$locales/fr.json

@@ -38,7 +38,9 @@
   },
   "label": {
     "side_panel": "fenêtre latérale",
-    "timer": "temps estimé"
+    "timer": "temps estimé",
+    "info_long": "Afficher les notes et les mentions de sources",
+    "note_reference": "Note de reference"
   },
   "message": {
     "err_download_file": "Le téléchargement de ce fichier a échoué.",
@@ -46,7 +48,7 @@
     "first_option_dropdown": "Choisir une option",
     "no_attempts": "Vous n'avez plus d'essai.",
     "loading_state_msg": "Chargement. Veuillez patienter...",
-    "progress_card": "État d’avancement:",
+    "progress_card": "État d’avancement :",
     "recall_done": "Vous avez répondu précédemment à la question :",
     "recall_undone": "Vous n'avez pas répondu à la question concernée.",
     "skip_content": "Passer au contenu principal"
@@ -92,7 +94,19 @@
     "goodAnswer": "Bonne réponse",
     "badAnswer": "Mauvaise réponse",
     "neutralAnswer": "Réponse neutre",
-    "answers": "Choix de réponses"
+    "answers": "Choix de réponses",
+    "radioFieldset": "Sélectionnez une réponse parmi les",
+    "checkboxFieldset": "Sélectionnez une ou plusieurs réponses parmi les",
+    "options": "options suivantes",
+    "textTableFieldset1": "Remplissez les",
+    "textTableFieldset2": "champs de texte suivants",
+    "dropdownFieldsetSingle": "Sélectionnez une réponse dans la liste déroulante suivante",
+    "dropdownFieldsetMulti1": "Sélectionnez une réponse dans les",
+    "dropdownFieldsetMulti2": "listes déroulantes suivantes",
+    "textToFillFieldset1": "Dans le texte qui suit, remplissez les",
+    "textToFillFieldset2": "champs de texte",
+    "textToFillDropdownFieldset1": "Dans le texte qui suit, Sélectionnez une réponse dans les",
+    "textToFillDropdownFieldset2": "listes déroulantes"
   },
   "a11y_sr": {
     "time": {

package/src/components/AppBase.vue

@@ -45,7 +45,8 @@
       :model-value="!appReady && initialLoading"
       class="align-center justify-center"
       scrim="white"
-      opacity="0.8"
+      opacity="0.9"
+      :persistent="true"
     >
       <div class="text-center grp-spinners">
         <v-icon id="icon_loading" icon="mdi-dots-circle" size="x-large" />
@@ -97,7 +98,8 @@ export default {
       resizeiPad: false,
       buildInfoClicked: false,
       error: [],
-      initialLoading: true
+      initialLoading: true,
+      f5KeyPressed: false
     }
   },
   computed: {
@@ -109,15 +111,13 @@ export default {
       'getAppStatus',
       'getUserInteraction',
       'getConnectionInfo',
-      'getDataFromServer',
       'getAllActivities',
       'getMediaPlaybarValues',
       'getAppConfigs',
       'getErrorMenu',
       'getRouteHistory',
       'getBookmarkEnabled',
-      'getApplicationSettings',
-      'getCompStatusTracker'
+      'getApplicationSettings'
     ]),
     getwidth() {
       return window.innerWidth
@@ -162,87 +162,14 @@ export default {
     }
   },
   watch: {
-    getConnectionInfo: {
-      deep: true,
-      //in development environment (localhost), don't wait for the axios call
-      immediate: import.meta.env.DEV,
+    'store.$state.userDataLoaded': {
       handler() {
-        /**
-         * Attach listener to detect when user navigates to a new page, switches tabs, closes the tab, minimizes or closes the browser, or, on mobile,
-         *  switches from the browser to a different app To save user data to LRS/LMS.
-         * As of 06/2021 MDN Web Doc advise preferring the 'visibilitychange' event over 'unload/beforeunload'
-         * event to send data over a serveur.
-         * Ref:https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event
-         * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
-         */
-
-        if (!this.getConnectionInfo)
-          return setTimeout(() => {
-            this.setProgress()
-          }, 200)
-
-        if (this.getIsMobile) {
-          document.addEventListener(
-            'visibilitychange',
-            () => {
-              if (document.visibilityState === 'hidden') {
-                this.executeCloseEventTriggered()
-              }
-            },
-            false
-          )
-        }
-        // initialize scorm Commuinication with LMS || xAPI LRS
-        if (this.getModuleInfo.packageType === 'scorm') {
-          this.$scorm.Initialize()
-          setTimeout(() => {
-            this.setProgress()
-          }, 200)
-        } else if (
-          this.getModuleInfo.packageType === 'xapi' &&
-          this.getConnectionInfo &&
-          this.getConnectionInfo.actor &&
-          this.getConnectionInfo.remote
-        ) {
-          const {
-            auth,
-            endpoint,
-            registration = this.$xapi.ruuid()
-          } = this.getConnectionInfo
-
-          const config = {
-            auth,
-            endpoint,
-            registration,
-            activity_platform: `SIPI_organizationId`
-          }
-
-          this.$xapi._configLRS(config) // configure and launch LRS
-
-          setTimeout(() => {
-            this.fetchDataFromServer().then(() => {
-              setTimeout(() => {
-                this.setProgress()
-              }, 200)
-            })
-          }, 200)
-        }
-      }
+        !this.store.$state.userDataLoaded
+          ? this.updateTracker('appBase', 'loading')
+          : this.updateTracker('appBase', 'ready')
+      },
+      immediate: true
     }
-    //===========FOR TESTING TIMER TIMEOUT====//
-    // elapsedIdleTime: {
-    //   handler() {
-    //     console.log(
-    //       '⌛:',
-    //       this.elapsedIdleTime,
-    //       this.timerCurrentState,
-    //       this.activityDuration
-    //     )
-
-    //     //max idle time allowed 300s (5 min)
-    //   },
-    //   immediate: true
-    // }
   },
 
   created() {
@@ -252,8 +179,8 @@ export default {
     //Declare loading state if no error was detected
 
     if (!this.error.length) {
-      this.updateTracker('appBase', 'loading')
-      this.setAppConfigs(this.appConfig)
+      // this.updateTracker('appBase', 'loading')
+      this.initializeApp(this.appConfig)
     }
 
     window.versionFCAD = this.$helper.getFcadVersionString()
@@ -281,12 +208,19 @@ export default {
     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
     )
@@ -295,6 +229,7 @@ export default {
   mounted() {
     // set the language of the app
     this.setLocale(this.getAppConfigs.lang)
+    window.addEventListener('keydown', this.handleF5KeyPressed)
   },
   beforeUnmount() {
     this.$bus.$off('set-comp-status', this.updateTracker)
@@ -306,7 +241,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)
-    if (this.getAppConfigs.remote) this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
+    window.removeEventListener('keydown', this.handleF5KeyPressed)
+    if (this.getAppConfigs.remote && this.unsubscribeToSetConfig)
+      this.unsubscribeToSetConfig() //stop watching changing in store to save to local storage
   },
   methods: {
     ...mapActions(useAppStore, [
@@ -317,7 +254,7 @@ export default {
       'setApplicationSettings',
       'setMediaPlaybarValues',
       'updateCompStatusTracker',
-      'setAppConfigs',
+      'initializeApp',
       'setMobileState',
       'setCurrentBrowser'
     ]),
@@ -425,145 +362,6 @@ export default {
       return device
     },
 
-    async fetchDataFromServer() {
-      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 || {}
-      //====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 || {}
-      //Update the App Store data
-      this.updateDataFetchFromServer({
-        userProgress,
-        routeHistory,
-        lessonPosition,
-        completedState,
-        playbarValues,
-        applicationSettings
-      }).then(() => {
-        this.updateTracker('appBase_fetch', 'ready')
-      })
-    },
-
     executeCloseEventTriggered() {
       if (
         this.getModuleInfo.packageType === 'scorm' &&
@@ -582,113 +380,6 @@ export default {
       }
     },
 
-    async setProgress() {
-      const packageType = this.getModuleInfo.packageType
-      switch (packageType) {
-        case 'scorm':
-          {
-            // Get saved data from suspend_data or from localStorage to update the store:
-            // LMS is connected
-            if (this.$scorm.initialized) {
-              // 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
-              }
-              // chacked if there is a existing record in the LMS
-              if (this.$scorm.GetValue('cmi.suspend_data') !== '') {
-                const scormRecord = this.$scorm
-                  .GetValue('cmi.suspend_data')
-                  .replace(/\\/g, '')
-                const { userData, routeHistory, userSettings } =
-                  JSON.parse(scormRecord)
-
-                this.setUserMetaData(userData)
-                this.setRouteHistory(routeHistory) // update store recored with existing record
-                this.setApplicationSettings(userSettings) // update store recored with existing record
-              }
-              // check for the bookmark existance in LMS
-              if (
-                this.$scorm.GetValue('cmi.core.lesson_location', false) !== ''
-              ) {
-                let lessonPosition = this.$scorm.GetValue(
-                  'cmi.core.lesson_location',
-                  false
-                )
-                if (this.bookmarkActive && lessonPosition)
-                  this.$router.push({ name: lessonPosition }) //Should Redirect to bookmark
-              }
-
-              // No LMS use LocalStorage record
-            } else {
-              this.$idb.openDB().then(() => {
-                this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
-                  if (res && res.$record) {
-                    const { routeHistory, userSettings, progress } = res.$record
-                    this.setUserMetaData(progress) // update store record with existing record
-                    this.setRouteHistory(routeHistory) // update store record with existing route info
-                    if (userSettings) this.setApplicationSettings(userSettings) // update store record with existing user settings
-                  }
-                })
-              })
-            }
-          }
-          break
-
-        case 'xapi':
-          {
-            if (
-              this.getConnectionInfo &&
-              this.getConnectionInfo.actor &&
-              this.getConnectionInfo.remote
-            ) {
-              if (!this.getDataFromServer) return
-              //Try to get the user progress from LRS
-              const {
-                playbarValues,
-                routeHistory,
-                userProgress,
-                lessonPosition,
-                applicationSettings
-              } = this.getDataFromServer
-
-              this.setUserMetaData(userProgress) // update store record with existing record
-              this.setRouteHistory(routeHistory) // update store record with existing record
-
-              if (playbarValues) this.setMediaPlaybarValues(playbarValues) // update store record with existing record
-
-              if (applicationSettings)
-                this.setApplicationSettings(applicationSettings) // set the user preferred settings
-
-              //Handel bookmark navigation
-              if (this.bookmarkActive && lessonPosition)
-                this.$router.push({ name: lessonPosition }) //Should Redirect to bookmark
-            } else {
-              //Get existing records for user data in local store
-              this.$idb.openDB().then(() => {
-                this.$idb.getFromDB(this.getModuleInfo.idbID).then((res) => {
-                  if (res && res.$record) {
-                    const { routeHistory, userSettings, progress } = res.$record
-                    this.setUserMetaData(progress) // update store record with existing record
-                    this.setRouteHistory(routeHistory) // update store record with existing route info
-
-                    if (userSettings) {
-                      this.setApplicationSettings(userSettings) // update store record with existing user setting
-                    }
-                  }
-                })
-              })
-            }
-          }
-
-          break
-      }
-      this.updateTracker('appBase', 'ready')
-    },
     updateTracker(name, status) {
       this.updateCompStatusTracker({ name, status })
     },
@@ -772,9 +463,9 @@ export default {
                     //ID is of activity (menu, conclusion, activite, intro )
                     const activityStr = activityId.split('/').toReversed()[0]
 
-                    if (!this.getDataFromServer)
+                    if (!this.getUserInteraction[activityId])
                       return this.$xapi.verbs.initialized
-                    const { userProgress } = this.getDataFromServer
+
                     let activity_ref
                     //Define the activity reference
                     if (['menu', 'introduction', 'A00'].includes(activityStr))
@@ -786,7 +477,10 @@ export default {
                       activity_ref = aNum.length > 1 ? `A${aNum}` : `A0${aNum}`
                     } else activity_ref = activityStr // should be AXX
 
-                    if (userProgress && userProgress[activity_ref])
+                    if (
+                      this.getUserInteraction &&
+                      this.getUserInteraction[activity_ref]
+                    )
                       return this.$xapi.verbs.resumed
                     else return this.$xapi.verbs.initialized
                   }
@@ -1262,7 +956,6 @@ export default {
       //error if There is more than one activity when is_single_activity
       switch (true) {
         case isSingleActivity && activitiesList.size > 1:
-          console.log('ici')
           errMessage = `La configuration choisie ne permet pas d'avoir plus d'une activité dans l'application. \n Vous devez soit désactiver l'option 💲<b>is_single_activity</b> ou retirer TOUTES les autres activités`
 
           consoleMsg = `Cannot have more than 1 activity with this settings configuration. Either disable 💲is_single_activity or DELETE ALL others activities`
@@ -1270,14 +963,12 @@ export default {
           break
 
         case isSingleActivity && !noMenu:
-          console.log('LA')
           errMessage = `Le MENU n'est pas disponible avec la configuration choisie.\n Vous devez soit désactiver l'option  💲<b>no_menu</b> ou l'option 💲<b>is_single_activity</b>`
           consoleMsg = `Cannot have MENU with current settings configuration. Either set 💲no_menu:false or 💲is_single_activity:false`
           this.error.push(errMessage)
           break
 
         case err:
-          console.log('LA LA')
           errMessage = `Il y une erreur dans votre fichier menu.setting.js. \n ouvrez votre console pour voir l'erreur et corriger la dans menu.setting.js  `
           consoleMsg = this.getErrorMenu
           this.error.push(errMessage)
@@ -1289,6 +980,10 @@ export default {
           `%c  WARNING!>>> ${consoleMsg}`,
           'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
         )
+    },
+
+    handleF5KeyPressed(e) {
+      this.f5KeyPressed = e.code == 'F5'
     }
   }
 }