fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.2

package/src/mixins/$pageMixins.js

@@ -8,21 +8,7 @@ import { mapGetters } from 'vuex'
 const $extendsPage = {
   // lazy laoding of components
   components: {
-    AppCompMediaPlayer: () =>
-      import(
-        /* webpackChunkName: "MediaPlayerCompnent" */
-        '../components/AppCompMediaPlayer.vue'
-      ),
-    AppCompMenuItem: () =>
-      import(
-        /* webpackChunkName: "MenuItemCompenent" */
-        '../components/AppCompMenuItem.vue'
-      ),
-    AppCompQuiz: () =>
-      import(
-        /* webpackChunkName: "QuizComponent" */
-        '../components/AppCompQuiz.vue'
-      )
+    AppCompQuiz: () => import('../components/AppCompQuiz.vue')
   },
 
   data: () => {
@@ -33,8 +19,8 @@ const $extendsPage = {
       anchorInfo: null,
       drModeActive: null,
       error: null,
-      credits: null,
-      notes: null
+      notes: null,
+      credits: null
     }
   },
   watch: {
@@ -90,9 +76,8 @@ const $extendsPage = {
     }
 
     // give notes and credit information must be in tick because of life cycle
-    this.$nextTick(function() {
-      this.$bus.$emit('credit-note', data)
-    })
+    this.$store.dispatch('updateCurrentnoteCredit', data)
+
     if (this.type == 'pg_branch') return //do not proceed to add listner when branch page
 
     window.addEventListener('scroll', this.onFirstScroll, { once: true }) //listener is removed when event fired
@@ -101,12 +86,17 @@ const $extendsPage = {
   created() {
     if (this.type == 'pg_branch')
       this.$bus.$on('branch-page-viewed', this.completePageBranching)
+
     if (this.isBranchingPage)
       this.$store.commit('UPDATE_CURRENT_BRANCHING', this.$data)
-  },
 
+    this.$bus.$on('media-viewed', this.setMediaViewed)
+    this.$bus.$on('manage-media-players', this.managePlayingMedia)
+  },
   beforeDestroy() {
     this.$bus.$off('branch-page-viewed', this.completePageBranching)
+    this.$bus.$off('media-viewed', this.setMediaViewed)
+    this.$bus.$off('manage-media-players', this.managePlayingMedia)
     window.removeEventListener('scroll', this.onFirstScroll, { once: true }) //in case user did not scroll
     window.removeEventListener('scroll', this.handleScroll)
   },
@@ -164,7 +154,6 @@ const $extendsPage = {
       this.state = 'completed'
 
       this.$set(this.userInteraction, 'state', this.state)
-      this.sendCompletionToServer()
     },
 
     /**
@@ -193,90 +182,8 @@ const $extendsPage = {
         'state',
         currentBranching.state
       )
-
-      this.sendCompletionToServer()
     },
 
-    /**
-     * @description - Send xapi statement to indicate the completion of an activity
-     */
-    sendCompletionToServer() {
-      /*
-       * Send xapi statement to indicate the completion of an activity
-       * Send completion of activity when all pages in Activity are completed and the page is last page of activity
-       * Send completion statement for lesson if this is the last page of the last activity in lesson
-       */
-
-      if (this.getModuleInfo.packageType !== 'xapi') return
-      if (!this.getConnectionInfo) return
-      if (!this.getConnectionInfo.remote || !this.getConnectionInfo.actor)
-        return
-
-      //Get the current acitivty reference from store
-      const currentActivity = this.getAllActivities.list.get(
-        this.getCurrentPage.activityRef
-      )
-
-      const activity_id = `${this.getConnectionInfo.activity_id}/${this.getCurrentPage.activityRef}`
-
-      const record = this.$xapi._getProgress(
-        this.getConnectionInfo.actor.mbox.replace('mailto:', ''),
-        activity_id,
-        'completed'
-      )
-
-      //Send a completion statement for the current activity
-      //When all pages of the activity are completed and the activity recorded is as completed
-      if (
-        this.getAllCompleted[this.getCurrentPage.activityRef] &&
-        this.getAllCompleted[this.getCurrentPage.activityRef].length ===
-          currentActivity.size &&
-        !record[this.getCurrentPage.activityRef]
-      ) {
-        let aTitle
-
-        //Custom name of the activity
-        if (this.getCurrentPage.activityRef === 'A00')
-          aTitle = this.$t('text.introduction')
-        else if (this.getCurrentPage.activityRef === 'A99')
-          aTitle = this.$t('text.conclusion')
-        aTitle = `${this.$t('text.activity')} ${
-          this.getCurrentPage.activityRef
-        }`
-
-        //Custom text for description and definition
-        let text
-        this.$i18n.locale == 'fr'
-          ? (text = `L'${aTitle} de ${this.getModuleInfo.id}`)
-          : (text = `The ${aTitle} of ${this.getModuleInfo.id}`)
-
-        // Retrive only user data in lessons front its interaction that we want to send to the LRS
-        const { isFistTime, userSettings, ...data } = this.getUserInteraction
-
-        //Dispatch a send statement event
-        this.$bus.$emit('send-xapi-statement', {
-          verb: (() => {
-            //set the verbe to complete if all the state of the pages of the activity are
-            if (
-              this.getAllCompleted[this.getCurrentPage.activityRef] &&
-              this.getAllCompleted[this.getCurrentPage.activityRef].length ===
-                currentActivity.size
-            )
-              return 'completed'
-            else return 'suspended'
-          })(),
-          id: this.getCurrentPage.activityRef,
-          definition: text,
-          description: text,
-          extension: [
-            {
-              id: 'user-data',
-              content: data
-            }
-          ]
-        })
-      }
-    },
     /**
      * @description Get the user progress for the current page
      * @param {string} id (Otpional) - the id of the targeted page
@@ -297,7 +204,6 @@ const $extendsPage = {
       return {}
     },
 
-    //**** SEE TO DELETE */
     anchorProgress() {
       const anchors = document.querySelectorAll('.anchor') // look for anchor
       const options = {
@@ -355,7 +261,7 @@ const $extendsPage = {
 
               this.$bus.$emit('anchor-seen', anchorComplete)
             } else {
-              if (process.env.NODE_ENV === 'development')
+              if (import.meta.env.DEV)
                 console.warn(
                   `%c WARNING!>>> Anchor handeling: 👉${anchorComplete}👈 doesn't exist. Please provide a valid anchor.`,
                   'background: orange; color: white; display: block; border-radius:5px; margin:5px;'
@@ -424,6 +330,54 @@ const $extendsPage = {
     },
     openPopup(data) {
       this.$bus.$emit('open-popup', data)
+    },
+    /**
+     * @description Send to the bd that the media have been view by the user- Add the id of the media to the
+     * userInteraction of the page
+     */
+    setMediaViewed(mediaID) {
+      // Should get the userData to check if current mediaElement has entry
+      const { userInteraction } =
+        this.getUserInteraction[this.activityRef][this.id]
+      let { mediasViewed } = userInteraction
+
+      // Should create entry for medias viewed in userInteraction if none
+      if (!mediasViewed) {
+        mediasViewed = []
+
+        this.$set(userInteraction, 'mediasViewed', mediasViewed)
+      }
+      //Should add ID in media viewed list if viewed for the 1st time
+      if (mediasViewed.includes(mediaID)) return
+
+      mediasViewed.push(mediaID)
+      this.$set(userInteraction, 'mediasViewed', mediasViewed) //Update the userInteraction data of the page
+    }, //
+
+    /**
+     * @description - Method to manage the playing state of media element in the page.
+     *                Only one media should play at a time. When receives signal of new media playing
+     *                get the reference of the previous media in play from the store and
+     *                put it in stop state.
+     * @param {HTMLElement} media - the actual media that is playing
+     */
+    managePlayingMedia(media) {
+      if (!media) return
+      //Should get all the media of the page from store
+      const { mElements } = this.getCurrentPage
+      if (!mElements || !mElements.length) return
+
+      // Should stop any media playing
+      mElements.forEach((m) => {
+        if (m.id == media.id) return
+
+        const attrKeys = Object.keys(m) //
+        //Check if the media is playing to stop it. Playing state is given by the instance of the target play-bar
+        if (m[attrKeys[3]].isPlaying) {
+          m[attrKeys[1]].pause() // target the HTMLmediaElement to control it state
+          m[attrKeys[3]].isPlaying = false //change this isPlaying value of the instance
+        }
+      })
     }
   },
   computed: {
@@ -435,11 +389,13 @@ const $extendsPage = {
       'getAllCompleted',
       'getConnectionInfo',
       'getAnchorsForActivity',
-      'getBifChoice'
+      'getBifChoice',
+      'getDataFromServer'
     ]),
 
-    pageMedia() {
-      return this.$store.getters.getCurrentPage
+    pageMedias() {
+      const { mElements, timeline } = this.$store.getters.getCurrentPage
+      return { mElements, timeline }
     },
     console() {
       return console

package/src/mixins/$quizMixins.js

@@ -121,14 +121,13 @@ const $extendsQuiz = {
                 this.quizDragDropValue[inputId]
               ) {
                 //remove sort if order is important
-                const solution = [...this.solution[inputId]].sort(function(
-                  a,
-                  b
-                ) {
-                  return a - b
-                })
+                const solution = [...this.solution[inputId]].sort(
+                  function (a, b) {
+                    return a - b
+                  }
+                )
                 const values = [...this.quizDragDropValue[inputId]].sort(
-                  function(a, b) {
+                  function (a, b) {
                     return a - b
                   }
                 )
@@ -235,14 +234,13 @@ const $extendsQuiz = {
                 this.quizDragDropValue[inputId]
               ) {
                 //remove sort if order is important
-                const solution = [...this.solution[inputId]].sort(function(
-                  a,
-                  b
-                ) {
-                  return a - b
-                })
+                const solution = [...this.solution[inputId]].sort(
+                  function (a, b) {
+                    return a - b
+                  }
+                )
                 const values = [...this.quizDragDropValue[inputId]].sort(
-                  function(a, b) {
+                  function (a, b) {
                     return a - b
                   }
                 )
@@ -438,18 +436,6 @@ const $extendsQuiz = {
         }
       }
       this.$emit('quiz-submit', theAnswer)
-    },
-    /**
-     * @description - Method to get the question
-     */
-    getQuizQuestion() {
-      const el = document.querySelector(`#${this.aBy}`)
-      if (!el || !el.innerHTML) return
-      const labelFor =
-        this.$i18n.locale === 'fr'
-          ? 'Choix de reponse pour la'
-          : 'Answers available for the'
-      return `${labelFor} ${el.innerText}`
     }
   }
 }

package/src/mixins/timerMixin.js

@@ -116,18 +116,17 @@ export const timerMixin = {
       return timeString
     }
   },
+  beforeDestroy() {
+    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', (op) => {
-      this.startTimer(op)
-    })
+    this.$bus.$on('start-timer', this.startTimer)
 
-    this.$bus.$on('stop-timer', (op) => {
-      this.stopTimer(op)
-    })
+    this.$bus.$on('stop-timer', this.stopTimer)
 
-    this.$bus.$on('pause-timer', (op) => {
-      this.pauseTimer(op)
-    })
+    this.$bus.$on('pause-timer', this.pauseTimer)
 
     this.elapsedInterval = setInterval(() => {
       this.elapsedCounter += 1