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

package/src/components/AppCompQuizRecall.vue

@@ -6,42 +6,51 @@
  ** data object should containt following attributes: quizId,activityId,pageId,hypertext_done',hypertext_undone,title,titletag
 -->
 <template>
-  <section class="quizRecall">
+  <section v-if="quizRecallData" class="quizRecall">
     <!--Optionnal title, out of quiz-answer-conditionning, default tag H4, but can be change by user-->
-    <component
-      :is="quizRecall.titletag"
-      v-if="quizRecall.title"
-      class="quizRecall-title"
-    >
-      {{ quizRecall.title }}
-    </component>
-    <!--Quiz answer conditionning-->
-    <app-base-error-display
-      v-if="hasError.length"
-      :error-group="'component'"
-      :error-title="`ERREUR: COMPOSANT QUIZ RECALL`"
-      :errors-list="hasError"
-    ></app-base-error-display>
+    <!--Show skeleton while app data is not ready-->
+    <template v-if="!isReady">
+      <app-base-skeleton :skeleton-lines="2" />
+    </template>
+    <!--Show app data when ready-->
     <template v-else>
-      <template v-if="quizRecall.done == true">
-        <div
-          v-if="quizRecall.hypertext_done"
-          class="quizRecall-text-done"
-          v-html="quizRecall.hypertext_done"
-        ></div>
-        <div class="quizRecall-ennonce" v-html="quizRecall.ennonce"></div>
-        <textarea
-          v-model="quizRecall.answer"
-          disabled
-          class="form-control"
-        ></textarea>
-      </template>
-      <template v-if="quizRecall.done == false">
-        <div
-          v-if="quizRecall.hypertext_undone"
-          class="quizRecall-text-undone"
-          v-html="quizRecall.hypertext_undone"
-        ></div>
+      <component
+        :is="quizRecall.titletag"
+        v-if="quizRecall.title"
+        class="quizRecall-title"
+      >
+        {{ quizRecall.title }} -
+      </component>
+      <!--Quiz answer conditionning-->
+      <app-base-error-display
+        v-if="hasError.length"
+        :error-group="'component'"
+        :error-title="`ERREUR: COMPOSANT QUIZ RECALL`"
+        :errors-list="hasError"
+      ></app-base-error-display>
+      <template v-else>
+        <template v-if="quizRecall.done == true">
+          <div
+            v-if="quizRecall.hypertext_done"
+            class="quizRecall-text-done"
+            v-html="quizRecall.hypertext_done"
+          ></div>
+          <div class="quizRecall-ennonce" v-html="quizRecall.ennonce"></div>
+
+          <textarea
+            :id="`quizRecall-answer-${quizRecallData.quizId}`"
+            v-model="quizRecall.answer"
+            disabled
+            class="form-control"
+          ></textarea>
+        </template>
+        <template v-if="quizRecall.done == false">
+          <div
+            v-if="quizRecall.hypertext_undone"
+            class="quizRecall-text-undone"
+            v-html="quizRecall.hypertext_undone"
+          ></div>
+        </template>
       </template>
     </template>
   </section>
@@ -51,6 +60,7 @@
 //Recall mixins has the necessary datas and functions to give back quizRecall statu
 import { mapState } from 'pinia'
 import { useAppStore } from '../module/stores/appStore'
