fcad-core-dragon 2.4.1-test.1 → 2.5.0-test.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [2.5.0-test.1](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/compare/v2.4.1-test.1...v2.5.0-test.1) (2026-06-08)
+
+
+### Features
+
+* **components:** Ajout nouveau composant categorieCheckBoxNx ([f8c64ce](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/commit/f8c64ce9e001dd3e93d450b12715978db3dc04dc))
+
 ## [2.4.1-test.1](https://git.crosemont.qc.ca/fcad/core/fcad-core-2/compare/v2.4.0...v2.4.1-test.1) (2026-06-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fcad-core-dragon",
-  "version": "2.4.1-test.1",
+  "version": "2.5.0-test.1",
   "private": false,
   "type": "module",
   "main": "./src/main.js",

package/src/components/AppBase.vue

@@ -224,6 +224,8 @@ export default {
       // this.updateTracker('appBase', 'loading')
       this.initializeApp(this.appConfig)
     }
+    // set the language of the app
+    this.setLocale(this.getAppConfigs.lang)
     this.setDocumentTitle()
     window.versionFCAD = this.$helper.getFcadVersionString()
     //check if this is running in a mobile environment and register state in the store
@@ -264,8 +266,6 @@ export default {
   },
 
   mounted() {
-    // set the language of the app
-    this.setLocale(this.getAppConfigs.lang)
     window.addEventListener('keydown', this.handleF5KeyPressed)
     window.addEventListener('beforeunload', this.handleBeforeUnload)
   },

package/src/components/AppCompInputCategorieCheckBoxNx.vue

