fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppCompQuizNext.vue

@@ -1,510 +1,515 @@
-<!-- About this Component--
- * Component to render a Quiz to user: question with serie of inputs
- * Receives the a quiz data object defined by user
- * Base on Quiz type will render a specific input type for the quiz
- * Example of use: in an page you can add a quiz/exercice by calling:
- **  <app-comp-quiz-next :quiz-data="my_quiz_data_json"/>
- **  where "my_quiz_data_json" is a json object of the your quiz/exercices
-
--->
-<template>
-  <app-base-error-display
-    v-if="errorList && errorList.length"
-    :error-group="'component'"
-    :error-title="'ERREUR: COMPOSANT DE QUIZ'"
-    :errors-list="errorList"
-  />
-  <v-row v-else>
-    <v-col
-      v-if="quizData"
-      cols="12"
-      :class="`container_quiz_${quizData.type_question}`"
-    >
-      <!--Show skeleton while quiz data is not ready-->
-      <template v-if="!isReady">
-        <app-base-skeleton
-          :skeleton-text="''"
-          :skeleton-type="skeletonType(quizData.type_question)"
-        />
-        {{ quizData.type_question }}
-      </template>
-      <!--Show  when quiz data is ready-->
-      <template v-else>
-        <div :class="`quiz_${quizData.type_question}`">
-          <div
-            :id="`${quizData.type_question}_${quizData.id}`"
-            class="quiz-question"
-          >
-            <span class="sr-only">question :</span>
-            <div v-html="quizEnnonce" />
-          </div>
-
-          <component
-            :is="dynamicInputComponent"
-            v-bind="quizElement"
-            :ref="`Qz_${quizData.id}`"
-            v-model="response"
-            @enable-submit="enableValidateButton"
-          />
-
-          <div class="btn-ctrl-quiz">
-            <app-base-button
-              :id="`btn_quiz_${quizData.id}`"
-              ref="quiz"
-              class="btn-quiz btn-main"
-              :is-disabled="!isEnabled"
-              :title="txtBtnSubmit"
-              @click="handleValidation"
-            >
-              {{ txtBtnSubmit }}
-            </app-base-button>
-          </div>
-        </div>
-      </template>
-    </v-col>
-    <v-col cols="12" class="ctn-retro" aria-live="polite">
-      <transition name="fade" mode="in-out">
-        <div
-          v-if="showRetro"
-          :class="`retro_inline_wrapper retro_inline_${retroType}`"
-          :aria-label="retroAriaLabel"
-        >
-          <div class="retro-title-container">
-            <span class="retro-title">{{ retroTitle }}</span>
-          </div>
-          <div class="retro-text-container" v-html="retroHtml"></div>
-        </div>
-      </transition>
-    </v-col>
-  </v-row>
-</template>
-<script>
-import { mapState } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import { defineAsyncComponent } from 'vue'
-import { computed } from 'vue'
-import { validateQuizData } from '../shared/validators'
-export default {
-  name: 'AppCompQuiz',
-  components: {
-    AppCompInputTextBox: defineAsyncComponent(
-      () => import('./AppCompInputTextNx.vue')
-    ),
-    AppCompInputCheckBox: defineAsyncComponent(
-      () => import('./AppCompInputCheckBoxNx.vue')
-    ),
-    AppCompInputDropdown: defineAsyncComponent(
-      () => import('./AppCompInputDropdownNx.vue')
-    ),
-    AppCompInputRadio: defineAsyncComponent(
-      () => import('./AppCompInputRadioNx.vue')
-    ),
-    AppCompInputTextToFillDropdown: defineAsyncComponent(
-      () => import('./AppCompInputTextToFillDropdownNx.vue')
-    ),
-    AppCompInputTextTable: defineAsyncComponent(
-      () => import('./AppCompInputTextTableNx.vue')
-    ),
-    AppCompInputTextToFill: defineAsyncComponent(
-      () => import('./AppCompInputTextToFillNx.vue')
-    )
-  },
-  inject: ['userInteraction'],
-  provide() {
-    return {
-      quizAssociation: computed(() => this.quizAssociation),
-      quizDragDrop: computed(() => this.quizDragDrop),
-      quizSubmit: computed(() => this.quizSubmit), //added to explod comp^
-      initQuizSelected: computed(() => this.initQuizSelected), //value of the saved answers of the dropdown quiz
-      initQuizTable: computed(() => this.initQuizTable) //value of the saved answers of the table quiz
-    }
-  },
-  props: {
-    /* MAIN  PROP USED FOR 2 WAY BINDING OF DATA PARENT&CHILD */
-    modelValue: [Array, null],
-    consigne: {
-      type: Boolean,
-      default: true
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-    quizData: {
-      type: Object,
-      validator: function (value) {
-        const { errorInConsole } = validateQuizData(value)
-        if (errorInConsole.length)
-          for (let err of errorInConsole)
-            console.warn(
-              ` %cAppCompQuiz>>>${err}`,
-              'background: orange; color: white; display: block; margin:5px;'
-            )
-
-        return errorInConsole.length == 0
-      },
-      default: () => {}
-    }
-  },
-
-  data() {
-    return {
-      totalAttempts: 0, //Total attempts to answer the quiz
-      quizCompleted: false,
-      quizSubmit: false,
-      retroType: '',
-      retroTitle: '',
-      retroHtml: '',
-      showRetro: false,
-      errorList: [],
-      response: [],
-      isEnabled: false,
-      justInitialized: null,
-      previousResponse: null,
-      skeletonCount: 5, //Number of skeleton lines to show
-      isReady: false
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getUserInteraction',
-      'getCurrentPage',
-      'getUserDataStatus',
-      'getModuleInfo'
-    ]),
-    quizElement() {
-      const propMapping = {
-        choix_reponse: 'inputData',
-        texte_base: 'textBase',
-        max_essai: 'maxEssai'
-      }
-      this.quizData
-
-      const quiz = {}
-
-      for (const key in this.quizData) {
-        const mappedKey = propMapping[key] || key
-        quiz[mappedKey] = this.quizData[key]
-      }
-
-      return quiz
-    },
-    retroAriaLabel() {
-      let label = ''
-      switch (this.retroType) {
-        case 'neutral':
-          label = this.$t('quizState.neutralAnswer')
-          break
-        case 'positive':
-          label = this.$t('quizState.goodAnswer')
-          break
-        case 'negative':
-          label = this.$t('quizState.badAnswer')
-          break
-      }
-      return label
-    },
-
-    /**
-     * @description
-     * @returns {string} the componant of the quiz input
-     */
-    dynamicInputComponent() {
-      const { type_question } = this.quizData
-
-      let inputComponent
-      switch (true) {
-        case type_question == 'choix_unique':
-          inputComponent = 'AppCompInputRadio'
-          break
-        case type_question == 'dropdown':
-          inputComponent = 'AppCompInputDropdown'
-          break
-        case type_question == 'choix_mult':
-          inputComponent = 'AppCompInputCheckBox'
-          break
-        case type_question == 'reponse_ouverte':
-          inputComponent = 'AppCompInputTextBox'
-          break
-        case type_question == 'texte_troue':
-          inputComponent = 'AppCompInputTextToFill'
-          break
-        case type_question == 'texte_tableau':
-          inputComponent = 'AppCompInputTextTable'
-          break
-        case type_question == 'texte_troue_select':
-          inputComponent = 'AppCompInputTextToFillDropdown'
-          break
-        default:
-          inputComponent = `div`
-      }
-      return inputComponent
-    },
-
-    /**
-     * @description controls the showin of warning in the page when a prop is wrongly passed
-     */
-    errorQuizItems() {
-      const errors = validateQuizData(this.quizData)
-      return errors
-    },
-
-    /**
-     * @description track the initialized state of this component.
-     * Indicate wheither the component is just starting.
-     * This computed property is use to control when some event /action should happen
-     */
-    compJustInitialized() {
-      return this.justInitialized
-    },
-
-    /**
-     * @description Text to display for the quiz button
-     * @return {String} string to use by the local
-     * */
-    txtBtnSubmit() {
-      let str = ''
-      const { solution } = this.quizData
-
-      if (solution === null) str = this.$t('button.save')
-      //There is more than on element in the solution
-      else str = this.$t('button.quiz_verify')
-
-      return str
-    },
-
-    /**
-     * @description Ennonce of the quiz - parse to add image if defined
-     */
-
-    quizEnnonce() {
-      const { ennonce } = this.quizData
-      let _ennonce = ennonce
-      return _ennonce
-    }
-  },
-  watch: {
-    getUserInteraction: {
-      async handler() {
-        if (!this.getPreviousAnswers(this.userInteraction.quizAnswers)) {
-          return setTimeout(() => (this.isReady = true), 500)
-        }
-
-        this.previousResponse = await this.getPreviousAnswers(
-          this.userInteraction.quizAnswers
-        )
-        this.response = this.previousResponse
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  created() {
-    this.$bus.$on('input-error', this.showErrorsMessages)
-    this.$bus.$on('hide-retro', this.hideShowRetro)
-    this.justInitialized = true
-  },
-  beforeUnmount() {
-    this.$bus.$off('input-error', this.showErrorsMessages)
-    this.$bus.$off('hide-retro', this.hideShowRetro)
-  },
-
-  mounted() {
-    if (import.meta.env.DEV) {
-      this.showErrorsMessages(this.errorQuizItems)
-    }
-    setTimeout(() => {
-      this.justInitialized = false
-    }, 500)
-  },
-  methods: {
-    showErrorsMessages(data) {
-      if (!data || !data.errors) return
-      if (data.e !== this.quizData.id) return
-
-      const { errorList, errorInConsole } = data.errors
-      this.errorList = errorList
-
-      if (errorInConsole.length)
-        errorInConsole.forEach((err) => {
-          console.warn(
-            ` %cAppCompQuiz>>>${err}`,
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-        })
-    },
-
-    /**
-     * @description disables the quiz
-     * @todo must be expanded for what happens when the quiz is disabled
-     */
-    setQuizCompleted() {
-      this.quizCompleted = true
-    },
-
-    /**
-     * @description saves the submitted answer in the store
-     * - Create new entry in userData for the quiz if it doesn't exist or update its data
-     * - Send xapi competion statement of the quiz to LRS
-     * @param {Object} result - contain the user answer and success of is reponse
-     * deprecated param {Boolean} isCounted inticates in wich array it will ba saved, true = quizAnswers, false = pollAnswers
-     */
-    saveAnswer(result) {
-      const { userAnswer, correctAnswer } = result
-      const quizID = this.quizData.id
-
-      if (
-        !this.userInteraction.quizAnswers ||
-        !this.userInteraction.quizAnswers[quizID]
-      ) {
-        this.userInteraction.quizAnswers = {
-          ...this.userInteraction.quizAnswers,
-          [quizID]: {
-            value: userAnswer,
-            total_attempts: this.totalAttempts
-          }
-        }
-      } else {
-        this.userInteraction.quizAnswers[quizID] = {
-          value: userAnswer,
-          total_attempts: this.totalAttempts
-        }
-      }
-
-      const id = this.getCurrentPage.activityRef
-      let aName = ''
-      let text = ''
-      let txtEnnonce = document.querySelector('.quiz-question div').innerText
-
-      switch (true) {
-        case id == 'A00':
-          aName = 'Introduction'
-          break
-        case id == 'A99':
-          aName = 'Conclusion'
-          break
-
-        default: {
-          let d = id.replace('A', '').trim()
-          d = parseInt(d)
-          aName = `Exercice ${this.quizData.id} de ${this.$t(
-            'text.activity'
-          )} ${d}`
-        }
-      }
-
-      switch (this.$i18n.locale) {
-        case 'fr':
-          if (this.getModuleInfo.courseID)
-            text = `${aName} de ${this.getModuleInfo.id} `
-          else text = `Le ${this.getModuleInfo.id}`
-          break
-        case 'en':
-          if (this.getModuleInfo.courseID)
-            text = `${aName} of ${this.getModuleInfo.id}`
-          else text = `The ${this.getModuleInfo.id}`
-          break
-      }
-      //Creating custom statement
-      const stmtQuiz = {
-        id: `exercices/${this.quizData.id}`,
-        verb: 'answered',
-        definition: txtEnnonce,
-        description: text,
-        type: 'http://adlnet.gov/expapi/activities/cmi.interaction',
-        result: {
-          response: JSON.stringify({ ...userAnswer, correctAnswer })
-        }
-      }
-
-      this.$bus.$emit('send-xapi-statement', stmtQuiz)
-    },
-
-    /**
-     * @description gets the answers for this quiz from existing answers record
-     * @param {Object} answers the list of quizes answered from the userInteraction
-     */
-    getPreviousAnswers(answers) {
-      const { id, type_question } = this.quizData
-
-      if (!answers || !answers[id]) return null
-      const { value, total_attempts } = answers[id]
-
-      this.totalAttempts = total_attempts
-      if (this.quizLimitActive) this.quizCompleted = true //Signal that quiz has been completed
-      let isExecption = ['choix_unique']
-      if (isExecption.includes(type_question)) {
-        this.isReady = true
-        return (this.response = [value])
-      }
-
-      this.response = value.map((a) => (a = a.filled || a.selected))
-      this.isReady = true
-      return this.response
-    },
-    /**
-     * @description method to initalize validation process and save the user answer
-     * Call the validation method of the child component (input) and save tho store/LRS
-     * Validation Will process will only proceed when the user responses has changed
-     */
-    handleValidation() {
-      const id = this.quizData.id
-      const child = this.$refs[`Qz_${id}`]
-      const result = child.validateAnswer()
-
-      this.hideShowRetro(child, true)
-      this.retroType = result.retroType
-
-      switch (true) {
-        case result.retroType == 'retro_positive':
-          this.retroTitle = this.quizData.retroaction.retro_positive.title
-          this.retroHtml = this.quizData.retroaction.retro_positive.hypertext
-          break
-        case result.retroType == 'retro_negative':
-          this.retroTitle = this.quizData.retroaction.retro_negative.title
-          this.retroHtml = this.quizData.retroaction.retro_negative.hypertext
-          break
-        case result.retroType == 'retro_neutre':
-          this.retroTitle = this.quizData.retroaction.retro_neutre.title
-          this.retroHtml = this.quizData.retroaction.retro_neutre.hypertext
-          break
-      }
-      // return if there no changes in the user response
-      if (
-        this.previousResponse &&
-        JSON.stringify(this.previousResponse) == JSON.stringify(this.response)
-      )
-        return
-      this.totalAttempts += 1
-      this.saveAnswer(result)
-    },
-    /**
-     * @description Enables/disables valdate button
-     */
-    enableValidateButton(value) {
-      this.isEnabled = value
-    },
-    /**
-     * @description hide /show the retroaction
-     */
-    hideShowRetro(el, value) {
-      if (!el || !el.id) return
-      if (el.id !== this.quizData.id) return
-
-      this.showRetro = value
-    },
-    skeletonType(type) {
-      if (type == 'reponse_ouverte') {
-        return `quiz-texte`
-      } else {
-        return `quiz-choix`
-      }
-    }
-  }
-}
-</script>
-<style lang="scss">
-.custom-control {
-  z-index: 0;
-}
-</style>
+<!-- About this Component--
+ * Component to render a Quiz to user: question with serie of inputs
+ * Receives the a quiz data object defined by user
+ * Base on Quiz type will render a specific input type for the quiz
+ * Example of use: in an page you can add a quiz/exercice by calling:
+ **  <app-comp-quiz-next :quiz-data="my_quiz_data_json"/>
+ **  where "my_quiz_data_json" is a json object of the your quiz/exercices
+
+-->
+<template>
+  <app-base-error-display
+    v-if="errorList && errorList.length"
+    :error-group="'component'"
+    :error-title="'ERREUR: COMPOSANT DE QUIZ'"
+    :errors-list="errorList"
+  />
+  <v-row v-else>
+    <v-col
+      v-if="quizData"
+      cols="12"
+      :class="`container_quiz_${quizData.type_question}`"
+    >
+      <!--Show skeleton while quiz data is not ready-->
+      <template v-if="!isReady">
+        <app-base-skeleton
+          :skeleton-text="''"
+          :skeleton-type="skeletonType(quizData.type_question)"
+        />
+        {{ quizData.type_question }}
+      </template>
+      <!--Show  when quiz data is ready-->
+      <template v-else>
+        <div :class="`quiz_${quizData.type_question}`">
+          <div
+            :id="`${quizData.type_question}_${quizData.id}`"
+            class="quiz-question"
+          >
+            <span class="sr-only">question :</span>
+            <div v-html="quizEnnonce" />
+          </div>
+
+          <component
+            :is="dynamicInputComponent"
+            v-bind="quizElement"
+            :ref="`Qz_${quizData.id}`"
+            v-model="response"
+            @enable-submit="enableValidateButton"
+          />
+
+          <div class="btn-ctrl-quiz">
+            <app-base-button
+              :id="`btn_quiz_${quizData.id}`"
+              ref="quiz"
+              class="btn-quiz btn-main"
+              :is-disabled="!isEnabled"
+              :title="txtBtnSubmit"
+              @click="handleValidation"
+            >
+              {{ txtBtnSubmit }}
+            </app-base-button>
+          </div>
+        </div>
+      </template>
+    </v-col>
+    <v-col cols="12" class="ctn-retro" aria-live="polite">
+      <transition name="fade" mode="in-out">
+        <div
+          v-if="showRetro"
+          :class="`retro_inline_wrapper retro_inline_${retroType}`"
+          :aria-label="retroAriaLabel"
+        >
+          <div class="retro-title-container">
+            <span class="retro-title">{{ retroTitle }}</span>
+          </div>
+          <div class="retro-text-container" v-html="retroHtml"></div>
+        </div>
+      </transition>
+    </v-col>
+  </v-row>
+</template>
+<script>
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { defineAsyncComponent } from 'vue'
+import { computed } from 'vue'
+import { validateQuizData } from '../shared/validators'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'AppCompQuiz',
+  components: {
+    AppCompInputTextBox: defineAsyncComponent(
+      () => import('./AppCompInputTextNx.vue')
+    ),
+    AppCompInputCheckBox: defineAsyncComponent(
+      () => import('./AppCompInputCheckBoxNx.vue')
+    ),
+    AppCompInputDropdown: defineAsyncComponent(
+      () => import('./AppCompInputDropdownNx.vue')
+    ),
+    AppCompInputRadio: defineAsyncComponent(
+      () => import('./AppCompInputRadioNx.vue')
+    ),
+    AppCompInputTextToFillDropdown: defineAsyncComponent(
+      () => import('./AppCompInputTextToFillDropdownNx.vue')
+    ),
+    AppCompInputTextTable: defineAsyncComponent(
+      () => import('./AppCompInputTextTableNx.vue')
+    ),
+    AppCompInputTextToFill: defineAsyncComponent(
+      () => import('./AppCompInputTextToFillNx.vue')
+    )
+  },
+  inject: ['userInteraction'],
+  provide() {
+    return {
+      quizAssociation: computed(() => this.quizAssociation),
+      quizDragDrop: computed(() => this.quizDragDrop),
+      quizSubmit: computed(() => this.quizSubmit), //added to explod comp^
+      initQuizSelected: computed(() => this.initQuizSelected), //value of the saved answers of the dropdown quiz
+      initQuizTable: computed(() => this.initQuizTable) //value of the saved answers of the table quiz
+    }
+  },
+  props: {
+    /* MAIN  PROP USED FOR 2 WAY BINDING OF DATA PARENT&CHILD */
+    modelValue: [Array, null],
+    consigne: {
+      type: Boolean,
+      default: true
+    },
+    shuffleAnswers: {
+      type: Boolean,
+      default: false
+    },
+    quizData: {
+      type: Object,
+      validator: function (value) {
+        const { errorInConsole } = validateQuizData(value)
+        if (errorInConsole.length)
+          for (let err of errorInConsole)
+            console.warn(
+              ` %cAppCompQuiz>>>${err}`,
+              'background: orange; color: white; display: block; margin:5px;'
+            )
+
+        return errorInConsole.length == 0
+      },
+      default: () => {}
+    }
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  data() {
+    return {
+      totalAttempts: 0, //Total attempts to answer the quiz
+      quizCompleted: false,
+      quizSubmit: false,
+      retroType: '',
+      retroTitle: '',
+      retroHtml: '',
+      showRetro: false,
+      errorList: [],
+      response: [],
+      isEnabled: false,
+      justInitialized: null,
+      previousResponse: null,
+      skeletonCount: 5, //Number of skeleton lines to show
+      isReady: false
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getUserInteraction',
+      'getCurrentPage',
+      'getUserDataStatus',
+      'getModuleInfo'
+    ]),
+    quizElement() {
+      const propMapping = {
+        choix_reponse: 'inputData',
+        texte_base: 'textBase',
+        max_essai: 'maxEssai'
+      }
+      this.quizData
+
+      const quiz = {}
+
+      for (const key in this.quizData) {
+        const mappedKey = propMapping[key] || key
+        quiz[mappedKey] = this.quizData[key]
+      }
+
+      return quiz
+    },
+    retroAriaLabel() {
+      let label = ''
+      switch (this.retroType) {
+        case 'neutral':
+          label = this.$t('quizState.neutralAnswer')
+          break
+        case 'positive':
+          label = this.$t('quizState.goodAnswer')
+          break
+        case 'negative':
+          label = this.$t('quizState.badAnswer')
+          break
+      }
+      return label
+    },
+
+    /**
+     * @description
+     * @returns {string} the componant of the quiz input
+     */
+    dynamicInputComponent() {
+      const { type_question } = this.quizData
+
+      let inputComponent
+      switch (true) {
+        case type_question == 'choix_unique':
+          inputComponent = 'AppCompInputRadio'
+          break
+        case type_question == 'dropdown':
+          inputComponent = 'AppCompInputDropdown'
+          break
+        case type_question == 'choix_mult':
+          inputComponent = 'AppCompInputCheckBox'
+          break
+        case type_question == 'reponse_ouverte':
+          inputComponent = 'AppCompInputTextBox'
+          break
+        case type_question == 'texte_troue':
+          inputComponent = 'AppCompInputTextToFill'
+          break
+        case type_question == 'texte_tableau':
+          inputComponent = 'AppCompInputTextTable'
+          break
+        case type_question == 'texte_troue_select':
+          inputComponent = 'AppCompInputTextToFillDropdown'
+          break
+        default:
+          inputComponent = `div`
+      }
+      return inputComponent
+    },
+
+    /**
+     * @description controls the showin of warning in the page when a prop is wrongly passed
+     */
+    errorQuizItems() {
+      const errors = validateQuizData(this.quizData)
+      return errors
+    },
+
+    /**
+     * @description track the initialized state of this component.
+     * Indicate wheither the component is just starting.
+     * This computed property is use to control when some event /action should happen
+     */
+    compJustInitialized() {
+      return this.justInitialized
+    },
+
+    /**
+     * @description Text to display for the quiz button
+     * @return {String} string to use by the local
+     * */
+    txtBtnSubmit() {
+      let str = ''
+      const { solution } = this.quizData
+
+      if (solution === null) str = this.$t('button.save')
+      //There is more than on element in the solution
+      else str = this.$t('button.quiz_verify')
+
+      return str
+    },
+
+    /**
+     * @description Ennonce of the quiz - parse to add image if defined
+     */
+
+    quizEnnonce() {
+      const { ennonce } = this.quizData
+      let _ennonce = ennonce
+      return _ennonce
+    }
+  },
+  watch: {
+    getUserInteraction: {
+      async handler() {
+        if (!this.getPreviousAnswers(this.userInteraction.quizAnswers)) {
+          return setTimeout(() => (this.isReady = true), 500)
+        }
+
+        this.previousResponse = await this.getPreviousAnswers(
+          this.userInteraction.quizAnswers
+        )
+        this.response = this.previousResponse
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    this.$bus.$on('input-error', this.showErrorsMessages)
+    this.$bus.$on('hide-retro', this.hideShowRetro)
+    this.justInitialized = true
+  },
+  beforeUnmount() {
+    this.$bus.$off('input-error', this.showErrorsMessages)
+    this.$bus.$off('hide-retro', this.hideShowRetro)
+  },
+
+  mounted() {
+    if (import.meta.env.DEV) {
+      this.showErrorsMessages(this.errorQuizItems)
+    }
+    setTimeout(() => {
+      this.justInitialized = false
+    }, 500)
+  },
+  methods: {
+    showErrorsMessages(data) {
+      if (!data || !data.errors) return
+      if (data.e !== this.quizData.id) return
+
+      const { errorList, errorInConsole } = data.errors
+      this.errorList = errorList
+
+      if (errorInConsole.length)
+        errorInConsole.forEach((err) => {
+          console.warn(
+            ` %cAppCompQuiz>>>${err}`,
+            'background: orange; color: white; display: block; margin:5px;'
+          )
+        })
+    },
+
+    /**
+     * @description disables the quiz
+     * @todo must be expanded for what happens when the quiz is disabled
+     */
+    setQuizCompleted() {
+      this.quizCompleted = true
+    },
+
+    /**
+     * @description saves the submitted answer in the store
+     * - Create new entry in userData for the quiz if it doesn't exist or update its data
+     * - Send xapi competion statement of the quiz to LRS
+     * @param {Object} result - contain the user answer and success of is reponse
+     * deprecated param {Boolean} isCounted inticates in wich array it will ba saved, true = quizAnswers, false = pollAnswers
+     */
+    saveAnswer(result) {
+      const { userAnswer, correctAnswer } = result
+      const quizID = this.quizData.id
+
+      if (
+        !this.userInteraction.quizAnswers ||
+        !this.userInteraction.quizAnswers[quizID]
+      ) {
+        this.userInteraction.quizAnswers = {
+          ...this.userInteraction.quizAnswers,
+          [quizID]: {
+            value: userAnswer,
+            total_attempts: this.totalAttempts
+          }
+        }
+      } else {
+        this.userInteraction.quizAnswers[quizID] = {
+          value: userAnswer,
+          total_attempts: this.totalAttempts
+        }
+      }
+
+      const id = this.getCurrentPage.activityRef
+      let aName = ''
+      let text = ''
+      let txtEnnonce = document.querySelector('.quiz-question div').innerText
+
+      switch (true) {
+        case id == 'A00':
+          aName = 'Introduction'
+          break
+        case id == 'A99':
+          aName = 'Conclusion'
+          break
+
+        default: {
+          let d = id.replace('A', '').trim()
+          d = parseInt(d)
+          aName = `Exercice ${this.quizData.id} de ${this.$t(
+            'text.activity'
+          )} ${d}`
+        }
+      }
+
+      switch (this.$i18n.locale) {
+        case 'fr':
+          if (this.getModuleInfo.courseID)
+            text = `${aName} de ${this.getModuleInfo.id} `
+          else text = `Le ${this.getModuleInfo.id}`
+          break
+        case 'en':
+          if (this.getModuleInfo.courseID)
+            text = `${aName} of ${this.getModuleInfo.id}`
+          else text = `The ${this.getModuleInfo.id}`
+          break
+      }
+      //Creating custom statement
+      const stmtQuiz = {
+        id: `exercices/${this.quizData.id}`,
+        verb: 'answered',
+        definition: txtEnnonce,
+        description: text,
+        type: 'http://adlnet.gov/expapi/activities/cmi.interaction',
+        result: {
+          response: JSON.stringify({ ...userAnswer, correctAnswer })
+        }
+      }
+
+      this.$bus.$emit('send-xapi-statement', stmtQuiz)
+    },
+
+    /**
+     * @description gets the answers for this quiz from existing answers record
+     * @param {Object} answers the list of quizes answered from the userInteraction
+     */
+    getPreviousAnswers(answers) {
+      const { id, type_question } = this.quizData
+
+      if (!answers || !answers[id]) return null
+      const { value, total_attempts } = answers[id]
+
+      this.totalAttempts = total_attempts
+      if (this.quizLimitActive) this.quizCompleted = true //Signal that quiz has been completed
+      let isExecption = ['choix_unique']
+      if (isExecption.includes(type_question)) {
+        this.isReady = true
+        return (this.response = [value])
+      }
+
+      this.response = value.map((a) => (a = a.filled || a.selected))
+      this.isReady = true
+      return this.response
+    },
+    /**
+     * @description method to initalize validation process and save the user answer
+     * Call the validation method of the child component (input) and save tho store/LRS
+     * Validation Will process will only proceed when the user responses has changed
+     */
+    handleValidation() {
+      const id = this.quizData.id
+      const child = this.$refs[`Qz_${id}`]
+      const result = child.validateAnswer()
+
+      this.hideShowRetro(child, true)
+      this.retroType = result.retroType
+
+      switch (true) {
+        case result.retroType == 'retro_positive':
+          this.retroTitle = this.quizData.retroaction.retro_positive.title
+          this.retroHtml = this.quizData.retroaction.retro_positive.hypertext
+          break
+        case result.retroType == 'retro_negative':
+          this.retroTitle = this.quizData.retroaction.retro_negative.title
+          this.retroHtml = this.quizData.retroaction.retro_negative.hypertext
+          break
+        case result.retroType == 'retro_neutre':
+          this.retroTitle = this.quizData.retroaction.retro_neutre.title
+          this.retroHtml = this.quizData.retroaction.retro_neutre.hypertext
+          break
+      }
+      // return if there no changes in the user response
+      if (
+        this.previousResponse &&
+        JSON.stringify(this.previousResponse) == JSON.stringify(this.response)
+      )
+        return
+      this.totalAttempts += 1
+      this.saveAnswer(result)
+    },
+    /**
+     * @description Enables/disables valdate button
+     */
+    enableValidateButton(value) {
+      this.isEnabled = value
+    },
+    /**
+     * @description hide /show the retroaction
+     */
+    hideShowRetro(el, value) {
+      if (!el || !el.id) return
+      if (el.id !== this.quizData.id) return
+
+      this.showRetro = value
+    },
+    skeletonType(type) {
+      if (type == 'reponse_ouverte') {
+        return `quiz-texte`
+      } else {
+        return `quiz-choix`
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.custom-control {
+  z-index: 0;
+}
+</style>