+import { nextTick } from 'vue'
 
 export default {
   name: 'AppCompQuizRecall',
@@ -71,7 +81,8 @@ export default {
         )}</p>` /*String traduite par défaut*/
       },
       hasError: [],
-      quizData: null
+      quizData: null,
+      isReady: false //Used to display skeleton while app data is not ready
     }
   },
   computed: {
@@ -79,25 +90,46 @@ export default {
       'getAllCompleted',
       'getUserInteraction',
       'getPageInteraction',
+      'getAppStatus',
       'getPageData'
     ])
   },
+
+  watch: {
+    //Watch for user interaction change to get quizRecall answer
+    getUserInteraction: {
+      async handler(newValue) {
+        if (!this.getUserInteraction) return
+
+        const { activityId, pageId } = this.quizRecallData
+        const interaction = this.getPageInteraction(
+          activityId,
+          pageId
+        ).userInteraction
+
+        if (!interaction) return
+        //Get quizRecall answer
+        if (this.quizRecallData && this.quizData) {
+          await this.getQuizRecallAnswer(interaction)
+        } else {
+          this.quizRecall.done == false
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
   created() {
     //Validate quizRecall data
     //(no validation to the quiz, only to the new datas)
-    this.validateQuizRecallData(this.quizRecallData)
+    if (import.meta.env.DEV) {
+      this.validateQuizRecallData(this.quizRecallData)
+    }
     const { activityId, pageId } = this.quizRecallData
     //Get quizData and validate the quiz type
     if (activityId && pageId) {
       this.getQuizData(activityId, pageId)
     }
-
-    //Get quizRecall answer
-    if (this.quizRecallData && this.quizData) {
-      this.getQuizRecallAnswer(this.quizRecallData, this.quizData)
-    } else {
-      this.quizRecall.done == false
-    }
   },
   methods: {
     /**
@@ -165,19 +197,10 @@ export default {
       }
     },
     //Get datas from quizRecallData and userData and add them to quizRecall object
-    getQuizRecallAnswer() {
-      //Get userData
-      const {
-        activityId,
-        pageId,
-        quizId,
-        hypertext_done,
-        hypertext_undone,
-        title,
-        titletag
-      } = this.quizRecallData
-
-      let userData = this.getPageInteraction(activityId, pageId)
+    async getQuizRecallAnswer(userData) {
+      await nextTick() //wait for the DOM to update
+      const { quizId, hypertext_done, hypertext_undone, title, titletag } =
+        this.quizRecallData
 
       //Add hypertext_done and undone to quizRecall
       if (hypertext_done) {
@@ -197,19 +220,21 @@ export default {
           }
         }
       }
+      //Get the quiz answers from userData
+      const answers = userData.quizAnswers || {}
+      let quizAnswer = answers[quizId] || null
 
       //If quiz answer exists in userData, quizRecall done is true and add the quiz answer to quizRecall
-      if (!userData || !userData.userInteraction)
-        return (this.quizRecall.done = false)
-
-      const { quizAnswers } = userData.userInteraction
+      quizAnswer
+        ? (this.quizRecall.done = true)
+        : (this.quizRecall.done = false)
 
-      if (!quizAnswers || !quizAnswers[quizId])
-        return (this.quizRecall.done = false)
-
-      this.quizRecall.done = true
-      this.quizRecall.answer = quizAnswers[quizId].value
-      this.quizRecall.ennonce = this.quizData.ennonce
+      if (quizAnswer) {
+        this.quizRecall.answer = quizAnswer.value[0].filled || ''
+        this.quizRecall.ennonce = this.quizData.ennonce
+      }
+      this.quizRecall
+      this.isReady = true //Set isReady to true to display the component
     },
 
     //Validate quizRecallData
@@ -296,3 +321,25 @@ export default {
   }
 }
 </script>
+
+<style>
+.skeleton {
+  height: 20px;
+  width: 200px;
+  background-color: #ccc;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>

package/src/components/AppCompSettingsMenu.vue

@@ -1,172 +1,172 @@
-<template>
-  <b-sidebar
-    id="sidebar-settings"
-    title="Settings"
-    right
-    shadow
-    backdrop
-    no-header
-    @hidden="onClose"
-  >
-    <div class="pl-3 pr-3">
-      <b-form-group :label="$t('user_settings.title')">
-        <b-form-checkbox
-          v-for="(setting, index) in Object.entries(settingsSelected)"
-          :key="index"
-          v-model="settingsSelected[setting[0]]"
-          :aria-describedby="ariaDescribedby"
-          :name="`parameter-${setting[0]}`"
-          :text-field="$t(`user_settings.${setting[0]}`)"
-          switch
-          stacked
-          size="lg"
-          @change="onSettingsChange"
-        >
-          <span>{{ $t(`user_settings.${setting[0]}`) }}</span>
-        </b-form-checkbox>
-      </b-form-group>
-      <app-base-button
-        v-b-toggle.sidebar-settings
-        class="float-right btn-primary"
-        :title="$t('user_settings.close')"
-      >
-        {{ $t('user_settings.close') }}
-      </app-base-button>
-    </div>
-  </b-sidebar>
-</template>
-
-<script>
-import { mapState, mapActions } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import AppBaseButton from './AppBaseButton.vue'
-
-export default {
-  components: { AppBaseButton },
-  props: {},
-  data() {
-    return {
-      settingsSelected: {},
-      settingsNeedUpdate: false
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getApplicationSettings',
-      'getModuleInfo',
-      'getUserInteraction',
-      'getConnectionInfo',
-      'onboardingEnabled'
-    ]),
-    settingsOptions() {
-      return this.settingsOptionsELPlus
-    }
-  },
-  watch: {
-    getApplicationSettings: {
-      immediate: true,
-      deep: true,
-      handler() {
-        this.getAppSettingsInStore()
-      }
-    }
-  },
-  created() {
-    setTimeout(() => this.getAppSettingsInStore(), 1700)
-
-    this.$bus.$on('save-settings', (settings) => {
-      this.saveSettings(settings)
-    })
-  },
-  methods: {
-    ...mapActions(useAppStore, [
-      'setApplicationSettings',
-      'updateUserMetaData'
-    ]),
-    getAppSettingsInStore() {
-      this.settingsSelected = { ...this.getApplicationSettings }
-    },
-
-    //Save user settings to the store
-    onSettingsChange() {
-      this.settingsNeedUpdate = true
-      this.saveSettingsToStore(this.settingsSelected)
-    },
-    saveSettingsToStore(settings) {
-      this.setApplicationSettings(settings)
-    },
-    /**
-     * @description Save the user preferred settings to vue store and LRS or local store:
-     * LRS: Send a XAPI Statement to the LRS
-     * IndexedDB: Set a new Key for preferred settings in the userInteraction in store
-     * Update current value of settings
-     * @param {Object} appSettings - group of application settings {autoplay, subtitles, onboarding}
-     *
-     */
-    saveSettings(appSettings) {
-      this.saveSettingsToStore(appSettings) //save to store
-
-      if (
-        this.getModuleInfo.packageType === 'xapi' &&
-        this.getConnectionInfo &&
-        this.getConnectionInfo.remote
-      ) {
-        let text
-        //Defining the text to display for stmt description and definition
-        switch (this.$i18n.locale) {
-          case 'fr':
-            if (this.getModuleInfo.courseID)
-              text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
-            else text = `Le ${this.getModuleInfo.id}`
-            break
-          case 'en':
-            if (this.getModuleInfo.courseID)
-              text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
-            else text = `The ${this.getModuleInfo.id}`
-            break
-        }
-        //Creating custom statement
-        const stmt = {
-          id: (() => {
-            return this.getModuleInfo.courseID
-              ? this.getModuleInfo.courseID
-              : null
-          })(),
-          verb: 'preferred',
-          definition: text,
-          description: text,
-          extensions: [
-            {
-              id: 'application-settings',
-              content: {
-                userSettings: { ...appSettings }
-              }
-            }
-          ]
-        }
-
-        setTimeout(() => {
-          this.$bus.$emit('send-xapi-statement', stmt) //send xapi statement
-        }, 1000)
-      } else {
-        this.$set(this.getUserInteraction, 'userSettings', appSettings) // adding the usersettings to user Interaction to save to save to the local DB
-        this.updateUserMetaData(this.getUserInteraction) //force update of the userInteraction to ensure saving of settings in local DB
-      }
-
-      //update sidebar data
-      this.getAppSettingsInStore()
-    },
-
-    /**
-     * @description -Action to perform when the sidebar closed- will require saving when changing occurred
-     */
-    onClose() {
-      if (this.settingsNeedUpdate) {
-        this.saveSettingsToStore(this.settingsSelected)
-        this.saveSettings(this.getApplicationSettings)
-        this.settingsNeedUpdate = false
-      }
-    }
-  }
-}
-</script>
+<template>
+  <b-sidebar
+    id="sidebar-settings"
+    title="Settings"
+    right
+    shadow
+    backdrop
+    no-header
+    @hidden="onClose"
+  >
+    <div class="pl-3 pr-3">
+      <b-form-group :label="$t('user_settings.title')">
+        <b-form-checkbox
+          v-for="(setting, index) in Object.entries(settingsSelected)"
+          :key="index"
+          v-model="settingsSelected[setting[0]]"
+          :aria-describedby="ariaDescribedby"
+          :name="`parameter-${setting[0]}`"
+          :text-field="$t(`user_settings.${setting[0]}`)"
+          switch
+          stacked
+          size="lg"
+          @change="onSettingsChange"
+        >
+          <span>{{ $t(`user_settings.${setting[0]}`) }}</span>
+        </b-form-checkbox>
+      </b-form-group>
+      <app-base-button
+        v-b-toggle.sidebar-settings
+        class="float-right btn-primary"
+        :title="$t('user_settings.close')"
+      >
+        {{ $t('user_settings.close') }}
+      </app-base-button>
+    </div>
+  </b-sidebar>
+</template>
+
+<script>
+import { mapState, mapActions } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import AppBaseButton from './AppBaseButton.vue'
+
+export default {
+  components: { AppBaseButton },
+  props: {},
+  data() {
+    return {
+      settingsSelected: {},
+      settingsNeedUpdate: false
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getApplicationSettings',
+      'getModuleInfo',
+      'getUserInteraction',
+      'getConnectionInfo',
+      'onboardingEnabled'
+    ]),
+    settingsOptions() {
+      return this.settingsOptionsELPlus
+    }
+  },
+  watch: {
+    getApplicationSettings: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.getAppSettingsInStore()
+      }
+    }
+  },
+  created() {
+    setTimeout(() => this.getAppSettingsInStore(), 1700)
+
+    this.$bus.$on('save-settings', (settings) => {
+      this.saveSettings(settings)
+    })
+  },
+  methods: {
+    ...mapActions(useAppStore, [
+      'setApplicationSettings',
+      'updateUserMetaData'
+    ]),
+    getAppSettingsInStore() {
+      this.settingsSelected = { ...this.getApplicationSettings }
+    },
+
+    //Save user settings to the store
+    onSettingsChange() {
+      this.settingsNeedUpdate = true
+      this.saveSettingsToStore(this.settingsSelected)
+    },
+    saveSettingsToStore(settings) {
+      this.setApplicationSettings(settings)
+    },
+    /**
+     * @description Save the user preferred settings to vue store and LRS or local store:
+     * LRS: Send a XAPI Statement to the LRS
+     * IndexedDB: Set a new Key for preferred settings in the userInteraction in store
+     * Update current value of settings
+     * @param {Object} appSettings - group of application settings {autoplay, subtitles, onboarding}
+     *
+     */
+    saveSettings(appSettings) {
+      this.saveSettingsToStore(appSettings) //save to store
+
+      if (
+        this.getModuleInfo.packageType === 'xapi' &&
+        this.getConnectionInfo &&
+        this.getConnectionInfo.remote
+      ) {
+        let text
+        //Defining the text to display for stmt description and definition
+        switch (this.$i18n.locale) {
+          case 'fr':
+            if (this.getModuleInfo.courseID)
+              text = `Le ${this.getModuleInfo.id} de ${this.getModuleInfo.courseID}`
+            else text = `Le ${this.getModuleInfo.id}`
+            break
+          case 'en':
+            if (this.getModuleInfo.courseID)
+              text = `The ${this.getModuleInfo.id} of ${this.getModuleInfo.courseID}`
+            else text = `The ${this.getModuleInfo.id}`
+            break
+        }
+        //Creating custom statement
+        const stmt = {
+          id: (() => {
+            return this.getModuleInfo.courseID
+              ? this.getModuleInfo.courseID
+              : null
+          })(),
+          verb: 'preferred',
+          definition: text,
+          description: text,
+          extensions: [
+            {
+              id: 'application-settings',
+              content: {
+                userSettings: { ...appSettings }
+              }
+            }
+          ]
+        }
+
+        setTimeout(() => {
+          this.$bus.$emit('send-xapi-statement', stmt) //send xapi statement
+        }, 1000)
+      } else {
+        this.$set(this.getUserInteraction, 'userSettings', appSettings) // adding the usersettings to user Interaction to save to save to the local DB
+        this.updateUserMetaData(this.getUserInteraction) //force update of the userInteraction to ensure saving of settings in local DB
+      }
+
+      //update sidebar data
+      this.getAppSettingsInStore()
+    },
+
+    /**
+     * @description -Action to perform when the sidebar closed- will require saving when changing occurred
+     */
+    onClose() {
+      if (this.settingsNeedUpdate) {
+        this.saveSettingsToStore(this.settingsSelected)
+        this.saveSettings(this.getApplicationSettings)
+        this.settingsNeedUpdate = false
+      }
+    }
+  }
+}
+</script>