@@ -0,0 +1,330 @@
+<!-- About this Component--
+ * Renders a checkboxe input type  for the Quiz component
+ * Related Quiz to question: REPONSE_MULTIPLE
+ * Receives the a data object defined by user
+ * Used by AppCompQuiz
+-->
+<template>
+  <div v-if="inputData.length > 0" :id="id" class="input-box">
+      <v-row
+        v-for="(categorie,i) in inputData"
+        :key="`cat_${categorie.id}`"
+        class="box-categorie"
+      >
+        <v-col>
+          <div v-html="categorie.categorie"></div>
+        </v-col>
+        <v-col>
+          <fieldset :aria-label="fieldsetLabel">
+            <div class="box-checkbox">
+              <label
+               v-for="(choixReponse, index) in categorie.values"
+                :key="`lbl_chx_${id}-${choixReponse.id}`"
+                :for="`boxchx_cat_${i}_${index}`"
+                class="checkbox-label"
+                :class="[
+                  {
+                    answerSlct: isSelected(i,choixReponse)
+                  },
+                  `${retro?.[i]?.[index] ?? ''}`
+                ]"
+              >
+                <input
+                  :id="`boxchx_cat_${i}_${index}`"
+                  :key="`boxchx_cat_${i}_${choixReponse}`"
+                  :checked="isSelected(i,choixReponse)"
+                  type="checkbox"
+                  :name="`btn-checkbox-cat-${i}-${index}`"
+                  :aria-labelledby="`span_${index}`"
+                  :aria-describedby="`${index}-msg-erreur`"
+                  @change="onSelectUpdate($event,i,choixReponse)"
+                />
+                <span
+                  :id="`span_${index}`"
+                  class="checkbox-contenu"
+                  v-html="choixReponse"
+                ></span>
+                <span
+                  :id="`${index}-msg-erreur`"
+                  :key="`msg_chx_${index}`"
+                  class="sr-only"
+                >
+                  {{ messageAccessibility[index] }}
+                </span>
+              </label>
+            </div>
+          </fieldset>
+        </v-col>
+
+      </v-row>
+  </div>
+</template>
+<script>
+import { useQuiz } from '../composables/useQuiz'
+import { validateObjType } from '../shared/validators'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'AppCompInputCheckBoxNx',
+  /* PROPS USED FOR PARENT TO COMMUNICATE DATA TO CHILD */
+  props: {
+    inputData: {
+      type: Array,
+      default: () => []
+    },
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    solution: {
+      type: Array,
+      default: () => []
+    },
+    id: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['update:modelValue', 'enable-submit'],
+  setup() {
+    const { t } = useI18n()
+    const { retroType, addRetroStyle, resetRetroStyle } = useQuiz()
+    return { retroType, addRetroStyle, resetRetroStyle, t }
+  },
+  data() {
+    return {
+      result: null,
+      retro: [],
+      messageAccessibility: []
+    }
+  },
+  computed: {
+    fieldsetLabel() {
+      return `${this.$t('quizState.checkboxFieldset')} ${this.$t('quizState.options')}`
+    }
+  },
+  watch: {
+    modelValue: {
+      handler(newVal) {
+        this.$emit('enable-submit', newVal.length && newVal.every((e) => e.length))
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  created() {
+    if (import.meta.env.DEV) {
+      let errors = this.validateInputData()
+
+      if (errors && errors.errorList.length)
+        return this.$bus.$emit('input-error', { e: this.id, errors })
+    }
+  },
+  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','categorie']
+      let arrayType = ['values']
+      if (!this.inputData.length) return errors
+      for (let i = 0; i < this.inputData.length; i++) {
+        errors = validateObjType(
+          this.inputData[i],
+          { stringType, arrayType },
+          null,
+          `choix_reponse #${i + 1}`
+        )
+        const { errorList, errorInConsole } = errors
+
+        if (!errorList || !errorInConsole) return null
+        return errors
+      }
+
+      return errors
+    },
+
+    /**
+     * @description inicate wether the element is checked or not.
+     * Element is selected if in the modelValue
+     * @param value value of tje element to be checked
+     */
+    isSelected(parent,value) {
+
+      let existing
+      if(this.modelValue.length) existing = this.modelValue[parent].includes(value)
+      else existing = false
+
+      return existing
+    },
+    /**
+     * @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(event, parent, value) {
+      const isChecked = event.target.checked
+      this.resetRetroStyle([this.retro, this.messageAccessibility])
+
+      let ValueModel
+
+      if(!this.modelValue.length) ValueModel = Array.from({length:this.inputData.length},()=>[])
+      else ValueModel = this.modelValue
+
+      let UpdatedValue = [...ValueModel]
+
+      if (isChecked) {
+        const existing = UpdatedValue[parent].includes(value)
+        if (!existing) UpdatedValue[parent].push(value)
+      } else UpdatedValue[parent] = UpdatedValue[parent].filter((v) => v !== value)
+
+
+      this.$emit('update:modelValue', UpdatedValue)
+
+    },
+    /**
+     * @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() {
+      // Validate the user answer
+      //Created a custom validated object for inputData
+      let mappedResults = Array.from({length:this.inputData.length},()=>[])
+      if (this.solution != null) {
+        this.inputData.forEach((e,index)=>{
+          mappedResults[index] = e.values.map(
+            (a) =>
+            (a = {
+              ...a,
+              correct: this.solution[index].includes(a)
+            })
+         )
+        })
+      } else {
+        this.inputData.forEach((e,index)=>{
+          mappedResults[index] = e.values.map(
+            (a) =>
+            (a = {
+              ...a,
+              correct: this.solution[index].includes(a)
+            })
+           )
+        })
+      }
+
+      let classRetro = Array.from({length:this.inputData.length},()=>[])
+      let mesA11y = Array.from({length:this.inputData.length},()=>[])
+
+      this.inputData.forEach((e,index)=>{
+        const { classRetro: cr, mesA11y: ma } =
+         this.addRetroStyle(
+            this.solution[index],
+            mappedResults[index],
+            this.inputData[index].values.length
+          )
+        classRetro[index] = cr
+        mesA11y[index] = ma
+      })
+
+      this.retro = classRetro
+      this.messageAccessibility = mesA11y
+
+      //filer mapped to return a customized object of the user selection
+      this.result =
+        this.modelValue.map((el,i) => {
+          return el.map((e,index)=>{
+            return{
+              id:index,
+              selected: e,
+              correct: this.solution[i].includes(e)
+            }
+          })
+        })
+      let retroResult = Array.from({length:this.inputData.length},()=>[])
+
+      this.inputData.forEach((e,index)=>{
+        retroResult[index] = this.retroType(this.solution[index], this.result[index])
+      })
+
+      const retro = retroResult.every(e => e === 'retro_positive') ? 'retro_positive' : 'retro_negative'
+
+      let cAns
+      if (this.solution != null) cAns = this.computeResult(this.result)
+      else cAns = false
+
+      //Object to return validation 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) {
+      let res = result.map((e) => { return e.filter((a) => (a.correct)) }).flat()
+
+      return (
+        res.length == this.solution.flat() &&
+        this.solution.flat().length == result.flat().length
+      )
+    }
+  }
+}
+</script>
+<style lang="scss">
+fieldset {
+  border: inherit;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  border: inherit;
+}
+
+.custom-control-input:focus ~ .custom-control-label::before {
+  box-shadow: inherit;
+  -webkit-box-shadow: inherit;
+}
+
+fieldset {
+  border: inherit;
+}
+
+.custom-checkbox {
+  width: 100%;
+  height: 100%;
+  padding-left: 0;
+
+  input {
+    width: 100%;
+    height: 100%;
+  }
+
+  label {
+    width: 100%;
+    height: 100%;
+
+    &:after,
+    &:before {
+      border: inherit;
+      top: 0px;
+      left: 0px;
+      height: 0;
+      width: 0;
+      background-color: inherit;
+      border: inherit;
+    }
+  }
+}
+</style>