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

package/src/components/AppCompQuizNext.vue

@@ -1,2908 +0,0 @@
-<!-- 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>
-  <v-row v-if="!errorQuizItems">
-    <v-col
-      v-if="quizData"
-      cols="12"
-      :class="[
-        { 'container-quiz-radio': quizData.type_question == 'choix_unique' },
-        { 'container-quiz-checkbox': quizData.type_question == 'choix_mult' },
-        { 'container-quiz-dropdown': quizData.type_question == 'dropdown' },
-        {
-          'container-quiz-text-area':
-            quizData.type_question == 'reponse_ouverte'
-        },
-        {
-          'container-quiz-texte-troue-select':
-            quizData.type_question == 'texte_troue_select'
-        },
-        {
-          'container-quiz-texte-tableau':
-            quizData.type_question == 'texte_tableau'
-        },
-        {
-          'container-quiz-texte-troue': quizData.type_question == 'texte_troue'
-        }
-      ]"
-    >
-      <div
-        :class="[
-          { 'quiz-radio': quizData.type_question == 'choix_unique' },
-          { 'quiz-checkbox': quizData.type_question == 'choix_mult' },
-          { 'quiz-dropdown': quizData.type_question == 'dropdown' },
-          { 'quiz-text-area': quizData.type_question == 'reponse_ouverte' },
-          {
-            'quiz-texte-troue-select':
-              quizData.type_question == 'texte_troue_select'
-          },
-          { 'quiz-texte-tableau': quizData.type_question == 'texte_tableau' },
-          { 'quiz-texte-troue': quizData.type_question == 'texte_troue' }
-        ]"
-      >
-        <div
-          :id="`${quizData.type_question}_${quizData.id}`"
-          class="quiz-question"
-        >
-          <span class="sr-only">question :</span>
-          <div v-html="quizEnnonce" />
-        </div>
-
-        <component
-          :is="quizComponent"
-          :quiz-type="quizData.type_question"
-          :input-data-id="quizData.id"
-          :input-data="quizData.choix_reponse"
-          :quiz-limit-active="attemptsReached"
-          :quiz-input-type="quizInputType"
-          :solution="quizData.solution"
-          :show-solution="showSolution"
-          :shuffle-answers="shuffleAnswers"
-          :quiz-submit="quizSubmit"
-          :text-base="quizData.texte_base"
-          :a-by="`${quizData.type_question}_${quizData.id}`"
-          @input-change="inputChange($event)"
-          @quiz-submit="checkEntry($event)"
-        />
-
-        <div class="btn-ctrl-quiz">
-          <app-base-button
-            :id="`btn_quiz_${quizData.id}`"
-            ref="quiz"
-            class="btn-quiz btn-main"
-            :is-disabled="quizIsNotAnswered || attemptsReached"
-            :title="txtBtnSubmit"
-            @click="validateAnswers"
-          >
-            {{ txtBtnSubmit }}
-          </app-base-button>
-        </div>
-      </div>
-    </v-col>
-    <v-col cols="12" aria-live="polite" class="ctn-retro">
-      <transition name="fade" mode="in-out">
-        <div
-          v-if="showSolution && 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>
-  <app-base-error-display
-    v-else-if="errorQuizItems"
-    :error-group="'component'"
-    :error-title="'ERREUR: COMPOSANT DE QUIZ'"
-    :errors-list="errorQuizItems"
-  />
-</template>
-<script>
-import { mapState } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-import { defineAsyncComponent } from 'vue'
-import { computed } from 'vue'
-
-export default {
-  name: 'AppCompQuiz',
-  components: {
-    AppCompInputTextBox: defineAsyncComponent(
-      () => import('./AppCompInputTextNext.vue')
-    ),
-    AppCompInputCheckBox: defineAsyncComponent(
-      () => import('./AppCompInputCheckBoxNext.vue')
-    ),
-    AppCompInputDropdown: defineAsyncComponent(
-      () => import('./AppCompInputDropdownNext.vue')
-    ),
-    AppCompInputRadio: defineAsyncComponent(
-      () => import('./AppCompInputRadioNext.vue')
-    ),
-    AppCompInputTextToFillDropdown: defineAsyncComponent(
-      () => import('./AppCompInputTextToFillDropdownNext.vue')
-    ),
-    AppCompInputTextTable: defineAsyncComponent(
-      () => import('./AppCompInputTextTableNext.vue')
-    ),
-    AppCompInputTextToFill: defineAsyncComponent(
-      () => import('./AppCompInputTextToFillNext.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
-      // quizType: this.quizComponent
-    }
-  },
-  props: {
-    consigne: {
-      type: Boolean,
-      default: true
-    },
-    shuffleAnswers: {
-      type: Boolean,
-      default: false
-    },
-
-    quizData: {
-      type: Object,
-      validator: function (value) {
-        //verify that element has all required properties
-        if (
-          value.id &&
-          value.type_question &&
-          value.ennonce &&
-          value.retroaction
-        ) {
-          return true
-        } else {
-          console.warn(
-            '%c WARNING!>>> AppCompQuiz: Your quizData is not valid',
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-          if (!value.id) {
-            console.warn(
-              '%c WARNING!>>> AppCompQuiz: Your quizData id is missing',
-              'background: orange; color: white; display: block; margin:5px;'
-            )
-          }
-          if (!value.type_question) {
-            console.warn(
-              '%c WARNING!>>> AppCompQuiz: Your quizData type_question is missing',
-              'background: orange; color: white; display: block; margin:5px;'
-            )
-          }
-          if (!value.ennonce) {
-            console.warn(
-              '%c WARNING!>>> AppCompQuiz: Your quizData ennonce is missing',
-              'background: orange; color: white; display: block; margin:5px;'
-            )
-          }
-          if (!value.retroaction) {
-            console.warn(
-              '%c WARNING!>>> AppCompQuiz: Your quizData retroaction is missing',
-              'background: orange; color: white; display: block; margin:5px;'
-            )
-          }
-          return false
-        }
-      },
-      default: () => {}
-    }
-  },
-  setup(props) {
-    const { quizData } = props
-
-    const defaultInputType = computed(() => {
-      const { type_question } = quizData
-      let inputToReturn = null
-      const arrayType = [
-        'texte_tableau',
-        'texte_troue_select',
-        'texte_troue',
-        'choix_mult',
-        'dropdown'
-      ]
-      const objectType = []
-      const boolType = []
-      const stringType = ['choix_unique', 'reponse_ouverte']
-
-      switch (true) {
-        case arrayType.includes(type_question):
-          inputToReturn = []
-
-          break
-
-        case objectType.includes(type_question):
-          inputToReturn = {}
-          break
-
-        case stringType.includes(type_question):
-          inputToReturn = ''
-          break
-
-        case boolType.includes(type_question):
-          inputToReturn = null
-          break
-      }
-      return inputToReturn
-    })
-    return { defaultInputType }
-  },
-  data() {
-    return {
-      totalAttempts: 0, //added (to be replace by scrom)
-      showSolution: false, //used for when a quiz displays it solution
-      quizCompleted: false,
-      quizInputType: this.defaultInputType,
-      quizAssociation: {},
-      quizDragDrop: {},
-      quizSubmit: false, //added to explod comp^
-      initQuizSelected: [], //value of the saved answers of the dropdown quiz
-      initQuizTable: [], //value of the saved answers of the table quiz
-      retroType: '',
-      retroTitle: '',
-      retroHtml: '',
-      showRetro: false,
-      oldQuizValue: null
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getUserInteraction',
-      'getPageInteraction',
-      'getCurrentPage',
-      'getConnectionInfo',
-      'getDataFromServer'
-    ]),
-    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 To control whether or not the submit button is disabled
-     * @returns {Boolean} true if the quiz is not yet answered, false the button is enable
-     */
-    quizIsNotAnswered() {
-      const { type_question, choix_reponse, texte_base, solution } =
-        this.quizData
-      let notAnswer = false
-
-      switch (true) {
-        case ['choix_unique', 'reponse_ouverte'].includes(type_question):
-          if (!this.quizInputType) {
-            notAnswer = true
-          }
-          break
-        case type_question == 'choix_mult':
-          if (this.quizInputType.length == 0) notAnswer = true
-          break
-        case ['dropdown', 'texte_troue_select', 'texte_tableau'].includes(
-          type_question
-        ): {
-          const searchedVal = type_question == 'texte_tableau' ? '' : null
-          if (
-            this.quizInputType.length < choix_reponse.length ||
-            this.$helper.containsValue(this.quizInputType, searchedVal)
-          )
-            notAnswer = true
-          break
-        }
-
-        case type_question == 'texte_troue':
-          if (texte_base) {
-            const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-            let matchAll = texte_base.split(regex)
-
-            if (
-              this.quizInputType.length < matchAll.length - 1 ||
-              this.$helper.containsValue(this.quizInputType, '')
-            ) {
-              notAnswer = true
-            }
-          }
-          break
-        case type_question == 'association':
-          if (
-            this.quizAssociation &&
-            (Object.keys(this.quizAssociation).length <
-              Object.keys(solution).length ||
-              this.$helper.containsValue(
-                Object.values(this.quizAssociation),
-                ''
-              ))
-          ) {
-            notAnswer = true
-          }
-          break
-        case type_question == 'dragdrop':
-          if (this.quizDragDrop && Object.values(this.quizDragDrop)) {
-            for (
-              let index = 0;
-              index < Object.values(this.quizDragDrop).length;
-              index++
-            ) {
-              const element = Object.values(this.quizDragDrop)[index]
-              if (element.length >= 0) {
-                notAnswer = false
-              }
-            }
-          } else notAnswer = true
-          break
-      }
-
-      return notAnswer
-    },
-
-    /**
-     * @description To control whether or not the reset button is disabled
-     * @returns {Boolean} true if the quiz is not yet started, false the button is enable
-     */
-    quizIsNotStarted() {
-      const { type_question } = this.quizData
-      if (this.quizCompleted) {
-        return true
-      } else {
-        switch (true) {
-          case ['choix_unique', 'reponse_ouverte'].includes(type_question):
-            if (this.quizInputType) {
-              return true
-            }
-            break
-          case type_question == 'choix_mult':
-            if (this.quizInputType.length == 0) {
-              return true
-            }
-            break
-          case [
-            'dropdown',
-            'texte_troue_select',
-            'texte_tableau',
-            'texte_troue'
-          ].includes(type_question):
-            if (this.quizInputType.length == 0) {
-              return true
-            } else {
-              for (let index = 0; index < this.quizInputType.length; index++) {
-                const element = this.quizInputType[index]
-                if (element !== null || element == '') {
-                  return false
-                }
-              }
-              return true
-            }
-        }
-        return false
-      }
-    },
-    /**
-     * @description
-     * @returns {string} the componant of the quiz input
-     */
-    quizComponent() {
-      const { type_question } = this.quizData
-      let value
-      switch (type_question) {
-        case 'choix_unique':
-          value = 'app-comp-input-radio'
-          break
-        case 'choix_mult':
-          value = 'app-comp-input-check-box'
-          break
-        case 'dropdown':
-          value = 'app-comp-input-dropdown'
-          break
-        case 'texte_troue_select':
-          value = 'app-comp-input-text-to-fill-dropdown'
-          break
-        case 'reponse_ouverte':
-          value = 'app-comp-input-text-box'
-          break
-        case 'texte_tableau':
-          value = 'app-comp-input-text-table'
-          break
-        case 'texte_troue':
-          value = 'app-comp-input-text-to-fill'
-          break
-      }
-      return value
-    },
-    /**
-     * @description controls the showin of warning in the page when a prop is wrongly passed
-     */
-    errorQuizItems() {
-      let err = false
-      let errorList = [] //array for errors dectected
-
-      if (this.quizData) {
-        const {
-          type_question,
-          ennonce,
-          retroaction,
-          id,
-          choix_reponse,
-          texte_base,
-          solution
-        } = this.quizData
-        //pour les paramettre de quizData present pour tous les quiz
-        if (!id && !errorList.includes('id')) {
-          errorList.push('id')
-          console.warn(
-            '%c WARNING!>>> AppCompQuiz: Your quizData id is missing',
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-        }
-        if (!ennonce && !errorList.includes('ennonce')) {
-          errorList.push('ennonce')
-          console.warn(
-            '%c WARNING!>>> AppCompQuiz: Your quizData ennonce is missing',
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-        }
-        if (!retroaction && !errorList.includes('retroaction')) {
-          errorList.push('retroaction')
-          console.warn(
-            '%c WARNING!>>> AppCompQuiz: Your quizData retroaction is missing',
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-        }
-
-        let typeQuestionList = [
-          'choix_unique',
-          'choix_mult',
-          'dropdown',
-          'texte_troue_select',
-          'reponse_ouverte',
-          'texte_tableau',
-          'texte_troue',
-          'association',
-          'dragdrop'
-        ]
-        if (!type_question && !errorList.includes('type_question')) {
-          errorList.push('type_question')
-          console.warn(
-            '%c WARNING!>>> AppCompQuiz: Your quizData type_question is missing',
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-        } else if (!typeQuestionList.includes(type_question)) {
-          errorList.push(
-            "type_question n'est pas un des type suivant: 'choix_unique', 'choix_mult', 'dropdown', 'texte_troue_select', 'reponse_ouverte', 'texte_tableau', 'texte_troue', 'association' ou 'dragdrop'"
-          )
-          console.warn(
-            "%c WARNING!>>> AppCompQuiz: Your quizData type_question is not 'choix_unique', 'choix_mult', 'dropdown', 'texte_troue_select', 'reponse_ouverte', 'texte_tableau', 'texte_troue', 'association' or 'dragdrop'",
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-        } else {
-          //pour les paramettre de quizData present pour certains des quiz
-          switch (type_question) {
-            case 'choix_unique':
-              if (
-                solution &&
-                typeof solution !== 'string' &&
-                !errorList.includes('solution')
-              ) {
-                errorList.push('solution')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData solution is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              }
-              if (!choix_reponse && !errorList.includes('choix_reponse')) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (
-                !choix_reponse.length &&
-                !errorList.includes('choix_reponse')
-              ) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                choix_reponse.forEach((element) => {
-                  if (!element.id && !errorList.includes('choix_reponse id')) {
-                    errorList.push('choix_reponse id')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse id is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                  if (
-                    !element.value &&
-                    !errorList.includes('choix_reponse value')
-                  ) {
-                    errorList.push('choix_reponse value')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse value is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                })
-              }
-              break
-            case 'choix_mult':
-              if (
-                solution &&
-                !Array.isArray(solution) &&
-                !errorList.includes('solution')
-              ) {
-                errorList.push('solution')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData solution is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (solution) {
-                solution.forEach((element) => {
-                  if (
-                    typeof element !== 'string' &&
-                    !errorList.includes('solution')
-                  ) {
-                    errorList.push('solution')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData solution is not a string missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                })
-              }
-
-              if (!choix_reponse && !errorList.includes('choix_reponse')) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (
-                !choix_reponse.length &&
-                !errorList.includes('choix_reponse')
-              ) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is not an array',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                choix_reponse.forEach((element) => {
-                  if (!element.id && !errorList.includes('choix_reponse id')) {
-                    errorList.push('choix_reponse id')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse id is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                  if (
-                    !element.value &&
-                    !errorList.includes('choix_reponse value')
-                  ) {
-                    errorList.push('choix_reponse value')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse value is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                })
-              }
-              break
-            case 'dropdown':
-              if (
-                solution &&
-                !Array.isArray(solution) &&
-                !errorList.includes('solution')
-              ) {
-                errorList.push('solution')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData solution is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (solution) {
-                if (solution.length == choix_reponse.length) {
-                  solution.forEach((element) => {
-                    if (
-                      typeof element !== 'string' &&
-                      !errorList.includes('solution')
-                    ) {
-                      errorList.push('solution')
-                      console.warn(
-                        '%c WARNING!>>> AppCompQuiz: Your quizData solution is not a string',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-                  })
-                } else {
-                  errorList.push(
-                    'solution length does not match choix_reponse length'
-                  )
-                  console.warn(
-                    '%c WARNING!>>> AppCompQuiz: Your quizData solution length does not match your quizData choix_reponse length',
-                    'background: orange; color: white; display: block; margin:5px;'
-                  )
-                }
-              }
-
-              if (!choix_reponse && !errorList.includes('choix_reponse')) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (
-                !choix_reponse.length &&
-                !errorList.includes('choix_reponse')
-              ) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is not an array',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                choix_reponse.forEach((element) => {
-                  if (!element.id && !errorList.includes('choix_reponse id')) {
-                    errorList.push('choix_reponse id')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse id is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                  if (
-                    !element.ennonce &&
-                    !errorList.includes('choix_reponse ennonce')
-                  ) {
-                    errorList.push('choix_reponse ennonce')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse ennonce is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-
-                  if (
-                    !element.option &&
-                    !errorList.includes('choix_reponse option')
-                  ) {
-                    errorList.push('choix_reponse option')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse option is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  } else if (
-                    !element.option.length &&
-                    !errorList.includes('choix_reponse option')
-                  ) {
-                    errorList.push('choix_reponse option')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse option is not an array',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  } else {
-                    element.option.forEach((element2) => {
-                      if (
-                        typeof element2 !== 'string' &&
-                        !errorList.includes('choix_reponse option')
-                      ) {
-                        if (typeof element2 !== 'object') {
-                          errorList.push('choix_reponse option')
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse option is not an object',
-                            'background: orange; color: white; display: block; margin:5px;'
-                          )
-                        } else if (element2.value !== null) {
-                          errorList.push('choix_reponse option')
-                        }
-                      }
-                    })
-                  }
-                })
-              }
-
-              break
-            case 'texte_troue_select':
-              if (
-                solution &&
-                !Array.isArray(solution) &&
-                !errorList.includes('solution')
-              ) {
-                errorList.push('solution')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData solution is not an array',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (solution) {
-                if (choix_reponse) {
-                  if (solution.length == choix_reponse.length) {
-                    solution.forEach((element) => {
-                      if (
-                        typeof element !== 'object' &&
-                        !errorList.includes('solution')
-                      ) {
-                        errorList.push('solution')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData solution is not an array of object',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      }
-                    })
-                  } else {
-                    errorList.push(
-                      'solution length does not match choix_reponse length'
-                    )
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData solution length does not match your quizData choix_reponse length',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                }
-              }
-
-              if (
-                (!texte_base || typeof texte_base !== 'string') &&
-                !errorList.includes('texte_base')
-              ) {
-                errorList.push('texte_base')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData texte_base is not a string',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                if (solution) {
-                  const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-                  let textSplit = texte_base.split(regex)
-                  let textSplit2 = texte_base.match(regex)
-                  if (textSplit.length - 1 !== solution.length) {
-                    errorList.push(
-                      'amount of holes in texte_base does not match solution length'
-                    )
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: the amount of holes in quizData texte_base does not match quizData solution length',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  } else {
-                    for (let index = 0; index < choix_reponse.length; index++) {
-                      const element = Object.keys(choix_reponse[index])[0]
-                      const element2 = textSplit2[index].slice(2, -2)
-                      if (
-                        element !== element2 &&
-                        !errorList.includes(
-                          'choix_reponse keys and texte_base keys dont match'
-                        )
-                      ) {
-                        errorList.push(
-                          'choix_reponse keys and texte_base keys dont match'
-                        )
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: quizData choix_reponse keys and quizData texte_base keys dont match',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else if (
-                        !errorList.includes('solution') &&
-                        !errorList.includes(
-                          'choix_reponse keys and texte_base keys dont match'
-                        )
-                      ) {
-                        const element3 = Object.keys(solution[index])[0]
-                        if (
-                          element3 !== element2 &&
-                          !errorList.includes(
-                            'solution keys and texte_base keys dont match'
-                          )
-                        ) {
-                          errorList.push(
-                            'solution keys and texte_base keys dont match'
-                          )
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz:quizData solution keys and quizData texte_base keys dont match',
-                            'background: orange; color: white; display: block; margin:5px;'
-                          )
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-
-              if (!choix_reponse && !errorList.includes('choix_reponse')) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (
-                !choix_reponse.length &&
-                !errorList.includes('choix_reponse')
-              ) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is not an array',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                choix_reponse.forEach((element) => {
-                  if (
-                    !Object.values(element)[0] &&
-                    !errorList.includes('choix_reponse option')
-                  ) {
-                    errorList.push('choix_reponse option')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse option is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  } else if (
-                    !Object.values(element)[0].length &&
-                    !errorList.includes('choix_reponse option')
-                  ) {
-                    errorList.push('choix_reponse option')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse option is not an array',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  } else {
-                    Object.values(element)[0].forEach((element2) => {
-                      if (
-                        typeof element2 !== 'string' &&
-                        !errorList.includes('choix_reponse option')
-                      ) {
-                        if (typeof element2 !== 'object') {
-                          errorList.push('choix_reponse option')
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse option is not an array of strings or an array of objects',
-                            'background: orange; color: white; display: block; margin:5px;'
-                          )
-                        } else if (element2.value !== null) {
-                          errorList.push('choix_reponse option')
-                        }
-                      }
-                    })
-                  }
-                })
-              }
-
-              break
-            case 'reponse_ouverte':
-              if (choix_reponse !== null) {
-                errorList.push(
-                  'choix_reponse doit être mis a null pour un quiz de type reponse_ouverte'
-                )
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is must be null for reponse_ouverte',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              }
-              break
-            case 'texte_tableau':
-              if (
-                solution &&
-                !Array.isArray(solution) &&
-                !errorList.includes('solution')
-              ) {
-                errorList.push('solution')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData solution is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (solution) {
-                if (choix_reponse) {
-                  if (solution.length == choix_reponse.length) {
-                    solution.forEach((element) => {
-                      if (typeof element == 'object') {
-                        if (
-                          (!element.question_id ||
-                            typeof element.question_id !== 'string') &&
-                          !errorList.includes('solution question_id')
-                        ) {
-                          errorList.push('solution question_id')
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData solution element question_id is not a string',
-                            'background: orange; color: white; display: block; margin:5px;'
-                          )
-                        }
-                        if (
-                          (!element.reponse_value ||
-                            Array.isArray(element.reponse_value)) &&
-                          !errorList.includes('solution reponse_id')
-                        ) {
-                          element.reponse_value.forEach((element2) => {
-                            if (
-                              typeof element2 !== 'string' &&
-                              !errorList.includes('solution reponse_value')
-                            ) {
-                              errorList.push('solution reponse_value')
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData solution element reponse_value is not a string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          })
-                        } else if (
-                          !errorList.includes('solution reponse_value')
-                        ) {
-                          errorList.push('solution reponse_value')
-                        }
-                      } else if (!errorList.includes('solution')) {
-                        errorList.push('solution')
-                      }
-                    })
-                  } else {
-                    errorList.push(
-                      'solution length does not match choix_reponse length'
-                    )
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData solution length does not match your quizData choix_reponse length',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                }
-              }
-
-              if (!choix_reponse && !errorList.includes('choix_reponse')) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (
-                !choix_reponse.length &&
-                !errorList.includes('choix_reponse')
-              ) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is noty an array',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                choix_reponse.forEach((element) => {
-                  if (!element.id && !errorList.includes('choix_reponse id')) {
-                    errorList.push('choix_reponse id')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse element id is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                  if (
-                    !element.ennonce &&
-                    !errorList.includes('choix_reponse ennonce')
-                  ) {
-                    errorList.push('choix_reponse ennonce')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse element ennonce is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                })
-              }
-              break
-            case 'texte_troue':
-              if (
-                solution &&
-                !Array.isArray(solution) &&
-                !errorList.includes('solution')
-              ) {
-                errorList.push('solution')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData solution is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (solution) {
-                solution.forEach((element) => {
-                  if (typeof element == 'object') {
-                    let elementValue = Object.values(element)
-                    if (
-                      !elementValue.length == 1 &&
-                      !errorList.includes('une solution a trop de clef')
-                    ) {
-                      errorList.push('une solution a trop de clef')
-                      console.warn(
-                        '%c WARNING!>>> AppCompQuiz: Your quizData solution has too many keys',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    } else if (Array.isArray(elementValue[0])) {
-                      elementValue[0].forEach((element2) => {
-                        if (
-                          typeof element2 !== 'string' &&
-                          !errorList.includes('solution reponse_value')
-                        ) {
-                          errorList.push('solution reponse_value')
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData solution reponse_value is not a string or an array',
-                            'background: orange; color: white; display: block; margin:5px;'
-                          )
-                        }
-                      })
-                    } else if (!errorList.includes('solution reponse_value')) {
-                      errorList.push('solution reponse_value')
-                      console.warn(
-                        '%c WARNING!>>> AppCompQuiz: Your quizData solution reponse_value is not an array or a string',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-                  } else if (!errorList.includes('solution')) {
-                    errorList.push('solution')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData solution is not an object',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                })
-              }
-              if (
-                (!texte_base || typeof texte_base !== 'string') &&
-                !errorList.includes('texte_base')
-              ) {
-                errorList.push('texte_base')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData texte_base is not a string',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                if (solution) {
-                  const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-                  let textSplit = texte_base.split(regex)
-                  let textSplit2 = texte_base.match(regex)
-                  if (textSplit.length - 1 !== solution.length) {
-                    errorList.push(
-                      'amount of holes in texte_base does not match solution length'
-                    )
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: The amount of holes in texte_base does not match solution length',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  } else {
-                    for (let index = 0; index < solution.length; index++) {
-                      const element = Object.keys(solution[index])[0]
-                      const element2 = textSplit2[index].slice(2, -2)
-                      if (
-                        element !== element2 &&
-                        !errorList.includes(
-                          'solution keys and texte_base keys dont match'
-                        )
-                      ) {
-                        errorList.push(
-                          'solution keys and texte_base keys dont match'
-                        )
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: solution keys and texte_base keys dont match',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      }
-                    }
-                  }
-                }
-              }
-              break
-            case 'association':
-              if (
-                solution &&
-                typeof solution !== 'object' &&
-                !errorList.includes('solution')
-              ) {
-                errorList.push('solution')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData solution is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              }
-
-              if (!choix_reponse && !errorList.includes('choix_reponse')) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                if (
-                  choix_reponse.zone_depots &&
-                  choix_reponse.choix_deplaceable
-                ) {
-                  if (
-                    Array.isArray(choix_reponse.zone_depots) &&
-                    Array.isArray(choix_reponse.choix_deplaceable)
-                  ) {
-                    if (
-                      choix_reponse.zone_depots.length ==
-                      choix_reponse.choix_deplaceable.length
-                    ) {
-                      if (solution && typeof solution == 'object') {
-                        if (
-                          Object.keys(solution).length !==
-                            choix_reponse.zone_depots.length &&
-                          !errorList.includes(
-                            'choix_reponse zone_depot choix_deplaceable and solution'
-                          )
-                        ) {
-                          errorList.push(
-                            'choix_reponse zone_depot choix_deplaceable and solution'
-                          )
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot/choix_deplaceable and solution do not have matching size',
-                            'background: orange; color: white; display: block; margin:5px;'
-                          )
-                        } else {
-                          //-------------------solution vs zone_depot
-                          let listIdZone = []
-                          for (
-                            let index = 0;
-                            index < choix_reponse.zone_depots.length;
-                            index++
-                          ) {
-                            listIdZone.push(choix_reponse.zone_depots[index].id)
-                          }
-                          if (
-                            !this.isEqual(
-                              Object.keys(solution).sort(function (a, b) {
-                                return a - b
-                              }),
-                              listIdZone.sort(function (a, b) {
-                                return a - b
-                              })
-                            ) &&
-                            !errorList.includes(
-                              'choix_reponse zone_depot and solution'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse zone_depot and solution'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot and solution do not have matching keys',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //-------------------solution vs zone_depot end
-                          //-------------------solution vs choix_deplaceable
-                          let listIdChoice = []
-                          for (
-                            let index = 0;
-                            index < choix_reponse.choix_deplaceable.length;
-                            index++
-                          ) {
-                            listIdChoice.push(
-                              choix_reponse.choix_deplaceable[index].id
-                            )
-                          }
-                          if (
-                            !this.isEqual(
-                              Object.values(solution).sort(function (a, b) {
-                                return a - b
-                              }),
-                              listIdChoice.sort(function (a, b) {
-                                return a - b
-                              })
-                            ) &&
-                            !errorList.includes(
-                              'choix_reponse choix_deplaceable and solution'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse choix_deplaceable and solution'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable and solution do not have matching values',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //-------------------solution vs choix_deplaceable end
-                        }
-                      }
-                    } else if (
-                      !errorList.includes(
-                        'choix_reponse zone_depot choix_deplaceable'
-                      )
-                    ) {
-                      errorList.push(
-                        'choix_reponse zone_depot choix_deplaceable'
-                      )
-                      console.warn(
-                        '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot and your quizData choix_reponse choix_deplaceable are not the same lenght',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-
-                    //--test zone_depots
-                    for (
-                      let index = 0;
-                      index < choix_reponse.zone_depots.length;
-                      index++
-                    ) {
-                      const element = choix_reponse.zone_depots[index]
-
-                      if (
-                        !element.id &&
-                        !errorList.includes('choix_reponse zone_depot id')
-                      ) {
-                        errorList.push('choix_reponse zone_depot id')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot does not hace an id',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else if (
-                        element.id &&
-                        typeof element.id !== 'string' &&
-                        !errorList.includes('choix_reponse zone_depot id')
-                      ) {
-                        errorList.push('choix_reponse zone_depot id')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot id is not a string',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      }
-                      //contenu
-                      if (
-                        !element.contenu &&
-                        !errorList.includes('choix_reponse zone_depot contenu')
-                      ) {
-                        errorList.push('choix_reponse zone_depot contenu')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot does not have a contenu',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else {
-                        if (
-                          element.contenu &&
-                          typeof element.contenu == 'object'
-                        ) {
-                          //type
-                          if (element.contenu.type) {
-                            if (
-                              typeof element.contenu.type !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse zone_depot contenu type'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse zone_depot contenu type'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu type does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            } else if (
-                              !errorList.includes(
-                                'choix_reponse zone_depot contenu type'
-                              )
-                            ) {
-                              if (
-                                !(
-                                  element.contenu.type == 'img' ||
-                                  element.contenu.type == 'str'
-                                ) &&
-                                !errorList.includes(
-                                  'choix_reponse zone_depot contenu type valid'
-                                )
-                              ) {
-                                errorList.push(
-                                  'choix_reponse zone_depot contenu type valid'
-                                )
-                                console.warn(
-                                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu type is not valid. Must be img or str',
-                                  'background: orange; color: white; display: block; margin:5px;'
-                                )
-                              }
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse zone_depot contenu type'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse zone_depot contenu type'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu does not have a type',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //type end
-                          //affichage
-                          if (element.contenu.affichage) {
-                            if (
-                              typeof element.contenu.affichage !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse zone_depot contenu affichage'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse zone_depot contenu affichage'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu affichage does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse zone_depot contenu affichage'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse zone_depot contenu affichage'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu does not have an affichage',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //affichage end
-                          //alt
-                          if (element.contenu.alt) {
-                            if (
-                              typeof element.contenu.alt !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse zone_depot contenu alt'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse zone_depot contenu alt'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu alt does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse zone_depot contenu alt'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse zone_depot contenu alt'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu does not have an alt',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //alt end
-                        } else if (
-                          !errorList.includes(
-                            'choix_reponse zone_depot contenu'
-                          )
-                        ) {
-                          errorList.push('choix_reponse zone_depot contenu')
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu is not an object',
-                            'background:orange; color: white; display: block; margin:5px;'
-                          )
-                        }
-                      }
-                    }
-                    //--test zone_depots end
-                    //--test choix_deplaceable
-                    for (
-                      let index = 0;
-                      index < choix_reponse.choix_deplaceable.length;
-                      index++
-                    ) {
-                      const element = choix_reponse.choix_deplaceable[index]
-
-                      if (
-                        !element.id &&
-                        !errorList.includes(
-                          'choix_reponse choix_deplaceable id'
-                        )
-                      ) {
-                        errorList.push('choix_reponse choix_deplaceable id')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable does not hace an id',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else if (
-                        element.id &&
-                        typeof element.id !== 'string' &&
-                        !errorList.includes(
-                          'choix_reponse choix_deplaceable id'
-                        )
-                      ) {
-                        errorList.push('choix_reponse choix_deplaceable id')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable id is not a string',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      }
-                      //contenu
-                      if (
-                        !element.contenu &&
-                        !errorList.includes(
-                          'choix_reponse choix_deplaceable contenu'
-                        )
-                      ) {
-                        errorList.push(
-                          'choix_reponse choix_deplaceable contenu'
-                        )
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable does not have a contenu',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else {
-                        if (
-                          element.contenu &&
-                          typeof element.contenu == 'object'
-                        ) {
-                          //type
-                          if (element.contenu.type) {
-                            if (
-                              typeof element.contenu.type !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse choix_deplaceable contenu type'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse choix_deplaceable contenu type'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu type does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            } else if (
-                              !errorList.includes(
-                                'choix_reponse choix_deplaceable contenu type'
-                              )
-                            ) {
-                              if (
-                                !(
-                                  element.contenu.type == 'img' ||
-                                  element.contenu.type == 'str'
-                                ) &&
-                                !errorList.includes(
-                                  'choix_reponse choix_deplaceable contenu type valid'
-                                )
-                              ) {
-                                errorList.push(
-                                  'choix_reponse choix_deplaceable contenu type valid'
-                                )
-                                console.warn(
-                                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu type is not valid. Must be img or str',
-                                  'background: orange; color: white; display: block; margin:5px;'
-                                )
-                              }
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse choix_deplaceable contenu type'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse choix_deplaceable contenu type'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu does not have a type',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //type end
-                          //affichage
-                          if (element.contenu.affichage) {
-                            if (
-                              typeof element.contenu.affichage !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse choix_deplaceable contenu affichage'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse choix_deplaceable contenu affichage'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu affichage does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse choix_deplaceable contenu affichage'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse choix_deplaceable contenu affichage'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu does not have an affichage',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //affichage end
-                          //alt
-                          if (element.contenu.alt) {
-                            if (
-                              typeof element.contenu.alt !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse choix_deplaceable contenu alt'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse choix_deplaceable contenu alt'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu alt does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse choix_deplaceable contenu alt'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse choix_deplaceable contenu alt'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu does not have an alt',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //alt end
-                        } else if (
-                          !errorList.includes(
-                            'choix_reponse choix_deplaceable contenu'
-                          )
-                        ) {
-                          errorList.push(
-                            'choix_reponse choix_deplaceable contenu'
-                          )
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu is not an object',
-                            'background:orange; color: white; display: block; margin:5px;'
-                          )
-                        }
-                      }
-                    }
-
-                    //--test choix_deplaceable end
-                  } else {
-                    if (
-                      !Array.isArray(choix_reponse.zone_depots) &&
-                      !errorList.includes('choix_reponse zone_depot')
-                    ) {
-                      errorList.push('choix_reponse zone_depot')
-                      console.warn(
-                        '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot is not an array',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-
-                    if (
-                      !Array.isArray(choix_reponse.choix_deplaceable) &&
-                      !errorList.includes('choix_reponse choix_deplaceable')
-                    ) {
-                      errorList.push('choix_reponse choix_deplaceable')
-                      console.warn(
-                        '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable is not an array',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-                  }
-                } else {
-                  if (
-                    !choix_reponse.zone_depots &&
-                    !errorList.includes('choix_reponse zone_depot')
-                  ) {
-                    errorList.push('choix_reponse zone_depot')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-
-                  if (
-                    !choix_reponse.choix_deplaceable &&
-                    !errorList.includes('choix_reponse choix_deplaceable')
-                  ) {
-                    errorList.push('choix_reponse choix_deplaceable')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                }
-              }
-              break
-            case 'dragdrop':
-              if (
-                solution &&
-                typeof solution !== 'object' &&
-                !errorList.includes('solution')
-              ) {
-                errorList.push('solution')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData solution is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else if (solution && typeof solution == 'object') {
-                for (
-                  let index = 0;
-                  index < Object.values(solution).length;
-                  index++
-                ) {
-                  const element = Object.values(solution)[index]
-                  if (
-                    !Array.isArray(element) &&
-                    !errorList.includes('solution values type')
-                  ) {
-                    errorList.push('solution values type')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData solution values do not have only arrays',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                }
-              }
-
-              if (!choix_reponse && !errorList.includes('choix_reponse')) {
-                errorList.push('choix_reponse')
-                console.warn(
-                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse is missing',
-                  'background: orange; color: white; display: block; margin:5px;'
-                )
-              } else {
-                if (
-                  choix_reponse.zone_depots &&
-                  choix_reponse.choix_deplaceable
-                ) {
-                  if (
-                    Array.isArray(choix_reponse.zone_depots) &&
-                    Array.isArray(choix_reponse.choix_deplaceable)
-                  ) {
-                    if (solution && typeof solution == 'object') {
-                      if (
-                        Object.keys(solution).length !==
-                          choix_reponse.zone_depots.length &&
-                        !errorList.includes(
-                          'choix_reponse zone_depot choix_deplaceable and solution'
-                        )
-                      ) {
-                        errorList.push(
-                          'choix_reponse zone_depot choix_deplaceable and solution'
-                        )
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot/choix_deplaceable and solution do not have matching size',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else {
-                        //-------------------solution vs zone_depot
-                        let listIdZone = []
-                        for (
-                          let index = 0;
-                          index < choix_reponse.zone_depots.length;
-                          index++
-                        ) {
-                          listIdZone.push(choix_reponse.zone_depots[index].id)
-                        }
-                        if (
-                          !this.isEqual(
-                            Object.keys(solution).sort(function (a, b) {
-                              return a - b
-                            }),
-                            listIdZone.sort(function (a, b) {
-                              return a - b
-                            })
-                          ) &&
-                          !errorList.includes(
-                            'choix_reponse zone_depot and solution'
-                          )
-                        ) {
-                          errorList.push(
-                            'choix_reponse zone_depot and solution'
-                          )
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot and solution do not have matching keys',
-                            'background: orange; color: white; display: block; margin:5px;'
-                          )
-                        }
-                        //-------------------solution vs zone_depot end
-                      }
-                    }
-
-                    //--test zone_depots
-                    for (
-                      let index = 0;
-                      index < choix_reponse.zone_depots.length;
-                      index++
-                    ) {
-                      const element = choix_reponse.zone_depots[index]
-
-                      if (
-                        !element.id &&
-                        !errorList.includes('choix_reponse zone_depot id')
-                      ) {
-                        errorList.push('choix_reponse zone_depot id')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot does not hace an id',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else if (
-                        element.id &&
-                        typeof element.id !== 'string' &&
-                        !errorList.includes('choix_reponse zone_depot id')
-                      ) {
-                        errorList.push('choix_reponse zone_depot id')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot id is not a string',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      }
-                      //contenu
-                      if (
-                        !element.contenu &&
-                        !errorList.includes('choix_reponse zone_depot contenu')
-                      ) {
-                        errorList.push('choix_reponse zone_depot contenu')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot does not have a contenu',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else {
-                        if (
-                          element.contenu &&
-                          typeof element.contenu == 'object'
-                        ) {
-                          //type
-                          if (element.contenu.type) {
-                            if (
-                              typeof element.contenu.type !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse zone_depot contenu type'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse zone_depot contenu type'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu type does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            } else if (
-                              !errorList.includes(
-                                'choix_reponse zone_depot contenu type'
-                              )
-                            ) {
-                              if (
-                                !(
-                                  element.contenu.type == 'img' ||
-                                  element.contenu.type == 'str'
-                                ) &&
-                                !errorList.includes(
-                                  'choix_reponse zone_depot contenu type valid'
-                                )
-                              ) {
-                                errorList.push(
-                                  'choix_reponse zone_depot contenu type valid'
-                                )
-                                console.warn(
-                                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu type is not valid. Must be img or str',
-                                  'background: orange; color: white; display: block; margin:5px;'
-                                )
-                              }
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse zone_depot contenu type'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse zone_depot contenu type'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu does not have a type',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //type end
-                          //affichage
-                          if (element.contenu.affichage) {
-                            if (
-                              typeof element.contenu.affichage !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse zone_depot contenu affichage'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse zone_depot contenu affichage'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu affichage does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse zone_depot contenu affichage'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse zone_depot contenu affichage'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu does not have an affichage',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //affichage end
-                          //alt
-                          if (element.contenu.alt) {
-                            if (
-                              typeof element.contenu.alt !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse zone_depot contenu alt'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse zone_depot contenu alt'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu alt does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse zone_depot contenu alt'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse zone_depot contenu alt'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu does not have an alt',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //alt end
-                        } else if (
-                          !errorList.includes(
-                            'choix_reponse zone_depot contenu'
-                          )
-                        ) {
-                          errorList.push('choix_reponse zone_depot contenu')
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot contenu is not an object',
-                            'background:orange; color: white; display: block; margin:5px;'
-                          )
-                        }
-                      }
-                    }
-                    //--test zone_depots end
-                    //--test choix_deplaceable
-                    for (
-                      let index = 0;
-                      index < choix_reponse.choix_deplaceable.length;
-                      index++
-                    ) {
-                      const element = choix_reponse.choix_deplaceable[index]
-
-                      if (
-                        !element.id &&
-                        !errorList.includes(
-                          'choix_reponse choix_deplaceable id'
-                        )
-                      ) {
-                        errorList.push('choix_reponse choix_deplaceable id')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable does not hace an id',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else if (
-                        element.id &&
-                        typeof element.id !== 'string' &&
-                        !errorList.includes(
-                          'choix_reponse choix_deplaceable id'
-                        )
-                      ) {
-                        errorList.push('choix_reponse choix_deplaceable id')
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable id is not a string',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      }
-                      //repetition
-                      if (
-                        !element.repetition &&
-                        !errorList.includes(
-                          'choix_reponse choix_deplaceable repetition'
-                        )
-                      ) {
-                        errorList.push(
-                          'choix_reponse choix_deplaceable repetition'
-                        )
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable does not hace a repetition',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else if (
-                        element.repetition &&
-                        typeof element.repetition == 'number' &&
-                        !errorList.includes(
-                          'choix_reponse choix_deplaceable repetition'
-                        )
-                      ) {
-                        errorList.push(
-                          'choix_reponse choix_deplaceable repetition'
-                        )
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable repetition value is not an array',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      }
-
-                      //contenu
-                      if (
-                        !element.contenu &&
-                        !errorList.includes(
-                          'choix_reponse choix_deplaceable contenu'
-                        )
-                      ) {
-                        errorList.push(
-                          'choix_reponse choix_deplaceable contenu'
-                        )
-                        console.warn(
-                          '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable does not have a contenu',
-                          'background: orange; color: white; display: block; margin:5px;'
-                        )
-                      } else {
-                        if (
-                          element.contenu &&
-                          typeof element.contenu == 'object'
-                        ) {
-                          //type
-                          if (element.contenu.type) {
-                            if (
-                              typeof element.contenu.type !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse choix_deplaceable contenu type'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse choix_deplaceable contenu type'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu type does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            } else if (
-                              !errorList.includes(
-                                'choix_reponse choix_deplaceable contenu type'
-                              )
-                            ) {
-                              if (
-                                !(
-                                  element.contenu.type == 'img' ||
-                                  element.contenu.type == 'str'
-                                ) &&
-                                !errorList.includes(
-                                  'choix_reponse choix_deplaceable contenu type valid'
-                                )
-                              ) {
-                                errorList.push(
-                                  'choix_reponse choix_deplaceable contenu type valid'
-                                )
-                                console.warn(
-                                  '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu type is not valid. Must be img or str',
-                                  'background: orange; color: white; display: block; margin:5px;'
-                                )
-                              }
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse choix_deplaceable contenu type'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse choix_deplaceable contenu type'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu does not have a type',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //type end
-                          //affichage
-                          if (element.contenu.affichage) {
-                            if (
-                              typeof element.contenu.affichage !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse choix_deplaceable contenu affichage'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse choix_deplaceable contenu affichage'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu affichage does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse choix_deplaceable contenu affichage'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse choix_deplaceable contenu affichage'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu does not have an affichage',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //affichage end
-                          //alt
-                          if (element.contenu.alt) {
-                            if (
-                              typeof element.contenu.alt !== 'string' &&
-                              !errorList.includes(
-                                'choix_reponse choix_deplaceable contenu alt'
-                              )
-                            ) {
-                              errorList.push(
-                                'choix_reponse choix_deplaceable contenu alt'
-                              )
-                              console.warn(
-                                '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu alt does not string',
-                                'background: orange; color: white; display: block; margin:5px;'
-                              )
-                            }
-                          } else if (
-                            !errorList.includes(
-                              'choix_reponse choix_deplaceable contenu alt'
-                            )
-                          ) {
-                            errorList.push(
-                              'choix_reponse choix_deplaceable contenu alt'
-                            )
-                            console.warn(
-                              '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu does not have an alt',
-                              'background: orange; color: white; display: block; margin:5px;'
-                            )
-                          }
-                          //alt end
-                        } else if (
-                          !errorList.includes(
-                            'choix_reponse choix_deplaceable contenu'
-                          )
-                        ) {
-                          errorList.push(
-                            'choix_reponse choix_deplaceable contenu'
-                          )
-                          console.warn(
-                            '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable contenu is not an object',
-                            'background:orange; color: white; display: block; margin:5px;'
-                          )
-                        }
-                      }
-                    }
-
-                    //--test choix_deplaceable end
-                  } else {
-                    if (
-                      !Array.isArray(choix_reponse.zone_depots) &&
-                      !errorList.includes('choix_reponse zone_depot')
-                    ) {
-                      errorList.push('choix_reponse zone_depot')
-                      console.warn(
-                        '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot is not an array',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-
-                    if (
-                      !Array.isArray(choix_reponse.choix_deplaceable) &&
-                      !errorList.includes('choix_reponse choix_deplaceable')
-                    ) {
-                      errorList.push('choix_reponse choix_deplaceable')
-                      console.warn(
-                        '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable is not an array',
-                        'background: orange; color: white; display: block; margin:5px;'
-                      )
-                    }
-                  }
-                } else {
-                  if (
-                    !choix_reponse.zone_depots &&
-                    !errorList.includes('choix_reponse zone_depot')
-                  ) {
-                    errorList.push('choix_reponse zone_depot')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse zone_depot is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-
-                  if (
-                    !choix_reponse.choix_deplaceable &&
-                    !errorList.includes('choix_reponse choix_deplaceable')
-                  ) {
-                    errorList.push('choix_reponse choix_deplaceable')
-                    console.warn(
-                      '%c WARNING!>>> AppCompQuiz: Your quizData choix_reponse choix_deplaceable is missing',
-                      'background: orange; color: white; display: block; margin:5px;'
-                    )
-                  }
-                }
-              }
-          }
-        }
-      } else {
-        errorList.push('quizData manquant')
-        console.warn(
-          '%c WARNING!>>> AppCompQuiz: Your quizData is missing',
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-      }
-      // all item have required field.There is no error
-      if (!errorList.length) err = false
-      //return list of error
-      else err = errorList
-
-      return err
-    },
-
-    /**
-     * @description Instruction phrase to show for a quiz
-     */
-    instruction() {
-      let instructionStr = null
-      let localInstruction = null
-
-      const {
-        type_question,
-        solution,
-        choix_reponse,
-        texte_base,
-        consigne: customInstruction
-      } = this.quizData
-
-      //Custom instruction was set for the quiz
-      if (customInstruction) {
-        instructionStr = customInstruction
-      } else {
-        let isMulti = [
-          'texte_tableau',
-          'texte_troue',
-          'texte_troue_select'
-        ].includes(type_question)
-          ? true
-          : false
-
-        if (isMulti) {
-          //instruction to use
-          localInstruction =
-            solution !== null
-              ? `instruction.${type_question}`
-              : `instruction.${type_question}_no_validation`
-
-          // Check if the question as multi input fields
-          let hasMultiInput = []
-
-          // This is a texte_troue
-          if (texte_base) {
-            const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-            hasMultiInput = texte_base.match(regex)
-          }
-          // not a text_troue (texte_tableau or texte_troue_select)
-          else if (choix_reponse) hasMultiInput = choix_reponse
-
-          //Use mutli or single
-          hasMultiInput.length > 1
-            ? (localInstruction = `${localInstruction}.multi`)
-            : (localInstruction = `${localInstruction}.single`)
-        } else {
-          localInstruction =
-            solution !== null
-              ? `instruction.${type_question}`
-              : `instruction.${type_question}_no_validation`
-        }
-        instructionStr = this.$t(localInstruction)
-      }
-      return instructionStr
-    },
-
-    /**
-     * @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 return wiether user initiated input or not
-     */
-    inputIsEmpty() {
-      const input = this.quizInputType
-      // Input is empty if it is null or it content is bellow 1
-      return input == null || Object.keys(input).length < 1
-    },
-
-    /**
-     * @description Ennonce of the quiz - parse to add image if defined
-     */
-
-    quizEnnonce() {
-      const { ennonce } = this.quizData
-      let _ennonce = ennonce
-      return _ennonce
-    },
-    /**
-     * @description Allowed attemps to quiz  base of number of max attemps- should be unlimited if max attent is null
-     */
-
-    attemptsReached() {
-      let reached = this.quizData.max_essai
-
-      if (!reached) return false
-      else return this.totalAttempts >= reached
-    }
-  },
-  watch: {
-    /**
-     * @description disable solution
-     */
-    quizInputType: {
-      deep: true,
-      handler(newValue, oldValue) {
-        const { type_question } = this.quizData
-        switch (true) {
-          case ['choix_unique', 'reponse_ouverte'].includes(type_question):
-            if (newValue !== null && oldValue !== '') {
-              this.showSolution = false
-            }
-            break
-
-          case type_question === 'choix_mult':
-            if (newValue.length !== oldValue.length && oldValue.length !== 0) {
-              this.showSolution = false
-            }
-            break
-          case ['dropdown', 'texte_troue_select'].includes(type_question):
-            if (
-              this.showSolution == true &&
-              this.oldQuizValue !== null &&
-              this.oldQuizValue !== this.quizInputType
-            ) {
-              this.showSolution = false
-            }
-            //save the value with spread syntax to prevent copying a reference only
-            this.oldQuizValue = [...this.quizInputType]
-            break
-          case ['texte_tableau', 'texte_troue'].includes(type_question):
-            if (
-              this.showSolution == true &&
-              this.oldQuizValue !== null &&
-              this.oldQuizValue.length !== 0 &&
-              !this.isEqual(this.initQuizTable, newValue)
-            ) {
-              this.showSolution = false
-            }
-            this.oldQuizValue = [...this.quizInputType]
-            break
-        }
-      }
-    },
-    /**
-     * @description disable solution
-     */
-    quizAssociation: {
-      deep: true,
-      handler(newValue, oldValue) {
-        if (this.showSolution == true && Object.keys(oldValue).length !== 0) {
-          this.showSolution = false
-        }
-      }
-    },
-    /**
-     * @description disable solution
-     */
-    quisDragDrop: {
-      deep: true,
-      handler(newValue, oldValue) {
-        if (this.showSolution == true && Object.keys(oldValue).length !== 0) {
-          this.showSolution = false
-        }
-      }
-    },
-    getPageInteraction: {
-      //in development environment (localhost), don't wait for the axios call
-      // immediate: import.meta.env.DEV,
-      deep: true,
-      immediate: true,
-      handler() {
-        if (!this.getPageInteraction) return
-        this.getPreviousAnswers()
-      }
-    }
-  },
-  created() {},
-  beforeUnmount() {},
-  mounted() {},
-  methods: {
-    showNoAnswerPopup() {
-      this.$bus.$emit('quizNoAnswer')
-    },
-    /**
-     * @description this is called to validate de answers
-     * @param {Object} theAnswer
-     */
-    checkEntry(theAnswer) {
-      this.quizSubmit = false //re enables the ability to submit
-      if (this.quizCompleted == false) {
-        const { id, type_question, retroaction, solution } = this.quizData
-        if (!this.attemptsReached) {
-          this.totalAttempts++
-
-          if (theAnswer == null) {
-            this.showNoAnswerPopup()
-          } else {
-            let theSolution = solution
-            if (theSolution == null) {
-              //Create the popup with the content of the retrotaction neutre
-              this.retroType = 'neutral'
-              this.retroTitle = retroaction.retro_neutre.title
-              this.retroHtml = retroaction.retro_neutre.hypertext_1
-              this.showSolution = true
-              this.showRetro = true
-            } else {
-              let correctAnswer = false
-              switch (type_question) {
-                case 'choix_unique':
-                  correctAnswer = theAnswer[id] == theSolution
-
-                  break
-                case 'choix_mult':
-                  correctAnswer = this.isEqual(
-                    theAnswer[id].sort(function (a, b) {
-                      return a - b
-                    }),
-                    theSolution.sort(function (a, b) {
-                      return a - b
-                    })
-                  )
-                  break
-                case 'dropdown': {
-                  let listQuizSelected = theAnswer[id]
-                  correctAnswer = this.compareSelectedAnswers(
-                    listQuizSelected,
-                    theSolution
-                  )
-                  break
-                }
-                case 'texte_troue_select': {
-                  let listQuizSelectedText = theAnswer[id]
-                  correctAnswer = this.compareSelectedTextToFillAnswers(
-                    listQuizSelectedText,
-                    theSolution
-                  )
-                  break
-                }
-                case 'reponse_ouverte':
-                  correctAnswer = theAnswer[id] == theSolution
-
-                  break
-                case 'texte_tableau': {
-                  let listQuizTextTable = theAnswer[id]
-                  correctAnswer = this.compareTextAnswers(
-                    listQuizTextTable,
-                    theSolution
-                  )
-                  break
-                }
-                case 'texte_troue': {
-                  let listQuizTextFill = theAnswer[id]
-                  correctAnswer = this.compareTextAnswers2(
-                    listQuizTextFill,
-                    theSolution
-                  )
-                  break
-                }
-              }
-              if (correctAnswer) {
-                this.retroTitle = retroaction.retro_positive.title
-                this.retroHtml = retroaction.retro_positive.hypertext_1
-                this.retroType = 'positive'
-                this.showSolution = true
-                this.showRetro = true
-              } else {
-                this.retroTitle = retroaction.retro_negative.title
-                this.retroHtml = retroaction.retro_negative.hypertext_1
-                this.retroType = 'negative'
-                this.showSolution = true
-                this.showRetro = true
-
-                if (this.attemptsReached) {
-                  this.setQuizCompleted()
-                  // this.createPopUp(
-                  //   {
-                  //     type: 'popup-retro',
-                  //     value: {
-                  //       title: 'retroaction',
-                  //       text_1: this.$t('message.no_attempts')
-                  //     }
-                  //   },
-                  //   'no_attempts'
-                  // )
-                }
-              }
-            }
-          }
-
-          this.saveAnswer(theAnswer)
-        } else {
-          //this should be unnecessary, it's just a failsafe.
-          // this.setQuizCompleted()
-          // this.createPopUp(
-          //   {
-          //     type: 'popup-retro',
-          //     value: {
-          //       title: 'retroaction',
-          //       text_1: this.$t('message.no_attempts')
-          //     }
-          //   },
-          //   'no_attempts'
-          // )
-        }
-      } /**/
-    },
-
-    /**
-     * @description creates a pop up
-     * @param {object} popUpData data for the pop up
-     * @fires open-popup to the AppBaseModule.vue
-     */
-    createPopUp(popUpData, type) {
-      this.$bus.$emit('open-popup', popUpData)
-      this.$bus.$emit('retro-type', type)
-    },
-
-    /**
-     * @description disables the quiz
-     * @todo must be expanded for what happens when the quiz is disabled
-     */
-    setQuizCompleted() {
-      this.quizCompleted = true
-    },
-    /**
-     * @description compares 2 array
-     * @param {Array} array1
-     * @param {Array} array2
-     * @returns {Boolean}
-     */
-    isEqual(array1, array2) {
-      // if length is not equal
-      if (array1.length != array2.length) {
-        return false
-      } else {
-        // comapring each element of array
-        for (let i = 0; i < array1.length; i++) {
-          if (array1[i] != array2[i]) {
-            return false
-          }
-        }
-        return true
-      }
-    },
-    /**
-     * @description used by the dropdown quiz
-     * @param {Array} answers what the user has answered
-     * @param {Array} solution the correct choices
-     * @returns {Boolean}
-     */
-    compareSelectedAnswers(answers, solution) {
-      for (let index = 0; index < answers.length; index++) {
-        const elementAnswers = answers[index]
-        const elementSolution = solution[index]
-        if (elementAnswers.reponse_id !== elementSolution) {
-          return false
-        }
-      }
-      return true
-    },
-
-    /**
-     * @description used by the texte_troue_select quiz
-     * @param {Array} answers what the user has answered
-     * @param {Array} solution the correct choices
-     * @returns {Boolean}
-     */
-    compareSelectedTextToFillAnswers(answers, solution) {
-      for (let index = 0; index < answers.length; index++) {
-        const elementAnswers = answers[index]
-        const elementSolution = Object.values(solution[index])[0]
-        if (elementAnswers.reponse_id !== elementSolution) {
-          return false
-        }
-      }
-      return true
-    },
-
-    /**
-     * @description used by the texte_tableau quiz and texte_troue quiz
-     * @param {Array} answers what the user has answered
-     * @param {Array} solution the correct choices
-     * @returns {Boolean}
-     */
-    compareTextAnswers(answers, solution) {
-      for (let index = 0; index < answers.length; index++) {
-        const elementAnswers = answers[index]
-        const elementSolution = solution[index]
-        if (
-          !this.$helper.containsValue(
-            elementSolution.reponse_value,
-            elementAnswers.reponse
-          )
-        ) {
-          return false
-        }
-      }
-      return true
-    },
-
-    /**
-     * @description used by the texte_tableau quiz and texte_troue quiz
-     * @param {Array} answers what the user has answered
-     * @param {Array} solution the correct choices
-     * @returns {Boolean}
-     */
-    compareTextAnswers2(answers, solution) {
-      for (let index = 0; index < answers.length; index++) {
-        const elementAnswers = answers[index]
-        const elementSolution = solution[index]
-        if (
-          !this.$helper.containsValue(
-            Object.values(elementSolution)[0],
-            elementAnswers.reponse
-          )
-        ) {
-          return false
-        }
-      }
-      return true
-    },
-
-    /**
-     * @description used by the association quiz
-     * @param {Object} answers what the user has answered
-     * @param {Object} solution the correct choices
-     * @returns {Boolean}
-     */
-    compareObjectAnswers(answers, solution) {
-      let answersKey = Object.keys(answers)
-      for (let index = 0; index < answersKey.length; index++) {
-        const elementAnswers = answers[answersKey[index]]
-        const elementSolution = solution[answersKey[index]]
-        if (elementAnswers !== elementSolution) {
-          return false
-        }
-      }
-      return true
-    },
-
-    /**
-     * @description used by the dragdrop quiz
-     * @param {Object} answers what the user has answered
-     * @param {Object} solution the correct choices
-     * @returns {Boolean}
-     */
-    compareObjectAnswers2(answers, solution) {
-      let answersKey = Object.keys(answers)
-      for (let index = 0; index < answersKey.length; index++) {
-        const elementAnswers = answers[answersKey[index]]
-        const elementSolution = solution[answersKey[index]]
-        if (!this.isEqual(elementAnswers, elementSolution)) {
-          return false
-        }
-      }
-      return true
-    },
-
-    /**
-     * @description re enables the quiz
-     */
-    resetQuiz() {
-      this.totalAttempts = 0
-      //removes the css class
-      this.showSolution = false
-      this.quizCompleted = false
-      //empty the inputs
-      this.quizInputType = this.defaultInputType
-      // this.quizInputType = []
-
-      if (this.quizData.type_question == 'association') {
-        let listZone = this.quizData.choix_reponse.zone_depots
-        for (let index = 0; index < listZone.length; index++) {
-          const element = listZone[index].id
-          this.quizAssociation[element] = ''
-        }
-      }
-      if (this.quizData.type_question == 'dragdrop') {
-        let listZone = this.quizData.choix_reponse.zone_depots
-        for (let index = 0; index < listZone.length; index++) {
-          const element = listZone[index].id
-          this.quizDragDrop[element] = []
-        }
-      }
-
-      if (this.quizData.type_question == 'texte_tableau') {
-        for (
-          let index = 0;
-          index < this.quizData.choix_reponse.length;
-          index++
-        ) {
-          this.quizInputType.push('')
-        }
-      }
-      if (this.quizData.type_question == 'texte_troue') {
-        const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-        let matchAll = this.quizData.texte_base.split(regex)
-        for (let index = 0; index < matchAll.length - 1; index++) {
-          this.quizInputType.push('')
-        }
-      }
-    },
-
-    /**
-     * @description saves the submitted answer in the store
-     * @param {Object} theAnswer
-     * deprecated param {Boolean} isCounted inticates in wich array it will ba saved, true = quizAnswers, false = pollAnswers
-     */
-    saveAnswer(theAnswer) {
-      //Sould only save (add/update) the current quizAnswer (answer and total attempts) in UserInteraction for related page
-
-      if (
-        this.userInteraction &&
-        this.userInteraction.quizAnswers &&
-        this.userInteraction.quizAnswers[this.quizData.id]
-      ) {
-        this.userInteraction.quizAnswers[this.quizData.id] = {
-          value: theAnswer[this.quizData.id],
-          total_attempts: this.totalAttempts
-        }
-      } else {
-        theAnswer.total_attempts = this.totalAttempts
-        this.userInteraction.quizAnswers = {
-          ...this.userInteraction.quizAnswers,
-          [this.quizData.id]: {
-            value: theAnswer[this.quizData.id],
-            total_attempts: this.totalAttempts
-          }
-        }
-      }
-    },
-    /**
-     * @description
-     * @param {object} value
-     */
-    inputChange(value) {
-      this.quizInputType = value
-    },
-    /**
-     * @description gets the answers in the scorm if they exists
-     */
-    getPreviousAnswers() {
-      const { id, type_question } = this.quizData
-      if (
-        this.userInteraction &&
-        this.userInteraction.quizAnswers &&
-        this.userInteraction.quizAnswers[id]
-      ) {
-        const { value: theValue, total_attempts } =
-          this.userInteraction.quizAnswers[id]
-        this.totalAttempts = total_attempts
-        if (this.quizLimitActive) this.quizCompleted = true //Signal that quiz has been completed
-
-        switch (true) {
-          case ['choix_unique', 'choix_mult', 'reponse_ouverte'].includes(
-            type_question
-          ):
-            this.quizInputType = theValue
-            break
-
-          case [
-            'dropdown',
-            'texte_troue_select',
-            'texte_tableau',
-            'texte_troue'
-          ].includes(type_question): {
-            let theDropdownValues = []
-
-            for (
-              let singleValuePos = 0;
-              singleValuePos < theValue.length;
-              singleValuePos++
-            ) {
-              const singleValue = ['texte_troue_select', 'dropdown'].includes(
-                type_question
-              )
-                ? theValue[singleValuePos].reponse_id
-                : theValue[singleValuePos].reponse
-
-              theDropdownValues.push(singleValue)
-            }
-
-            this.quizInputType = theDropdownValues
-            break
-          }
-        }
-        this.showSolution = true
-      }
-    },
-    /**
-     * @description check if this question is correct
-     * @fires quiz-submit to AppCompQuiz.vue
-     */
-    validateAnswers() {
-      let theAnswer = {}
-      const { type_question, id, choix_reponse, texte_base } = this.quizData
-
-      switch (true) {
-        case type_question == 'choix_unique': {
-          let simpleInput = this.quizInputType
-          if (simpleInput) {
-            theAnswer = {
-              [id]: simpleInput
-            }
-          } else {
-            //did not answered
-            theAnswer = null
-          }
-
-          break
-        }
-
-        case ['choix_mult', 'reponse_ouverte'].includes(type_question): {
-          let listInput = this.quizInputType
-          if (listInput.length > 0) {
-            theAnswer = {
-              [id]: listInput
-            }
-          } else {
-            //did not answered
-            theAnswer = null
-          }
-
-          break
-        }
-
-        case type_question == 'dropdown': {
-          let listQuizSelected = this.quizInputType
-
-          if (
-            listQuizSelected.length &&
-            !this.$helper.containsValue(listQuizSelected, null)
-          ) {
-            let listQuizSelectedConvert = []
-            for (let index = 0; index < choix_reponse.length; index++) {
-              const element = choix_reponse[index]
-
-              listQuizSelectedConvert.push({
-                question_id: element.id,
-                reponse_id: listQuizSelected[index]
-              })
-            }
-            theAnswer = {
-              [id]: listQuizSelectedConvert
-            }
-          } else {
-            //did not answered
-            theAnswer = null
-          }
-          break
-        }
-
-        case type_question == 'texte_troue_select': {
-          const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-          let matchAll = texte_base.split(regex)
-          let listQuizSelectedText = this.quizInputType
-          if (
-            listQuizSelectedText.length == matchAll.length - 1 &&
-            !this.$helper.containsValue(listQuizSelectedText, null)
-          ) {
-            let listQuizSelectedTextConvert = []
-            for (let index = 0; index < listQuizSelectedText.length; index++) {
-              listQuizSelectedTextConvert.push({
-                question_id: index,
-                reponse_id: listQuizSelectedText[index]
-              })
-            }
-            theAnswer = {
-              [id]: listQuizSelectedTextConvert
-            }
-          } else {
-            //did not answered
-            theAnswer = null
-          }
-          break
-        }
-
-        case type_question == 'texte_tableau': {
-          let listInputTextTable = this.quizInputType
-
-          if (
-            listInputTextTable.length == choix_reponse.length &&
-            !this.$helper.containsValue(listInputTextTable, null) &&
-            !this.$helper.containsValue(listInputTextTable, '')
-          ) {
-            let listInputTextTableConvert = []
-            for (let index = 0; index < choix_reponse.length; index++) {
-              const element = choix_reponse[index]
-              listInputTextTableConvert.push({
-                question_id: element.id,
-                reponse: listInputTextTable[index]
-              })
-            }
-            theAnswer = {
-              [id]: listInputTextTableConvert
-            }
-          } else {
-            //did not answered
-            theAnswer = null
-          }
-          break
-        }
-
-        case type_question == 'texte_troue': {
-          const regex = /\$%\S*%\$/g // regex pattern to match exp: $%number%$
-          let matchAll = texte_base.split(regex)
-          let listInputTextFill = this.quizInputType
-
-          if (
-            listInputTextFill.length == matchAll.length - 1 &&
-            !this.$helper.containsValue(listInputTextFill, null) &&
-            !this.$helper.containsValue(listInputTextFill, '')
-          ) {
-            let listInputTextFillConvert = []
-            for (let index = 0; index < listInputTextFill.length; index++) {
-              listInputTextFillConvert.push({
-                question_id: index,
-                reponse: listInputTextFill[index]
-              })
-            }
-            theAnswer = {
-              [id]: listInputTextFillConvert
-            }
-          } else {
-            //did not answered
-            theAnswer = null
-          }
-          break
-        }
-      }
-      this.checkEntry(theAnswer)
-    }
-  }
-}
-</script>
-<style lang="scss">
-.custom-control {
-  z-index: 0;
-}
-</style>