fcad-core-dragon 2.0.0-beta.5 → 2.0.0-beta.7

package/src/$locales/fr.json

@@ -1,16 +1,14 @@
 {
   "button": {
-    "alert_close":"Fermer cette fenêtre",
-    "cancel_pop": "Annuler",
     "carousel_next": "Suivant",
     "carousel_prev": "Précédent",
     "confirm_pop": "Confirmer",
-    "full_screen_on": "Plein-écran",
-    "full_screen_off": "Quitter le mode plein-écran",
+    "full_screen_on": "Plein écran",
+    "full_screen_off": "Quitter le mode plein écran",
     "go_to_first_page": "Aller à la première page",
     "go_to_next_page": "Aller à la page suivante",
     "go_to_previous_page": "Aller à la page précédente",
-    "go_to_lesson" : "Aller à la leçon suivante",
+    "go_to_lesson": "Aller à la leçon suivante",
     "go_to_menu": "Aller au sommaire de la leçon",
     "info": "Info",
     "menu": "Début",
@@ -30,20 +28,21 @@
     "subtitle_off": "Masquer les sous-titres",
     "subtitle_on": "Afficher les sous-titres",
     "submit": "Valider",
-    "toc":"Progression",
-    "transcript_off": "Fermer la transcription",
+    "toc": "Progression",
+    "toc_title": "Afficher la table des matières de l’activité",
+    "transcript_off": "Masquer la transcription",
     "transcript_on": "Afficher la transcription",
     "unmute": "Activer le son",
     "volume": "Volume",
     "closePopUp": "Fermer"
   },
   "label": {
-    "side_panel":"fenêtre latérale",
-    "timer":"temps estimé"
+    "side_panel": "fenêtre latérale",
+    "timer": "temps estimé"
   },
   "message": {
     "err_download_file": "Le téléchargement de ce fichier a échoué.",
-    "dropdown_list":"Liste déroulante",
+    "dropdown_list": "Liste déroulante",
     "first_option_dropdown": "Choisir une option",
     "no_attempts": "Vous n'avez plus d'essai.",
     "loading_state_msg": "Chargement. Veuillez patienter...",
@@ -58,11 +57,11 @@
   "text": {
     "activity": "Activité",
     "activity_title": "Mes activités",
-    "activity_progress":"État d’avancement :",
-    "carousel":"Carrousel",
+    "activity_progress": "État d’avancement :",
+    "carousel": "Carrousel",
     "conclusion": "Conclusion",
     "complete": "Terminé",
-    "error":"erreur",
+    "error": "erreur",
     "introduction": "Introduction",
     "lesson": "Leçon",
     "quiz": "Mot complétant la phrase",
@@ -71,15 +70,15 @@
       "for_textarea": "Écrivez ici.",
       "for_title_btn_progress": "Cliquer pour découvrir le contenu"
     },
-    "of":"de",
-    "slide":"Diapositive",
+    "of": "de",
+    "slide": "Diapositive",
     "title_note": "Note(s)",
     "title_credit": "Source(s)",
     "err_credit": "Le texte de la page ne comporte pas d’appel de note correspondant à cette note-ci. Un appel de note doit être ajouté.",
     "title_link_bas": "Revenir au texte",
     "title_link_call": "Accéder à la note",
-    "title_content_view":"Sommaire des activités",
-    "toc":"Table des matières",
+    "title_content_view": "Sommaire",
+    "toc": "Table des matières",
     "transcript": "Transcription"
   },
   "user_settings": {
@@ -89,11 +88,11 @@
     "subtitles": "Activer le soutitrage par défault",
     "title": "Paramètres"
   },
-  "quizState":{
-    "goodAnswer":"Bonne réponse",
-    "badAnswer":"Mauvaise réponse",
-    "neutralAnswer":"Réponse neutre",
-    "answers" : "Choix de réponses"
+  "quizState": {
+    "goodAnswer": "Bonne réponse",
+    "badAnswer": "Mauvaise réponse",
+    "neutralAnswer": "Réponse neutre",
+    "answers": "Choix de réponses"
   },
   "a11y_sr": {
     "time": {
@@ -104,4 +103,4 @@
     "seek_slider": "Barre de lecture",
     "range_expression": "à %x sur %y."
   }
-}
+}

package/src/assets/data/onboardingMessages.json

@@ -1,47 +1,47 @@
-{
-  "message_1": {
-    "type": "popup-avert",
-    "value": {
-      "title": "Bienvenue dans la visite guidée du FCAD !",
-      "hypertext_1": "<p>Le bouton Confirmer vous fera passer à la prochaine étape de la visite.</p><p>Vous pouvez y mettre fin en tout temps avec le bouton Annuler.</p>"
-    }
-  },
-  "message_2": {
-    "type": "tooltip",
-    "value": {
-      "target": "activity_progress",
-      "title": "Navigation secondaire",
-      "content": "<p>Les flèches permettent de passer à la page précédente ou suivante de l'activité.</p><p>Les rectangles représentent une section de l'activité.</p>"
-    }
-  },
-  "message_3": {
-    "type": "tooltip",
-    "value": {
-      "target": "btn_back_summary",
-      "title": "Navigation secondaire",
-      "content": "<p>Ce bouton permet de retourner au sommaire de l'activité en tout temps.</p>"
-    }
-  },
-  "message_4": {
-    "type": "tooltip",
-    "value": {
-      "target": "primary_activity",
-      "title": "Navigation principale",
-      "content": "<p>La navigation principale permet de valider ses réponses de quiz et de passer à la page suivante.</p>"
-    }
-  },
-  "message_5": {
-    "type": "popup-avert",
-    "value": {
-      "title": "Visite guidée",
-      "hypertext_1": "<p>Message pour la barre de lecture.</p>"
-    }
-  },
-  "message_6": {
-    "type": "popup-avert",
-    "value": {
-      "title": "Visite guidée",
-      "hypertext_1": "<p>Message pour les Paramètres.</p>"
-    }
-  }
-}
+{
+  "message_1": {
+    "type": "popup-avert",
+    "value": {
+      "title": "Bienvenue dans la visite guidée du FCAD !",
+      "hypertext_1": "<p>Le bouton Confirmer vous fera passer à la prochaine étape de la visite.</p><p>Vous pouvez y mettre fin en tout temps avec le bouton Annuler.</p>"
+    }
+  },
+  "message_2": {
+    "type": "tooltip",
+    "value": {
+      "target": "activity_progress",
+      "title": "Navigation secondaire",
+      "content": "<p>Les flèches permettent de passer à la page précédente ou suivante de l'activité.</p><p>Les rectangles représentent une section de l'activité.</p>"
+    }
+  },
+  "message_3": {
+    "type": "tooltip",
+    "value": {
+      "target": "btn_back_summary",
+      "title": "Navigation secondaire",
+      "content": "<p>Ce bouton permet de retourner au sommaire de l'activité en tout temps.</p>"
+    }
+  },
+  "message_4": {
+    "type": "tooltip",
+    "value": {
+      "target": "primary_activity",
+      "title": "Navigation principale",
+      "content": "<p>La navigation principale permet de valider ses réponses de quiz et de passer à la page suivante.</p>"
+    }
+  },
+  "message_5": {
+    "type": "popup-avert",
+    "value": {
+      "title": "Visite guidée",
+      "hypertext_1": "<p>Message pour la barre de lecture.</p>"
+    }
+  },
+  "message_6": {
+    "type": "popup-avert",
+    "value": {
+      "title": "Visite guidée",
+      "hypertext_1": "<p>Message pour les Paramètres.</p>"
+    }
+  }
+}

package/src/components/AppBase.vue

@@ -25,6 +25,7 @@
         <div
           v-if="showBuildInfo && !buildInfoClicked"
           id="build-info"
+          aria-hidden="true"
           @click="buildInfoClicked = true"
         >
           <span>{{ getModuleInfo.courseID.toUpperCase() }}</span>
@@ -106,7 +107,9 @@ export default {
       'getAppConfigs',
       'getErrorMenu',
       'getRouteHistory',
-      'getBookmarkEnabled'
+      'getBookmarkEnabled',
+      'getApplicationSettings',
+      'getCompStatusTracker'
     ]),
     getwidth() {
       return window.innerWidth
@@ -165,7 +168,11 @@ export default {
          * https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon
          */
 
-        if (!this.getConnectionInfo) return
+        if (!this.getConnectionInfo)
+          return setTimeout(() => {
+            this.setProgress()
+          }, 200)
+
         if (this.getIsMobile) {
           document.addEventListener(
             'visibilitychange',
@@ -178,8 +185,12 @@ export default {
           )
         }
         // initialize scorm Commuinication with LMS || xAPI LRS
-        if (this.getModuleInfo.packageType === 'scorm') this.$scorm.Initialize()
-        else if (
+        if (this.getModuleInfo.packageType === 'scorm') {
+          this.$scorm.Initialize()
+          setTimeout(() => {
+            this.setProgress()
+          }, 200)
+        } else if (
           this.getModuleInfo.packageType === 'xapi' &&
           this.getConnectionInfo &&
           this.getConnectionInfo.actor &&
@@ -207,13 +218,12 @@ export default {
               }, 200)
             })
           }, 200)
