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

package/src/components/AppCompQuiz.vue

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