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

package/src/components/AppCompInputTextToFillDropdownNx.vue

@@ -0,0 +1,291 @@
+<!-- About this Component--
+  * Renders a Series of inputs to collect input for the Quiz component.
+  * Related Quiz to question: TEXTE_TROUE_SELECT
+  * Receives the a data object defined by user
+  * Used by AppCompQuiz
+  * Uses useQuiz composable
+-->
+<template>
+  <div v-if="inputData.length > 0" :id="id" class="input-box">
+    <fieldset :aria-label="fieldsetLabel">
+      <div
+        v-for="textInput in inputElements"
+        :key="textInput.id"
+        class="texteatrou"
+      >
+        <span
+          v-if="textInput.type == 'text' && textInput.content.trim() !== ''"
+          v-html="textInput.content"
+        ></span>
+        <label :for="`${id}_${textInput.id}-champ`" style="display: none">
+          {{ $t('text.quiz') }}
+        </label>
+        <div
+          v-if="textInput.type == 'select'"
+          class="cnt-input"
+          :class="`${retro[textInput.id.substr(textInput.id.length - 1)] ? retro[textInput.id.substr(textInput.id.length - 1)] : ''}`"
+        >
+          <v-select
+            :id="`${id}_${textInput.id}-champ`"
+            :model-value="inputsValue[textInput.index]"
+            item-title="text"
+            :open-text="`${$t('message.dropdown_list')}`"
+            :item-props="true"
+            :items="getItemOptions(textInput.index)"
+            :aria-describedby="`${id}_${textInput.id}-msg-erreur`"
+            :aria-labelledby="`${id}_${textInput.id}-label`"
+            @update:model-value="onSelectUpdate($event, textInput.index)"
+          />
+          <span
+            :id="`${id}_${textInput.id}-msg-erreur`"
+            :key="`msg_chx_${id}_${textInput.id}`"
+            class="sr-only"
+          >
+            {{ messageAccessibility[textInput.index] }}
+          </span>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+export default {
+  name: 'AppCompInputTextToFillDropdownNext',
+  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    textBase: {
+      type: String,
+      default: ''
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue', 'enable-submit'],
+  setup(props) {
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+
+    return { retroType, addRetroStyle, resetRetroStyle }
+  },
+  data() {
+    return {
+      inputElements: [],
+      result: [],
+      retro: [],
+      messageAccessibility: [],
+      inputCount: null
+    }
+  },
+  computed: {
+    fieldsetLabel() {
+      return `${this.$t('quizState.textToFillDropdownFieldset1')} ${this.inputCount} ${this.$t('quizState.textToFillDropdownFieldset2')}`
+    },
+    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
+    inputsValue: {
+      get() {
+        return this.modelValue
+      },
+      set(newValue) {
+        this.resetRetroStyle([this.retro, this.messageAccessibility])
+        this.$emit('update:modelValue', [...newValue])
+      }
+    },
+    /**
+     * internal reactive value that map the options to add SELECTED attribute on each option
+     * and Add entrie for the default selected Elements
+     * this attribute value can be changed when user select the option
+     */
+    mappedOptions() {
+      return this.inputData.map((op) => {
+        const key = Object.keys(op)[0]
+        const values = Object.values(op)[0]
+
+        const newValues = [
+          {
+            value: null,
+            disabled: true,
+            selected: true,
+            text: this.$t('message.first_option_dropdown')
+          },
+          ...values.map((el) => ({
+            value: el,
+            text: el,
+            selected: false
+          }))
+        ]
+
+        return {
+          [key]: newValues
+        }
+      })
+    }
+  },
+  watch: {
+    /**
+     * @description watcher to track the inputs content
+     * remove an element from the inputs array (modelValue) when it is empty
+     */
+    inputsValue: {
+      handler() {
+        const filledCount = this.modelValue.filter(
+          (val) => val !== null && val !== undefined
+        )
+
+        this.$emit('enable-submit', filledCount.length == this.inputData.length)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+
+  mounted() {},
+  created() {
+    this.createTextWithInput(this.textBase)
+  },
+
+  methods: {
+    /**
+     * @description create the object to generate the text and selects options
+     * for each fillable input. The created object is assigned to inputElements
+     * @param {String} str the text with holes to fill
+     */
+    createTextWithInput(str) {
+      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
+
+      let splittedText = str.split(regex)
+      let listInput = []
+
+      for (let i = 0; i < splittedText.length - 1; i++) {
+        listInput.push({
+          id: `text-${i}`,
+          type: 'text',
+          content: splittedText[i]
+        })
+
+        if (i < splittedText.length - 1)
+          listInput.push({ id: `select-${i}`, type: 'select', index: i })
+      }
+      let lI = listInput.findLast((element) => element.type == 'select')
+      this.inputCount = lI.index + 1
+
+      this.inputElements = listInput
+    },
+    /**
+     * @description Method to force update of this.inputsValue.
+     * this force the old value and new value of the input to be tracked by VUE.
+     * @param newValue, the new value of the input
+     * @param index index of the selected element
+     */
+
+    onSelectUpdate(newValue, index) {
+      if (this.$el && this.$el.id !== this.id) return //prevent event from firing on other input
+      this.resetRetroStyle([this.retro, this.messageAccessibility])
+      const updated = [...this.inputsValue] //create new array from inputsValue
+      updated[index] = newValue
+      this.inputsValue = updated //trigger vue reactivity for inputsValue
+    },
+
+    /**
+     * @description Method to retrive the options of each selectable input in the mappedOption Object
+     * @param {Number } index - number representing the index of the item in the array of inputElements
+     * @Return a collection of item representing the options for a the selectables
+     */
+    getItemOptions(index) {
+      return Object.values(this.mappedOptions[index])[0]
+    },
+    /**
+     * @description Component validation method to validate the user input against the solution
+     * can handle logic of Css style to apply (correct/wrong Answer) and return the result
+     * @return {Object} result
+     */
+    validateAnswer() {
+      let mappedResults
+
+      if (this.solution != null) {
+        mappedResults = this.inputsValue.map((a, i) => {
+          const s = Object.values(this.solution[i])[0]
+          return { selected: a, correct: s == a }
+        })
+      } else {
+        mappedResults = this.inputsValue.map((a) => {
+          return { selected: a, correct: false }
+        })
+      }
+
+      //Set the valition style
+      let { classRetro, mesA11y } = this.addRetroStyle(
+        this.solution,
+        mappedResults,
+        this.inputsValue.length
+      )
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+      //Retrive the user response from validation
+      this.result = mappedResults.filter((a) => a.selected)
+
+      let retro = this.retroType(this.solution, this.result)
+
+      let cAns
+      if (this.solution != null) cAns = this.computeResult(this.result)
+      else cAns = false
+      //Return this to parent
+      return {
+        userAnswer: this.result,
+        correctAnswer: cAns,
+        retroType: retro
+      }
+    },
+
+    /**
+     * @description - compute the correct elements in user response
+     * compare with  the solution and return wether user succeeded or failed
+     * @param {Object} result - user responses
+     * @retuns boolean expressing the fail/success result
+     */
+    computeResult(result) {
+      const res = result.filter((el) => el.correct)
+      return res.length == this.solution.length
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+select {
+  &.custom-select {
+    background-image: inherit;
+
+    &:focus {
+      border-color: inherit;
+      box-shadow: inherit;
+    }
+  }
+}
+
+/***** style dev  *****/
+.texteatrou {
+  display: inline;
+}
+.texteatrou > select {
+  display: inline;
+  width: auto;
+}
+
+.cnt-input {
+  position: relative;
+}
+</style>

package/src/components/AppCompInputTextToFillNx.vue

@@ -0,0 +1,277 @@
+<!-- About this Component--
+  * Renders a Series of inputs to collect input for the Quiz component.
+  * Related Quiz to question: TEXTE_TROUE
+  * Receives the a data object defined by user
+  * Used by AppCompQuiz
+  * Uses useQuiz composable
+-->
+<template>
+  <div v-if="inputElements.length > 0" :id="id" class="input-box">
+    <fieldset :aria-label="fieldsetLabel">
+      <div
+        v-for="textInput in inputElements"
+        :key="textInput.id"
+        class="texteatrou"
+      >
+        <span
+          v-if="textInput.type == 'text' && textInput.content.trim() !== ''"
+          v-html="textInput.content"
+        ></span>
+        <label :for="`${id}_${textInput.id}-champ`" style="display: none">
+          {{ $t('text.quiz') }}
+        </label>
+
+        <v-text-field
+          v-if="textInput.type == 'input'"
+          :id="`${id}_${textInput.id}-champ`"
+          :model-value="inputsValue[textInput.index]"
+          :placeholder="$t('text.place_holder.for_textarea')"
+          no-resize
+          :class="`${retro[textInput.id.substr(textInput.id.length - 1)]}`"
+          class="input-textatrou"
+          :aria-describedby="`${id}_${textInput.id}-msg-erreur`"
+          :aria-labelledby="`${id}_${textInput.id}-label`"
+          @update:model-value="onSelectUpdate($event, textInput.index)"
+        />
+        <span
+          :id="`${id}_${textInput.id}-msg-erreur`"
+          :key="`msg_chx_${id}_${textInput.id}`"
+          class="sr-only"
+        >
+          {{ messageAccessibility[textInput.index] }}
+        </span>
+      </div>
+    </fieldset>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { validateObjType } from '../shared/validators'
+export default {
+  name: 'AppCompInputTextToFillNext',
+  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    textBase: {
+      type: String,
+      default: ''
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue', 'enable-submit'],
+  setup(props) {
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+
+    return { retroType, addRetroStyle, resetRetroStyle }
+  },
+  data() {
+    return {
+      quizInputDataValue: [],
+      textInputs: [],
+      quizSolution: null,
+      inputElements: [],
+      result: null,
+      retro: [],
+      messageAccessibility: [],
+      inputCount: null
+    }
+  },
+  computed: {
+    fieldsetLabel() {
+      return `${this.$t('quizState.textToFillFieldset1')} ${this.inputCount} ${this.$t('quizState.textToFillFieldset2')}`
+    },
+
+    /* INTERNAL REACTIVE VALUE THAT BIND WITH MODELVALUE PROPS */
+    inputsValue: {
+      get() {
+        return this.modelValue
+      },
+      set(newValue) {
+        this.$emit('update:modelValue', [...newValue])
+      }
+    }
+  },
+
+  watch: {
+    /**
+     * @description watcher to track the inputs content
+     * remove an element from the inputs array (modelValue) when it is empty
+     */
+    inputsValue: {
+      async handler() {
+        const filled = this.modelValue.filter((val) => val && val.trim() !== '')
+        if (this.inputCount == null)
+          this.inputCount = await this.getInputElements()
+        this.$emit('enable-submit', filled.length == this.inputCount)
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    this.createTextWithInput(this.textBase)
+  },
+  mounted() {},
+
+  methods: {
+    /**
+     * @description validate the raw data received by the component to render is view
+     * @returns {Object} errors - errorList: to display in view and errorConsole, to be displayed in console
+     */
+    validateInputData() {
+      let errors = null //array for errors dectected
+      let stringType = ['id', 'value']
+
+      if (!this.inputData.length) return errors
+      for (let i = 0; i < this.inputData.length; i++) {
+        errors = validateObjType(
+          this.inputData[i],
+          { stringType },
+          null,
+          `choix_reponse #${i + 1}`
+        )
+        const { errorList, errorInConsole } = errors
+
+        if (errorList.length || errorInConsole.length) return errors
+      }
+
+      return errors
+    },
+    /**
+     * @description create the object to genate the text and inputs
+     * @param {String} str the text with holes to fill
+     */
+    createTextWithInput(str) {
+      const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
+
+      let splittedText = str.split(regex)
+      let listInput = []
+
+      for (let i = 0; i < splittedText.length - 1; i++) {
+        listInput.push({
+          id: `text-${i}`,
+          type: 'text',
+          content: splittedText[i]
+        })
+
+        if (i < splittedText.length - 1)
+          listInput.push({ id: `input-${i}`, type: 'input', index: i })
+      }
+
+      this.inputElements = listInput
+    },
+    /**
+     * @description Method to force update of this.inputsValue.
+     * this force the old value and new value of the input to be tracked by VUE.
+     * @param newValue, the new value of the input
+     * @param index index of the selected element
+     */
+
+    onSelectUpdate(newValue, index) {
+      if (this.$el && this.$el.id !== this.id) return
+      this.resetRetroStyle([this.retro, this.messageAccessibility])
+
+      const updated = [...this.inputsValue] //create new array from inputsValue
+      updated[index] = newValue
+      this.inputsValue = updated //trigger vue reactivity for inputsValue
+    },
+
+    /**
+     * @description Component validation method to validate the user input against the solution
+     * can handle logic of Css style to apply (correct/wrong Answer) and return the result
+     * @return {Object} result
+     */
+    validateAnswer() {
+      let mappedResults
+      if (this.solution != null) {
+        mappedResults = this.inputsValue.map((a, i) => {
+          a = a.trim().toLowerCase()
+          const s = Object.values(this.solution[i])[0]
+          return { filled: a, correct: s.includes(a) }
+        })
+      } else {
+        mappedResults = this.inputsValue.map((a, i) => {
+          return { filled: a, correct: false }
+        })
+      }
+
+      //========================================================
+      //Set the valition style
+      let { classRetro, mesA11y } = this.addRetroStyle(
+        this.solution,
+        mappedResults,
+        this.inputsValue.length
+      )
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+      //Retrive the user response from validation
+      this.result = mappedResults.filter((a) => a.filled)
+
+      let retro = this.retroType(this.solution, this.result)
+
+      let cAns
+      if (this.solution != null) cAns = this.computeResult(this.result)
+      else cAns = false
+      //========================================================
+      //Return this to parent
+      return {
+        userAnswer: this.result,
+        correctAnswer: cAns,
+        retroType: retro
+      }
+    },
+
+    /**
+     * @description - compute the correct elements in user response
+     * compare with  the solution and return wether user succeeded or failed
+     * @param {Object} result - user responses
+     * @retuns boolean
+     */
+    computeResult(result) {
+      const res = this.result.filter((el) => el.correct)
+      return res.length == this.solution.length
+    },
+    /**
+     * @description - Method to ge the Number of input elements in the component
+     * This is used to determine if the user has filled all inputs before enabling the submit button
+     * @returns {Promise} resolves to the number of input elements
+     */
+    async getInputElements() {
+      await this.$nextTick()
+      // Ensure this is the targeted element
+      if (this.$el.id !== this.id) return
+      return this.inputElements.filter((el) => el.type == 'input').length
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.texteatrou {
+  display: inline;
+  position: relative;
+
+  .v-input {
+    display: inline-block;
+  }
+}
+
+.texteatrou > input {
+  display: inline;
+  width: auto;
+}
+</style>

package/src/components/AppCompJauge.vue

@@ -7,7 +7,7 @@
       :max="maxValue"
       aria-hidden="true"
     ></v-progress-linear>
-    <p class="prcnt">{{ getPourcent }} %</p>
+    <p class="prcnt">{{ getPourcent }}</p>
   </div>
   <div v-else>
     <div class="warning">
@@ -20,6 +20,8 @@
   </div>
 </template>
 <script>
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
 export default {
   props: {
     // props Give value to show progress
@@ -39,11 +41,16 @@ export default {
     return {}
   },
   computed: {
+    ...mapState(useAppStore, ['getAppConfigs']),
     getPourcent() {
       // Calculate on a 100%
-      let result = (this.value * 100) / this.maxValue
-      if (result > 100) return 100
-      else return Math.round(result)
+      let result = Math.round((this.value * 100) / this.maxValue)
+
+      if (result > 100) result = 100
+
+      return this.getAppConfigs.lang.toLowerCase() == 'en'
+        ? `${result}%`
+        : `${result} %`
     },
     error() {
       if (typeof this.value != 'number' || typeof this.maxValue != 'number') {

package/src/components/AppCompMenu.vue

@@ -56,6 +56,7 @@
           <app-base-button
             :id="`btn-quiz`"
             class="btn lk-btn"
+            title="Réinitialiser la leçon"
             :is-disabled="resetStatus !== false"
             @click="askResetUserData"
           >
@@ -105,8 +106,8 @@ export default {
       'getModuleInfo',
       'getMenuSettings',
       'getAppDebugMode',
-      'getAllCompleted',
-      'getDataFromServer'
+      'getAppConfigs',
+      'getAllCompleted'
     ]),
     appDebugMode() {
       return this.getAppDebugMode
@@ -171,17 +172,7 @@ export default {
         }
       }, 2000)
     },
-    // GoToLastRoute() {
-    //   let lastRoute
-    //   //Get all activity state (menu not included)
-
-    //   //No route history Should link to introduction route
-    //   if (!this.getRouteHistory.length) return 'introduction'
-    //   //last Route should be the last element in route history
-    //   lastRoute = this.getRouteHistory.toReversed()[0]
-    //   //create the route link and return it
-    //   return this.createdRoute(lastRoute)
-    // },
+    //Go to the last route you were before the menu
     GoToLastRoute() {
       let lastRoute
       let path
@@ -294,7 +285,9 @@ export default {
       // Create pourcentage complete
       progress = Math.round((pageCmplt * 100) / page)
 
-      return `${progress}%`
+      return this.getAppConfigs.lang.toLowerCase() == 'en'
+        ? `${progress}%`
+        : `${progress} %`
     },
     askResetUserData() {
       //show loader animation

package/src/components/AppCompMenuItem.vue

@@ -35,12 +35,14 @@
             </div>
 
             <div class="cnt-time">
-              <svg :aria-label="$t('label.timer')">
+              <svg
+                :aria-label="$t('label.timer')"
+                aria-hidden="true"
+                focusable="false"
+              >
                 <use href="#clock-icon" />
               </svg>
-              <p class="time">
-                {{ activity.time || '00:00' }}
-              </p>
+              <p class="time">{{ activity.time || '00:00' }}</p>
             </div>
             <div class="box-gauge">
               <app-comp-jauge
@@ -76,7 +78,7 @@ export default {
      * Apply different punctuation for colons. No space before a colon in english, one space before a colon in french
      */
     cardTitleSeparator() {
-      return this.getAppConfigs.lang === 'en' ? ': ' : ' : '
+      return this.getAppConfigs.lang.toLowerCase() == 'en' ? ': ' : ' : '
     },
     activities() {
       // get the data for list of the page for this module from the store and