-        } else this.setProgress()
+        }
       }
     }
   },
 
   created() {
-    this.bookmarkActive
     if (import.meta.env.DEV) {
       this.checkForErrors()
     }
@@ -301,6 +311,8 @@ export default {
         else if (lang === 'english' || lang === 'anglais') lang = 'en'
         else lang = lang.substring(0, 2).toLowerCase()
         this.$i18n.locale = lang
+        //Set vuetify locale
+        this.$vuetify.locale.current = lang
       }
     },
 
@@ -366,36 +378,53 @@ export default {
       if (this.getModuleInfo.packageType !== 'xapi') return
       if (!this.getConnectionInfo || !this.getConnectionInfo.remote) return
 
-      const progress = await this.$xapi._getProgress(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        this.getConnectionInfo.activity_id
-      )
-      const { routeHistory = [], ...userProgress } = progress
+      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 completedState = await this.$xapi._getLessonStatus(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        this.getConnectionInfo.activity_id
-      )
+      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 lessonPosition = await this.$xapi._getLessonPosition(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        this.getConnectionInfo.activity_id
-      )
-      //======= End UPCOMING: Uncomment when this property are integrated ========
-      //Get existing record for play bar settings. Play bar info is from the activity Parent ID and not activity id
-      const _url = new URL(this.getConnectionInfo.activity_id)
-      const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
-      const playbarValues = await this.$xapi._getPlaybarValues(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        parentID
-      )
+      const fetchParams = [
+        lessonProgressParam,
+        lessonStateParam,
+        lessonPosionParam,
+        playbarParam,
+        preferencesParam
+      ]
+
+      const {
+        userData,
+        savedPoint,
+        preferredSettings,
+        playbarValues,
+        lessonStatus
+      } = await this.$xapi._getBulkData(fetchParams)
 
-      //=======UPCOMING: Uncomment lines bellow when these properties are integrated ========
-      // Get existing record for user preferred settings
-      const applicationSettings = await this.$xapi._getPreferredSettings(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        parentID
-      )
+      const { routeHistory = [], ...userProgress } = userData
+
+      const completedState = lessonStatus || {}
+      const lessonPosition = savedPoint || ''
+      const applicationSettings = preferredSettings || {}
       //Update the App Store data
       this.updateDataFetchFromServer({
         userProgress,
@@ -405,15 +434,6 @@ export default {
         playbarValues,
         applicationSettings
       }).then(() => {
-        // console.log('DATA FROM SERVER', {
-        //   userProgress,
-        //   routeHistory,
-        //   lessonPosition,
-        //   completedState,
-        //   playbarValues,
-        //   applicationSettings
-        // })// for testing
-
         this.updateTracker('appBase_fetch', 'ready')
       })
     },
@@ -423,8 +443,7 @@ export default {
         this.getModuleInfo.packageType === 'scorm' &&
         this.$scorm.initialized
       ) {
-        this.$bus.$emit('save-to-scorm') // emit event to save to scorm before closing the app
-        this.$scorm.Finish()
+        this.$bus.$emit('save-to-scorm', 'disconnect') // emit event to save to scorm before closing the app
       }
       //Xapi context
       else if (
@@ -439,41 +458,59 @@ 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) {
-            // 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 userProgress = JSON.parse(scormRecord).userData
-              const routeHistory = JSON.parse(scormRecord).routeHistory
-
-              this.setUserMetaData(userProgress)
-              this.setRouteHistory(routeHistory) // update store recored with existing record
-              //Should Redirect to the last Route in History
-              // const lastRoute = routeHistory.toReversed()[0]
-              // this.$router.push({ name: lastRoute.parent._namedRoute })
-            }
+          {
+            // 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
-                }
+              // 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':
@@ -576,7 +613,6 @@ export default {
            * The statement is sent at module level. there is no id
            *  the Statement must be sent at the course level: There course_id exist and id is the course_id
            */
-
           if (id && id !== crsParams.courseID)
             activityId = `${this.getConnectionInfo.activity_id}/${id}`
           else if (crsParams.courseID && id === crsParams.courseID)
@@ -758,7 +794,7 @@ export default {
 
               stmt.object.definition['extensions'] = {
                 ...stmt.object.definition['extensions'],
-                [`${this.getConnectionInfo.activity_id}/${e.id}`]: e.content
+                [`${activityId}/${e.id}`]: e.content
               }
             })
           }
