fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppCompQuizRecall.vue

@@ -1,350 +1,355 @@
-<!--
- @ Description: This component is used to display a quiz and its answer from a previous page if it has been completed by the user. The only quiz type supported is open answer (textarea) and the quiz must be in the same lesson.
- @ What it does: Retrieve the quizData specific to an activity ID and pageID. Then, retrieve the answers previously saved by the user to this quiz. After, create an html element including title and conditional content. If the answer have been previously saved, a specific hypertext, the question and the answer (disabled textarea) are displayed. If the answer have not been saved, another hypertext is displayed.
- @How to use: in a page call <app-comp-quiz-recall :quiz-recall-data="defineDQuizRecallData">
- ** where "defineDQuizRecallData" refers to data object of quiz to pass to component
- ** data object should containt following attributes: quizId,activityId,pageId,hypertext_done',hypertext_undone,title,titletag
--->
-<template>
-  <section v-if="quizRecallData" class="quizRecall">
-    <!--Optionnal title, out of quiz-answer-conditionning, default tag H4, but can be change by user-->
-    <!--Show skeleton while app data is not ready-->
-    <template v-if="!isReady">
-      <app-base-skeleton :skeleton-text="''" :skeleton-type="`quiz-recall`" />
-    </template>
-    <!--Show app data when ready-->
-    <template v-else>
-      <component
-        :is="quizRecall.titletag"
-        v-if="quizRecall.title"
-        class="quizRecall-title"
-      >
-        {{ quizRecall.title }}
-      </component>
-      <!--Quiz answer conditionning-->
-      <app-base-error-display
-        v-if="hasError.length"
-        :error-group="'component'"
-        :error-title="`ERREUR: COMPOSANT QUIZ RECALL`"
-        :errors-list="hasError"
-      ></app-base-error-display>
-      <template v-else>
-        <template v-if="quizRecall.done == true">
-          <div
-            v-if="quizRecall.hypertext_done"
-            class="quizRecall-text-done"
-            v-html="quizRecall.hypertext_done"
-          ></div>
-          <div class="quizRecall-ennonce" v-html="quizRecall.ennonce"></div>
-
-          <textarea
-            :id="`quizRecall-answer-${quizRecallData.quizId}`"
-            v-model="quizRecall.answer"
-            disabled
-            class="form-control"
-          ></textarea>
-        </template>
-        <template v-if="quizRecall.done == false">
-          <div
-            v-if="quizRecall.hypertext_undone"
-            class="quizRecall-text-undone"
-            v-html="quizRecall.hypertext_undone"
-          ></div>
-        </template>
-      </template>
-    </template>
-  </section>
-</template>
-
-<script>
-//Recall mixins has the necessary datas and functions to give back quizRecall statu
-import { mapState } from 'pinia'
-import { useAppStore } from '../module/stores/appStore'
-
-export default {
-  name: 'AppCompQuizRecall',
-  props: {
-    quizRecallData: { type: Object, required: true } //{activityId,pageId,hypertext_done,hypertext_undone,title, titletag}
-  },
-  data() {
-    return {
-      quizRecall: {
-        done: false,
-        answer: '',
-        ennonce: '',
-        title: '',
-        titletag: 'h4',
-        hypertext_done: `<p>${this.$t('message.recall_done')}</p>` /*String traduite par défaut*/,
-        hypertext_undone: `<p>${this.$t(
-          'message.recall_undone'
-        )}</p>` /*String traduite par défaut*/
-      },
-      hasError: [],
-      quizData: null,
-      isReady: false //Used to display skeleton while app data is not ready
-    }
-  },
-  computed: {
-    ...mapState(useAppStore, [
-      'getAllCompleted',
-      'getUserInteraction',
-      'getPageInteraction',
-      'getAppStatus',
-      'getPageData'
-    ])
-  },
-
-  watch: {
-    //Watch for user interaction change to get quizRecall answer
-    getUserInteraction: {
-      async handler(newValue) {
-        if (!this.getUserInteraction) return
-
-        const { activityId, pageId } = this.quizRecallData
-        const interaction = this.getPageInteraction(
-          activityId,
-          pageId
-        ).userInteraction
-
-        if (!interaction) return
-        //Get quizRecall answer
-        if (this.quizRecallData && this.quizData) {
-          await this.getQuizRecallAnswer(interaction)
-        } else {
-          this.quizRecall.done == false
-        }
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  created() {
-    //Validate quizRecall data
-    //(no validation to the quiz, only to the new datas)
-    if (import.meta.env.DEV) {
-      this.validateQuizRecallData(this.quizRecallData)
-    }
-    const { activityId, pageId } = this.quizRecallData
-    //Get quizData and validate the quiz type
-    if (activityId && pageId) {
-      this.getQuizData(activityId, pageId)
-    }
-  },
-  methods: {
-    /**
-     * @description Finds a reponse_ouverte quiz data with specified ID
-     * @param {Object} searchObject Object that will be iterated over to find the quiz data (The page "data" object)
-     * @param {String} quizID ID of the quiz we are looking for
-     */
-    findQuizdataObject(searchObject, quizID) {
-      for (let property in searchObject) {
-        //Should only check for not null poperties
-        if (!searchObject[property]) continue
-
-        // Should only check for Object or Array property
-        if (
-          searchObject[property].constructor !== Object &&
-          searchObject[property].constructor !== Array
-        )
-          continue
-
-        if (
-          searchObject[property].constructor == Array &&
-          searchObject[property][0].constructor !== Object
-        )
-          continue
-
-        // Convert if it not an Array but an Objet
-        const searchArray =
-          searchObject[property].constructor === Object
-            ? [searchObject[property]]
-            : searchObject[property]
-        //Only Search for quiz:
-        //Search Array is a list of quiz if one of its element has at least the property 'type_question'
-        return searchArray[0]['type_question']
-          ? searchArray.find(
-              (e) => e.id === quizID && e.type_question === 'reponse_ouverte'
-            )
-          : null
-      }
-    },
-    //Get datas from the original open answer quiz
-    getQuizData(activityId, pageId) {
-      if (pageId && activityId) {
-        let pageData = this.getPageData(activityId, pageId)
-
-        if (pageData) {
-          this.quizData = this.findQuizdataObject(
-            pageData,
-            this.quizRecallData.quizId
-          )
-
-          //Warn that the specified quiz could not be found
-          if (!this.quizData) {
-            let msgErr = `Aucun quiz avec id '${this.quizRecallData.quizId}' pour la ${pageId} de ${activityId}`
-            console.warn(
-              `%c WARNING!>>> Quiz Recall: Unable to find a quiz with type_question 'reponse_ouverte' and id '${this.quizRecallData.quizId}' in ${pageId} of ${activityId}`,
-              'background: orange; color: white; display: block; margin:5px;'
-            )
-            this.hasError.push(msgErr)
-          }
-        } else {
-          this.quizRecall.done == false
-          let msgErr = `Aucun quiz avec id '${this.quizRecallData.quizId}' pour la ${pageId} de ${activityId}`
-          console.warn(
-            `%c WARNING!>>> AppCompQuizRecall : QuizData ActivityID and PageID combinaison is invalid.`,
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-          this.hasError.push(msgErr)
-        }
-      } else {
-        this.quizRecall.done == false
-      }
-    },
-    //Get datas from quizRecallData and userData and add them to quizRecall object
-    async getQuizRecallAnswer(userData) {
-      await this.$nextTick() //wait for the DOM to update
-      const { quizId, hypertext_done, hypertext_undone, title, titletag } =
-        this.quizRecallData
-
-      //Add hypertext_done and undone to quizRecall
-      if (hypertext_done) {
-        this.quizRecall.hypertext_done = hypertext_done
-      }
-      if (hypertext_undone) {
-        this.quizRecall.hypertext_undone = hypertext_undone
-      }
-      //Add the title if it exists
-      if (title) {
-        this.quizRecall.title = title
-        //Modify le titletag
-        if (titletag) {
-          let validator = this.validateTitleTag(titletag)
-          if (validator) {
-            this.quizRecall.titletag = titletag
-          }
-        }
-      }
-      //Get the quiz answers from userData
-      const answers = userData.quizAnswers || {}
-      let quizAnswer = answers[quizId] || null
-
-      //If quiz answer exists in userData, quizRecall done is true and add the quiz answer to quizRecall
-      quizAnswer
-        ? (this.quizRecall.done = true)
-        : (this.quizRecall.done = false)
-
-      if (quizAnswer) {
-        this.quizRecall.answer = quizAnswer.value[0].filled || ''
-        this.quizRecall.ennonce = this.quizData.ennonce
-      }
-      this.quizRecall
-      this.isReady = true //Set isReady to true to display the component
-    },
-
-    //Validate quizRecallData
-    /*Validate if the required properties are present in the object and that there is not invalid properties */
-    validateQuizRecallData(value) {
-      let requiredProperties = [
-        'quizId',
-        'activityId',
-        'pageId',
-        'hypertext_done',
-        'hypertext_undone'
-      ]
-      let optionalProperties = ['title', 'titletag']
-      let allProperties = requiredProperties.concat(optionalProperties)
-
-      //Verify if the properties are valid
-      let recallDataProperties = Object.keys(value)
-      let wrongProperties = []
-      let missingRequired = []
-
-      //Get all the invalids properties from recallQuizData
-      /*Add element from target array that are NOT in arr to the wrongArray*/
-      let checkerWrong = (arr, target, wrongArray) =>
-        target.every((v) => {
-          if (arr.includes(v)) {
-            return true
-          } else {
-            wrongArray.push(v)
-            return true
-          }
-        })
-      //Get all the required properties that are missing from recallQuizData
-      /*Add element from the arr that are NOT in target arr to the missingArray*/
-
-      let checkerMissing = (arr, target, missingArray) =>
-        arr.every((v) => {
-          if (target.includes(v)) {
-            return true
-          } else {
-            missingArray.push(v)
-            return true
-          }
-        })
-
-      checkerWrong(allProperties, recallDataProperties, wrongProperties)
-      checkerMissing(requiredProperties, recallDataProperties, missingRequired)
-
-      //Validate if all properties in quizRecallData are valid
-      if (wrongProperties.length > 0) {
-        let msgErr = `QuizRecallData ${wrongProperties} invalid`
-        console.warn(
-          `%c WARNING!>>> AppCompQuizRecall : ${msgErr}. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-        this.hasError.push(msgErr)
-      }
-      //Validate if all required properties are present in quizRecallData
-      if (missingRequired.length > 0) {
-        let msgErr = `QuizRecallData missing required ${missingRequired} property`
-        console.warn(
-          `%c WARNING!>>>  AppCompQuizRecall : ${msgErr}. Required properties: activityId and pageId. Optional properties:  title, titletag, hypertext_done and hypertext_undone.`,
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-        this.hasError.push(msgErr)
-      }
-    },
-    /*Get a title tag (string). Return true if the tag is valid and false is it's not*/
-
-    validateTitleTag(value) {
-      let tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span']
-      let lowerValue = value.toLowerCase()
-      if (tags && value && tags.find((element) => element == lowerValue))
-        return true
-      else {
-        let msgErr = `Your quizRecallData titletag is not valid`
-        console.warn(
-          '%c WARNING!>>> AppCompQuizRecall : Your quizRecallData titletag is not valid. You can use h1,h2,h3,h4,h5,h6,p,or span',
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-        this.hasError.push(msgErr)
-        return false
-      }
-    }
-  }
-}
-</script>
-
-<style>
-.skeleton {
-  height: 20px;
-  width: 200px;
-  background-color: #ccc;
-  border-radius: 4px;
-  animation: pulse 1.5s infinite ease-in-out;
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.4;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>
+<!--
+ @ Description: This component is used to display a quiz and its answer from a previous page if it has been completed by the user. The only quiz type supported is open answer (textarea) and the quiz must be in the same lesson.
+ @ What it does: Retrieve the quizData specific to an activity ID and pageID. Then, retrieve the answers previously saved by the user to this quiz. After, create an html element including title and conditional content. If the answer have been previously saved, a specific hypertext, the question and the answer (disabled textarea) are displayed. If the answer have not been saved, another hypertext is displayed.
+ @How to use: in a page call <app-comp-quiz-recall :quiz-recall-data="defineDQuizRecallData">
+ ** where "defineDQuizRecallData" refers to data object of quiz to pass to component
+ ** data object should containt following attributes: quizId,activityId,pageId,hypertext_done',hypertext_undone,title,titletag
+-->
+<template>
+  <section v-if="quizRecallData" class="quizRecall">
+    <!--Optionnal title, out of quiz-answer-conditionning, default tag H4, but can be change by user-->
+    <!--Show skeleton while app data is not ready-->
+    <template v-if="!isReady">
+      <app-base-skeleton :skeleton-text="''" :skeleton-type="`quiz-recall`" />
+    </template>
+    <!--Show app data when ready-->
+    <template v-else>
+      <component
+        :is="quizRecall.titletag"
+        v-if="quizRecall.title"
+        class="quizRecall-title"
+      >
+        {{ quizRecall.title }}
+      </component>
+      <!--Quiz answer conditionning-->
+      <app-base-error-display
+        v-if="hasError.length"
+        :error-group="'component'"
+        :error-title="`ERREUR: COMPOSANT QUIZ RECALL`"
+        :errors-list="hasError"
+      ></app-base-error-display>
+      <template v-else>
+        <template v-if="quizRecall.done == true">
+          <div
+            v-if="quizRecall.hypertext_done"
+            class="quizRecall-text-done"
+            v-html="quizRecall.hypertext_done"
+          ></div>
+          <div class="quizRecall-ennonce" v-html="quizRecall.ennonce"></div>
+
+          <textarea
+            :id="`quizRecall-answer-${quizRecallData.quizId}`"
+            v-model="quizRecall.answer"
+            disabled
+            class="form-control"
+          ></textarea>
+        </template>
+        <template v-if="quizRecall.done == false">
+          <div
+            v-if="quizRecall.hypertext_undone"
+            class="quizRecall-text-undone"
+            v-html="quizRecall.hypertext_undone"
+          ></div>
+        </template>
+      </template>
+    </template>
+  </section>
+</template>
+
+<script>
+//Recall mixins has the necessary datas and functions to give back quizRecall statu
+import { mapState } from 'pinia'
+import { useAppStore } from '../module/stores/appStore'
+import { useI18n } from 'vue-i18n'
+
+export default {
+  name: 'AppCompQuizRecall',
+  props: {
+    quizRecallData: { type: Object, required: true } //{activityId,pageId,hypertext_done,hypertext_undone,title, titletag}
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  data() {
+    return {
+      quizRecall: {
+        done: false,
+        answer: '',
+        ennonce: '',
+        title: '',
+        titletag: 'h4',
+        hypertext_done: `<p>${this.$t('message.recall_done')}</p>` /*String traduite par défaut*/,
+        hypertext_undone: `<p>${this.$t(
+          'message.recall_undone'
+        )}</p>` /*String traduite par défaut*/
+      },
+      hasError: [],
+      quizData: null,
+      isReady: false //Used to display skeleton while app data is not ready
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getAllCompleted',
+      'getUserInteraction',
+      'getPageInteraction',
+      'getAppStatus',
+      'getPageData'
+    ])
+  },
+
+  watch: {
+    //Watch for user interaction change to get quizRecall answer
+    getUserInteraction: {
+      async handler(newValue) {
+        if (!this.getUserInteraction) return
+
+        const { activityId, pageId } = this.quizRecallData
+        const interaction = this.getPageInteraction(
+          activityId,
+          pageId
+        ).userInteraction
+
+        if (!interaction) return
+        //Get quizRecall answer
+        if (this.quizRecallData && this.quizData) {
+          await this.getQuizRecallAnswer(interaction)
+        } else {
+          this.quizRecall.done == false
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  created() {
+    //Validate quizRecall data
+    //(no validation to the quiz, only to the new datas)
+    if (import.meta.env.DEV) {
+      this.validateQuizRecallData(this.quizRecallData)
+    }
+    const { activityId, pageId } = this.quizRecallData
+    //Get quizData and validate the quiz type
+    if (activityId && pageId) {
+      this.getQuizData(activityId, pageId)
+    }
+  },
+  methods: {
+    /**
+     * @description Finds a reponse_ouverte quiz data with specified ID
+     * @param {Object} searchObject Object that will be iterated over to find the quiz data (The page "data" object)
+     * @param {String} quizID ID of the quiz we are looking for
+     */
+    findQuizdataObject(searchObject, quizID) {
+      for (let property in searchObject) {
+        //Should only check for not null poperties
+        if (!searchObject[property]) continue
+
+        // Should only check for Object or Array property
+        if (
+          searchObject[property].constructor !== Object &&
+          searchObject[property].constructor !== Array
+        )
+          continue
+
+        if (
+          searchObject[property].constructor == Array &&
+          searchObject[property][0].constructor !== Object
+        )
+          continue
+
+        // Convert if it not an Array but an Objet
+        const searchArray =
+          searchObject[property].constructor === Object
+            ? [searchObject[property]]
+            : searchObject[property]
+        //Only Search for quiz:
+        //Search Array is a list of quiz if one of its element has at least the property 'type_question'
+        return searchArray[0]['type_question']
+          ? searchArray.find(
+              (e) => e.id === quizID && e.type_question === 'reponse_ouverte'
+            )
+          : null
+      }
+    },
+    //Get datas from the original open answer quiz
+    getQuizData(activityId, pageId) {
+      if (pageId && activityId) {
+        let pageData = this.getPageData(activityId, pageId)
+
+        if (pageData) {
+          this.quizData = this.findQuizdataObject(
+            pageData,
+            this.quizRecallData.quizId
+          )
+
+          //Warn that the specified quiz could not be found
+          if (!this.quizData) {
+            let msgErr = `Aucun quiz avec id '${this.quizRecallData.quizId}' pour la ${pageId} de ${activityId}`
+            console.warn(
+              `%c WARNING!>>> Quiz Recall: Unable to find a quiz with type_question 'reponse_ouverte' and id '${this.quizRecallData.quizId}' in ${pageId} of ${activityId}`,
+              'background: orange; color: white; display: block; margin:5px;'
+            )
+            this.hasError.push(msgErr)
+          }
+        } else {
+          this.quizRecall.done == false
+          let msgErr = `Aucun quiz avec id '${this.quizRecallData.quizId}' pour la ${pageId} de ${activityId}`
+          console.warn(
+            `%c WARNING!>>> AppCompQuizRecall : QuizData ActivityID and PageID combinaison is invalid.`,
+            'background: orange; color: white; display: block; margin:5px;'
+          )
+          this.hasError.push(msgErr)
+        }
+      } else {
+        this.quizRecall.done == false
+      }
+    },
+    //Get datas from quizRecallData and userData and add them to quizRecall object
+    async getQuizRecallAnswer(userData) {
+      await this.$nextTick() //wait for the DOM to update
+      const { quizId, hypertext_done, hypertext_undone, title, titletag } =
+        this.quizRecallData
+
+      //Add hypertext_done and undone to quizRecall
+      if (hypertext_done) {
+        this.quizRecall.hypertext_done = hypertext_done
+      }
+      if (hypertext_undone) {
+        this.quizRecall.hypertext_undone = hypertext_undone
+      }
+      //Add the title if it exists
+      if (title) {
+        this.quizRecall.title = title
+        //Modify le titletag
+        if (titletag) {
+          let validator = this.validateTitleTag(titletag)
+          if (validator) {
+            this.quizRecall.titletag = titletag
+          }
+        }
+      }
+      //Get the quiz answers from userData
+      const answers = userData.quizAnswers || {}
+      let quizAnswer = answers[quizId] || null
+
+      //If quiz answer exists in userData, quizRecall done is true and add the quiz answer to quizRecall
+      quizAnswer
+        ? (this.quizRecall.done = true)
+        : (this.quizRecall.done = false)
+
+      if (quizAnswer) {
+        this.quizRecall.answer = quizAnswer.value[0].filled || ''
+        this.quizRecall.ennonce = this.quizData.ennonce
+      }
+      this.quizRecall
+      this.isReady = true //Set isReady to true to display the component
+    },
+
+    //Validate quizRecallData
+    /*Validate if the required properties are present in the object and that there is not invalid properties */
+    validateQuizRecallData(value) {
+      let requiredProperties = [
+        'quizId',
+        'activityId',
+        'pageId',
+        'hypertext_done',
+        'hypertext_undone'
+      ]
+      let optionalProperties = ['title', 'titletag']
+      let allProperties = requiredProperties.concat(optionalProperties)
+
+      //Verify if the properties are valid
+      let recallDataProperties = Object.keys(value)
+      let wrongProperties = []
+      let missingRequired = []
+
+      //Get all the invalids properties from recallQuizData
+      /*Add element from target array that are NOT in arr to the wrongArray*/
+      let checkerWrong = (arr, target, wrongArray) =>
+        target.every((v) => {
+          if (arr.includes(v)) {
+            return true
+          } else {
+            wrongArray.push(v)
+            return true
+          }
+        })
+      //Get all the required properties that are missing from recallQuizData
+      /*Add element from the arr that are NOT in target arr to the missingArray*/
+
+      let checkerMissing = (arr, target, missingArray) =>
+        arr.every((v) => {
+          if (target.includes(v)) {
+            return true
+          } else {
+            missingArray.push(v)
+            return true
+          }
+        })
+
+      checkerWrong(allProperties, recallDataProperties, wrongProperties)
+      checkerMissing(requiredProperties, recallDataProperties, missingRequired)
+
+      //Validate if all properties in quizRecallData are valid
+      if (wrongProperties.length > 0) {
+        let msgErr = `QuizRecallData ${wrongProperties} invalid`
+        console.warn(
+          `%c WARNING!>>> AppCompQuizRecall : ${msgErr}. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+        this.hasError.push(msgErr)
+      }
+      //Validate if all required properties are present in quizRecallData
+      if (missingRequired.length > 0) {
+        let msgErr = `QuizRecallData missing required ${missingRequired} property`
+        console.warn(
+          `%c WARNING!>>>  AppCompQuizRecall : ${msgErr}. Required properties: activityId and pageId. Optional properties:  title, titletag, hypertext_done and hypertext_undone.`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+        this.hasError.push(msgErr)
+      }
+    },
+    /*Get a title tag (string). Return true if the tag is valid and false is it's not*/
+
+    validateTitleTag(value) {
+      let tags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span']
+      let lowerValue = value.toLowerCase()
+      if (tags && value && tags.find((element) => element == lowerValue))
+        return true
+      else {
+        let msgErr = `Your quizRecallData titletag is not valid`
+        console.warn(
+          '%c WARNING!>>> AppCompQuizRecall : Your quizRecallData titletag is not valid. You can use h1,h2,h3,h4,h5,h6,p,or span',
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+        this.hasError.push(msgErr)
+        return false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.skeleton {
+  height: 20px;
+  width: 200px;
+  background-color: #ccc;
+  border-radius: 4px;
+  animation: pulse 1.5s infinite ease-in-out;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+</style>