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

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/AppCompTableOfContent.vue

@@ -11,19 +11,21 @@
   <div v-if="error" id="sidebar-submenu" :class="{ isOpen: isOpened }">
     <focus-trap :active="isOpened">
       <div ref="target">
+        <!-- <div class="submenu-header"> -->
         <app-base-button
           id="close-toc"
           class="btn-ghost"
           :title="$t('button.closePopUp')"
           @click="onCloseWidget('toc')"
         >
-          <svg>
+          <svg aria-hidden="true" focusable="false">
             <use href="#close-square-icon" />
           </svg>
         </app-base-button>
+        <!-- </div> -->
 
-        <p class="t-act" v-html="title"></p>
-
+        <!-- <div class="submenu-content"> -->
+        <p class="t-act" v-html="`${title}`"></p>
         <div class="box-prog-act">
           <p>
             {{ $t('text.activity_progress') }}
@@ -46,19 +48,20 @@
                 <p class="anchor-t" v-html="anchor.title"></p>
                 <p class="state">
                   <span class="box-text">
-                    <svg>
+                    <svg aria-hidden="true" focusable="false">
                       <use href="#check-toc" />
                     </svg>
                     {{ $t('text.complete') }}
                   </span>
                 </p>
               </div>
-              <svg>
+              <svg aria-hidden="true" focusable="false">
                 <use href="#chevronD-icon" />
               </svg>
             </div>
           </RouterLink>
         </div>
+        <!-- </div> -->
       </div>
     </focus-trap>
   </div>
