fcad-core-dragon 2.0.0-beta.2 → 2.0.0-beta.3

package/src/components/AppCompQuizRecall.vue

@@ -1,277 +1,276 @@
-<!--
- @ 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. 
--->
-
-<template>
-  <section class="quizRecall">
-    <!--Optionnal title, out of quiz-answer-conditionning, default tag H4, but can be change by user-->
-    <component
-      :is="quizRecall.titletag"
-      v-if="quizRecall.title"
-      class="quizRecall-title"
-    >
-      {{ quizRecall.title }}
-    </component>
-    <!--Quiz answer conditionning-->
-    <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
-        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>
-  </section>
-</template>
-
-<script>
-//Recall mixins has the necessary datas and functions to give back quizRecall statu
-import { mapGetters } from 'vuex'
-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*/
-      },
-      quizData: null
-    }
-  },
-  computed: {
-    ...mapGetters(['getAllCompleted', 'getUserInteraction', 'getPageData'])
-  },
-  watch: {
-    //Change quizRecall when userData is changed (it is where answer are saved)
-    getUserInteraction(newUserData, oldUserData) {
-      if (this.quizRecallData && this.quizData) {
-        this.getQuizRecallAnswer(this.quizRecallData, this.quizData)
-      } else {
-        this.quizRecall.done == false
-      }
-    }
-  },
-  mounted() {},
-  created() {
-    //Validate quizRecall data
-    //(no validation to the quiz, only to the new datas)
-    this.validateQuizRecallData(this.quizRecallData)
-
-    //Get quizData and validate the quiz type
-    if (this.quizRecallData.activityId && this.quizRecallData.pageId) {
-      this.getQuizData(
-        this.quizRecallData.activityId,
-        this.quizRecallData.pageId
-      )
-    }
-
-    //Get quizRecall answer
-    if (this.quizRecallData && this.quizData) {
-      this.getQuizRecallAnswer(this.quizRecallData, this.quizData)
-    } else {
-      this.quizRecall.done == false
-    }
-  },
-  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) {
-        // Check if the current property is an object and has the required properties
-        if (
-          typeof searchObject[property] === 'object' &&
-          searchObject[property] !== null
-        ) {
-          if (
-            searchObject[property].id === quizID &&
-            searchObject[property].type_question === 'reponse_ouverte'
-          ) {
-            return searchObject[property] // Valid Quiz data found
-          }
-        }
-      }
-
-      // No reponse_ouverte quiz data with specified ID was found
-      return null
-    },
-    //Get datas from the original open answer quiz
-    getQuizData(activityId, pageId) {
-      if (pageId && activityId) {
-        let pageData = this.getPageData(activityId, pageId)
-        if (pageData && pageData.content) {
-          this.quizData = this.findQuizdataObject(
-            pageData.content,
-            this.quizRecallData.quizId
-          )
-          //Warn that the specified quiz could not be found
-          if (this.quizData === null) {
-            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;'
-            )
-          }
-        } else {
-          this.quizRecall.done == false
-          console.warn(
-            `%c WARNING!>>> AppCompQuizRecall : QuizData ActivityID and PageID combinaison is invalid.`,
-            'background: orange; color: white; display: block; margin:5px;'
-          )
-        }
-      } else {
-        this.quizRecall.done == false
-      }
-    },
-    //Get datas from quizRecallData and userData and add them to quizRecall object
-    getQuizRecallAnswer(quizRecallData, quizData) {
-      //Get userData
-      let userData = this.getUserInteraction
-      //Get quizId
-      let quizId = quizData.id
-      //Get activityId
-      let activityId = quizRecallData.activityId
-      //Get pageId
-      let pageId = quizRecallData.pageId
-      //Add hypertext_done and undone to quizRecall
-      if (quizRecallData.hypertext_done) {
-        this.quizRecall.hypertext_done = quizRecallData.hypertext_done
-      }
-      if (quizRecallData.hypertext_undone) {
-        this.quizRecall.hypertext_undone = quizRecallData.hypertext_undone
-      }
-      //Add the title if it exists
-      if (quizRecallData.title) {
-        this.quizRecall.title = quizRecallData.title
-        //Modify le titletag
-        if (quizRecallData.titletag) {
-          let validator = this.validateTitleTag(this.quizRecallData.titletag)
-          if (validator) {
-            this.quizRecall.titletag = this.quizRecallData.titletag
-          }
-        }
-      }
-
-      //If quiz answer exists in userData, quizRecall done is true and add the quiz answer to quizRecall
-      if (
-        userData &&
-        userData[activityId] &&
-        userData[activityId][pageId] &&
-        userData[activityId][pageId].userInteraction &&
-        userData[activityId][pageId].userInteraction.quizAnswers &&
-        userData[activityId][pageId].userInteraction.quizAnswers[quizId]
-      ) {
-        this.quizRecall.done = true
-        this.quizRecall.answer =
-          userData[activityId][pageId].userInteraction.quizAnswers[quizId]
-        this.quizRecall.ennonce = quizData.ennonce
-      } else {
-        //If the quiz answer doesn't exist
-        this.quizRecall.done = false
-      }
-    },
-
-    //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) {
-        console.warn(
-          `%c WARNING!>>> AppCompQuizRecall : QuizRecallData ${wrongProperties} invalid. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-      }
-      //Validate if all required properties are present in quizRecallData
-      if (missingRequired.length > 0) {
-        console.warn(
-          `%c WARNING!>>>  AppCompQuizRecall : QuizRecallData missing required ${missingRequired} property. Required properties: activityId and pageId. Optional properties:  title, titletag, hypertext_done and hypertext_undone.`,
-          'background: orange; color: white; display: block; margin:5px;'
-        )
-      }
-    },
-    /*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 {
-        console.warn(
-          '%c WARNING!>>> recallMixins: 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;'
-        )
-        return false
-      }
-    }
-  }
-}
-</script>
+<!--
+ @ 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 class="quizRecall">
+    <!--Optionnal title, out of quiz-answer-conditionning, default tag H4, but can be change by user-->
+    <component
+      :is="quizRecall.titletag"
+      v-if="quizRecall.title"
+      class="quizRecall-title"
+    >
+      {{ quizRecall.title }}
+    </component>
+    <!--Quiz answer conditionning-->
+    <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
+        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>
+  </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*/
+      },
+      quizData: null
+    }
+  },
+  computed: {
+    ...mapState(useAppStore, [
+      'getAllCompleted',
+      'getUserInteraction',
+      'getPageInteraction',
+      'getPageData'
+    ])
+  },
+  created() {
+    //Validate quizRecall data
+    //(no validation to the quiz, only to the new datas)
+    this.validateQuizRecallData(this.quizRecallData)
+    const { activityId, pageId } = this.quizRecallData
+    //Get quizData and validate the quiz type
+    if (activityId && pageId) {
+      this.getQuizData(activityId, pageId)
+    }
+
+    //Get quizRecall answer
+    if (this.quizRecallData && this.quizData) {
+      this.getQuizRecallAnswer(this.quizRecallData, this.quizData)
+    } else {
+      this.quizRecall.done == false
+    }
+  },
+  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 Object or Array property
+        if (
+          searchObject[property].constructor !== Array &&
+          searchObject[property].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) {
+            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;'
+            )
+          }
+        } else {
+          this.quizRecall.done == false
+          console.warn(
+            `%c WARNING!>>> AppCompQuizRecall : QuizData ActivityID and PageID combinaison is invalid.`,
+            'background: orange; color: white; display: block; margin:5px;'
+          )
+        }
+      } else {
+        this.quizRecall.done == false
+      }
+    },
+    //Get datas from quizRecallData and userData and add them to quizRecall object
+    getQuizRecallAnswer() {
+      //Get userData
+      const {
+        activityId,
+        pageId,
+        quizId,
+        hypertext_done,
+        hypertext_undone,
+        title,
+        titletag
+      } = this.quizRecallData
+
+      let userData = this.getPageInteraction(activityId, pageId)
+
+      //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
+          }
+        }
+      }
+
+      //If quiz answer exists in userData, quizRecall done is true and add the quiz answer to quizRecall
+      if (!userData || !userData.userInteraction)
+        return (this.quizRecall.done = false)
+
+      const { quizAnswers } = userData.userInteraction
+
+      if (!quizAnswers || !quizAnswers[quizId])
+        return (this.quizRecall.done = false)
+
+      this.quizRecall.done = true
+      this.quizRecall.answer = quizAnswers[quizId].value
+      this.quizRecall.ennonce = this.quizData.ennonce
+    },
+
+    //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) {
+        console.warn(
+          `%c WARNING!>>> AppCompQuizRecall : QuizRecallData ${wrongProperties} invalid. Required properties: ${requiredProperties} . Optional properties: ${optionalProperties}`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+      }
+      //Validate if all required properties are present in quizRecallData
+      if (missingRequired.length > 0) {
+        console.warn(
+          `%c WARNING!>>>  AppCompQuizRecall : QuizRecallData missing required ${missingRequired} property. Required properties: activityId and pageId. Optional properties:  title, titletag, hypertext_done and hypertext_undone.`,
+          'background: orange; color: white; display: block; margin:5px;'
+        )
+      }
+    },
+    /*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 {
+        console.warn(
+          '%c WARNING!>>> recallMixins: 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;'
+        )
+        return false
+      }
+    }
+  }
+}
+</script>