@@ -778,6 +814,7 @@ export default {
     endLesson(cb, option = true) {
       cb = cb || null
       let text
+
       //Defining the text to display for stmt description and definition
       switch (this.$i18n.locale) {
         case 'fr':
@@ -832,10 +869,6 @@ export default {
       //================================STATEMENT FOR THE PLAYBAR ===============================================
       //Creating custom statement
       const stmtPlaybar = {
-        id: (() => {
-          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
-          else return null
-        })(),
         verb: 'played',
         definition: text,
         description: text,
@@ -853,8 +886,8 @@ export default {
       //Creating custom statement
       const stmtUserSettings = {
         id: (() => {
-          if (this.getModuleInfo.courseID) return this.getModuleInfo.courseID
-          else return null
+          if (!this.getModuleInfo.courseID) return null
+          return this.getModuleInfo.courseID
         })(),
         verb: 'preferred',
         definition: text,
@@ -968,27 +1001,60 @@ export default {
       this.sendXapiStatements([stmtUserSettings, exitStmt, endStmt])
 
       this.$bus.$emit('set-comp-status', 'appBase', 'ready')
-
+      const actorMbox = this.getConnectionInfo.actor.mbox.replace('mailto:', '')
+      const activityId = this.getConnectionInfo.activity_id
       // Creating a asynchronous fecth method that would resolve after a 2 second
       const fetchData = async () => {
         //funtion that will make a multiple request on the server
         const requests = async () => {
-          const _url = new URL(this.getConnectionInfo.activity_id)
+          const _url = new URL(activityId)
           const parentID = `${_url.origin}/${this.getModuleInfo.courseID}` // redefining activity id for statement
 
-          const progress = await this.$xapi._getProgress(
-            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-            this.getConnectionInfo.activity_id
-          )
-          const lessonPosition = await this.$xapi._getLessonPosition(
-            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-            this.getConnectionInfo.activity_id
-          )
-          const applicationSettings = await this.$xapi._getPreferredSettings(
-            this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-            parentID
-          )
-          return { progress, lessonPosition, applicationSettings }
+          const lessonProgressParam = { email: actorMbox, activityId }
+          const lessonStateParam = {
+            email: actorMbox,
+            activityId,
+            verb: 'suspended'
+          }
+          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
+          ]
+
+          // Using Promise.all to make parallel requests
+          const {
+            userData,
+            savedPoint,
+            preferredSettings,
+            playbarValues,
+            lessonStatus
+          } = await this.$xapi._getBulkData(fetchParams)
+
+          return {
+            userData,
+            savedPoint,
+            preferredSettings,
+            playbarValues,
+            lessonStatus
+          }
         }
         return new Promise((resolve) => {
           setTimeout(() => resolve(requests()), 2000)
@@ -996,11 +1062,12 @@ export default {
       }
 
       // Make request over user current data after sending statement to assure that the resetting worked
+
       const usrData = await fetchData()
       this.$bus.$emit('reset-complete')
       console.warn('😄 USER STATUS: ', {
-        User: this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        ActivityID: this.getConnectionInfo.activity_id,
+        userID: actorMbox,
+        activityId,
         Record: usrData
       })
     },

package/src/components/AppBaseButton.vue

@@ -89,5 +89,7 @@ export default {
 .btn {
   display: flex;
   align-items: center;
+  //test
+  //test
 }
 </style>