@@ -147,8 +150,25 @@ export default {
       if (activity.charAt(1) == '0' || activity.charAt(1) == 0)
         nb = activity.substr(2)
       else nb = activity.substr(1)
-
-      this.title = `${this.$t('text.activity')} ${nb} : ${menuInfo[activity].subTitle}`
+      //Format title in the Progress info
+      switch (nb) {
+        case '0':
+          this.title = menuInfo[activity].subTitle
+            ? `Introduction : ${menuInfo[activity].subTitle}`
+            : `Introduction`
+          break
+
+        case '99':
+          this.title = menuInfo[activity].subTitle
+            ? `Conclusion : ${menuInfo[activity].subTitle}`
+            : `Conclusion`
+          break
+
+        default:
+          this.title = menuInfo[activity].subTitle
+            ? `${this.$t('text.activity')} ${nb} : ${menuInfo[activity].subTitle}`
+            : `${this.$t('text.activity')} ${nb}`
+      }
 
       //create anchors title and path
       if (menuInfo[activity] && menuInfo[activity].anchors) {
@@ -308,14 +328,19 @@ export default {
   transition: left 0.5s ease-in-out;
 
   &.isOpen {
-    display: block;
+    display: flex;
+    flex-direction: column;
   }
 
+  // .sidebar-submenu-content {
+  //   display: flex;
+  //   flex-direction: column;
+  // }
   #close-toc {
     position: absolute;
     right: 24px;
     margin-bottom: 0;
-    padding: 11px;
+    padding: 12px;
     width: 48px;
     height: 48px;
     display: flex;
@@ -374,7 +399,11 @@ export default {
       }
       &[done='true'] {
         .state {
-          display: block;
+          display: flex;
+          align-items: center;
+          svg {
+            margin-right: 10px;
+          }
         }
       }
 

package/src/components/AppCompVideoPlayer.vue

@@ -111,7 +111,7 @@ export default {
     ...mapState(useAppStore, ['getCurrentBrowser', 'getCurrentPage']),
     //Return true if the video is loading (to show the loading display)
     isLoading() {
-      if (!this.isSet && !this.hasSourceLoadingError) return true
+      if (!this.isSet) return true
       else return false
     },
 

package/src/composables/useQuiz.js

@@ -2,185 +2,8 @@
 
 import i18n from '@/i18n' //Must import directly the local from project app because vue-18in does not work in legacy mode with composable
 
-export function useQuiz(quiz) {
-  const { quizType, solution, showSolution, quizInputType } = quiz
+export function useQuiz() {
   const { t } = i18n.global
-
-  // /**
-  //  * @param {String} inputId
-  //  * @returns {Array} the class
-  //  */
-  function classInput(inputId, optSelected = null) {
-    let theClass = []
-
-    switch (true) {
-      case ['choix_unique', 'reponse_ouverte'].includes(quizType.value):
-        if (inputId == quizInputType.value) {
-          theClass.push('reponseSelectionner')
-        }
-        break
-
-      case quizType.value == 'choix_mult':
-        if (containsValue(quizInputType.value, inputId)) {
-          theClass.push('reponseSelectionner')
-        }
-    }
-
-    if (showSolution.value) {
-      if (solution.value !== null) {
-        switch (true) {
-          case ['choix_unique', 'reponse_ouverte'].includes(quizType.value):
-            if (inputId == solution.value) {
-              theClass.push('correct_answer')
-            } else {
-              theClass.push('wrong_answer')
-            }
-            break
-
-          case quizType.value == 'choix_mult':
-            if (containsValue(solution.value, inputId)) {
-              theClass.push('correct_answer')
-            } else {
-              theClass.push('wrong_answer')
-            }
-            break
-          case quizType.value == 'dropdown':
-            if (!optSelected || !optSelected[inputId]) return
-            if (solution.value[inputId] == optSelected[inputId]) {
-              theClass.push('correct_answer')
-            } else {
-              theClass.push('wrong_answer')
-            }
-            break
-
-          case quizType.value == 'texte_troue_select':
-            if (typeof optSelected[inputId] !== 'undefined') {
-              if (
-                Object.values(solution.value[inputId])[0] ==
-                optSelected[inputId]
-              ) {
-                theClass.push('correct_answer')
-              } else {
-                theClass.push('wrong_answer')
-              }
-            }
-            break
-
-          case quizType.value == 'texte_tableau':
-            if (
-              containsValue(
-                solution.value[inputId].reponse_value,
-                optSelected[inputId]
-              )
-            ) {
-              theClass.push('correct_answer')
-            } else {
-              theClass.push('wrong_answer')
-            }
-            break
-          case quizType.value == 'texte_troue':
-            if (typeof optSelected[inputId] !== 'undefined') {
-              if (
-                containsValue(
-                  Object.values(solution.value[inputId])[0],
-                  optSelected[inputId]
-                )
-              ) {
-                theClass.push('correct_answer')
-              } else {
-                theClass.push('wrong_answer')
-              }
-            }
-            break
-        }
-      }
-    }
-    return theClass
-  }
-
-  function messageAccessibility(inputId, optSelected = null) {
-    let mess = ''
-    if (showSolution.value) {
-      if (solution.value !== null) {
-        switch (true) {
-          case ['choix_unique', 'reponse_ouverte'].includes(quizType.value):
-            if (inputId == solution.value) {
-              mess = `${t('quizState.goodAnswer')}`
-            } else {
-              mess = `${t('quizState.badAnswer')}`
-            }
-            break
-
-          case quizType.value == 'choix_mult':
-            if (containsValue(solution.value, inputId)) {
-              mess = `${t('quizState.goodAnswer')}`
-            } else {
-              mess = `${t('quizState.badAnswer')}`
-            }
-            break
-          case quizType.value == 'dropdown':
-            if (solution[inputId.value] == optSelected[inputId.value]) {
-              mess = `${t('quizState.goodAnswer')}`
-            } else {
-              mess = `${t('quizState.badAnswer')}`
-            }
-            break
-
-          case quizType.value == 'texte_troue_select':
-            if (typeof optSelected[inputId] !== 'undefined') {
-              if (
-                Object.values(solution.value[inputId])[0] ==
-                optSelected[inputId]
-              ) {
-                mess = `${t('quizState.goodAnswer')}`
-              } else {
-                mess = `${t('quizState.badAnswer')}`
-              }
-            }
-            break
-
-          case quizType.value == 'texte_tableau':
-            if (
-              containsValue(
-                solution.value[inputId].reponse_value,
-                optSelected[inputId]
-              )
-            ) {
-              mess = `${t('quizState.goodAnswer')}`
-            } else {
-              mess = `${t('quizState.badAnswer')}`
-            }
-            break
-          case quizType.value == 'texte_troue':
-            if (typeof optSelected[inputId] !== 'undefined') {
-              if (
-                containsValue(
-                  Object.values(solution.value[inputId])[0],
-                  optSelected[inputId]
-                )
-              ) {
-                mess = `${t('quizState.goodAnswer')}`
-              } else {
-                mess = `${t('quizState.badAnswer')}`
-              }
-            }
-            break
-        }
-      }
-    }
-    return mess
-  }
-
-  /**
-   * @description check if a values exists in a array
-   * @param {Array} array
-   * @param value
-   * @returns {Boolean}
-   */
-  function containsValue(array, value) {
-    return array.includes(value)
-  }
-
   /**
    * @description shuffles an array used to randomized the option order if shuffleAnswers is true
    * @param {Array} array
@@ -201,6 +24,66 @@ export function useQuiz(quiz) {
     }
     return newArray2
   }
+  /**
+   * @description add retro style to the quiz
+   * @param {Object} solution - the solution of the quiz
+   * @param {Array} reponse - the user response
+   * @param {Number} length - the length of the input value
+   * @returns {Object|Boolean}
+   */
+  function addRetroStyle(solution, reponse, length) {
+    let classRetro = []
+    let mesA11y = []
+    if (solution != null) {
+      reponse.forEach((el) => {
+        if (el.correct == true) {
+          classRetro.push('goodAnswer')
+          mesA11y.push(`${t('quizState.goodAnswer')}`)
+        } else {
+          classRetro.push('badAnswer')
+          mesA11y.push(`${t('quizState.badAnswer')}`)
+        }
+      })
+    } else {
+      classRetro.push('NeutralAnswer')
+      mesA11y.push(`${t('quizState.neutralAnswer')}`)
+    }
 
-  return { containsValue, shuffleArray, classInput, messageAccessibility }
+    return { classRetro, mesA11y }
+  }
+
+  /**
+   * @description reset the list of validation style of a quiz
+   * @param {Array} aList - a list of array to reset
+   * @emits hide-retro - event message to hide the retro Message
+   *  $el- the target quiz,
+   *  false|true of th event
+   * */
+  function resetRetroStyle(aList) {
+    aList.forEach((a) => {
+      if (a && a.length > 0) a.splice(0)
+    })
+    this.$bus.$emit('hide-retro', this.$el, false)
+  }
+
+  function retroType(solution, reponse) {
+    if (solution != null) {
+      if (reponse.length == solution.length) {
+        let Ag = (i) => i.correct
+        if (reponse.every(Ag)) return 'retro_positive'
+        else return 'retro_negative'
+      } else {
+        return 'retro_negative'
+      }
+    } else {
+      return `retro_neutre`
+    }
+  }
+
+  return {
+    addRetroStyle,
+    resetRetroStyle,
+    retroType,
+    shuffleArray
+  }
 }

package/src/directives/nvdaFix.js

@@ -0,0 +1,53 @@
+/**
+ * @file nvdaFix.js
+ * @description Directive to fix NVDA screen reader issues with Vuetify dropdowns.
+ * This directive hides the input field from screen readers and provides an aria-live region
+ * to announce the selected option.
+ *
+ * @example
+ * <v-select v-nvda-fix="selectedOptionText" ...>
+ */
+
+export default {
+  mounted(el, binding) {
+    // 1. Hide Vuetify input by adding aria-hidden="true"
+    const input = el.querySelector('input[type="text"]')
+    if (input) {
+      input.setAttribute('aria-hidden', 'true')
+    }
+
+    // 2. Create/update aria-live for screen reader
+    const valueText =
+      binding && binding.value ? binding.value : 'choisir une option'
+    let liveRegion = el.querySelector('.nvda-live-region')
+
+    if (!liveRegion) {
+      liveRegion = document.createElement('div')
+      liveRegion.className = 'nvda-live-region sr-only'
+      liveRegion.setAttribute('aria-live', 'polite')
+      el.appendChild(liveRegion)
+    }
+
+    liveRegion.textContent = `🍍${valueText}`
+  },
+  /**
+   * @description Directive updated hook to handle changes in the selected option.
+   * This updates the aria-live region with the new selected option text.
+   * @param {Object} el - The element the directive is bound to.
+   * @param {Object} binding - The binding object containing the new value.
+   */
+  updated(el, binding) {
+    // update aria-live when selected option changes
+    const valueText = binding.value?.text || ''
+    const input = el.querySelector('input[type="text"]')
+    const liveRegion = el.querySelector('.nvda-live-region')
+
+    if (input) {
+      input.setAttribute('aria-hidden', 'true')
+    }
+
+    if (liveRegion) {
+      liveRegion.textContent = `🍍${valueText}`
+    }
+  }
+}